diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
index 9d22fe6..88f5445 100644
--- a/src/views/system/role/dataPerm.vue
+++ b/src/views/system/role/dataPerm.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getDeptTreeByRole } from '@/api/dept'
-import { dataAuthor } from '@/api/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { dataAuthor } from '@/api/system/role'
 
 export default {
   name: 'DataPerm',

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
index 9d22fe6..88f5445 100644
--- a/src/views/system/role/dataPerm.vue
+++ b/src/views/system/role/dataPerm.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getDeptTreeByRole } from '@/api/dept'
-import { dataAuthor } from '@/api/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { dataAuthor } from '@/api/system/role'
 
 export default {
   name: 'DataPerm',
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
index d161417..cc1add3 100644
--- a/src/views/system/role/editRole.vue
+++ b/src/views/system/role/editRole.vue
@@ -31,10 +31,22 @@
             <dept-select v-model="roleForm.deptid" placeholder="请选择组织机构" />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="数据权限" prop="dataScopeType">
+            <el-select v-model="roleForm.dataScopeType" placeholder="请选择">
+              <el-option
+                v-for="item in dataScopeTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+            <!--<el-input v-model="resourceForm.resourceType" type="text" placeholder="必填"/>-->
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -44,8 +56,8 @@
 import { toTreeList } from '@/utils/structure'
 import DeptSelect from '@/components/DeptSelect'
 import SelectTree from '@/components/SelectTree/singleSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList, addRole, updateRole } from '@/api/role'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList, addRole, updateRole, getDataScopeTypeList } from '@/api/system/role'
 
 export default {
   name: 'EditRole',
@@ -54,6 +66,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       roleForm: {
         id: '', // 编号
         pid: '', // 父级编号
@@ -61,7 +74,8 @@
         tips: '', // 别名，
         deptid: '', // 组织机构编号
         version: '', // 保留字段
-        num: 99 // 排序
+        num: 99, // 排序
+        dataScopeType: '' // 数据权限类型
       }, // 表单
       deptProps: {
         parent: 'pid',
@@ -77,6 +91,7 @@
       },
       deptTreeList: [], // 组织树列表数据
       roleTreeList: [], // 角色树列表数据
+      dataScopeTypeList: [], // 数据权限类型列表
       textMap: {
         update: '编辑',
         create: '新增'
@@ -97,14 +112,16 @@
       return tree
     }
   },
-  mounted: function() {
+  created: function() {
     this.fetchRoleTree()
+    this.fetchDataScopeType()
   },
   methods: {
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -124,29 +141,17 @@
       }
     },
     // 加载组织机构树形下拉菜单
-    // fetchDeptTree: function() {
-    //   getDeptTreeList().then(response => {
-    //     if (response.data.list) {
-    //       if (response.data.list.length > 1) {
-    //         debugger
-    //         if (judgeTree(response.data.list)) {
-    //           this.deptTreeList = toTreeList(response.data.list)
-    //           this.showDeptTree = 1
-    //         } else {
-    //           this.deptTreeList = response.data.list
-    //           this.showDeptTree = 2
-    //         }
-    //         console.log(this.deptTreeList)
-    //       } else {
-    //         this.showDeptTree = 0
-    //       }
-    //     }
-    //   })
-    // },
+    fetchDataScopeType: function() {
+      getDataScopeTypeList().then(response => {
+        if (response.data) {
+          this.dataScopeTypeList = response.data
+          console.log(this.resourceTreeList)
+        }
+      })
+    },
     // 加载角色树形下拉菜单
     fetchRoleTree: function() {
       getRoleTreeList(this.listQuery).then(response => {
-        console.log('fetchRoleTree:')
         console.log(response.data)
         if (response.data.list) {
           this.roleTreeList = toTreeList(response.data.list, '0')
@@ -180,6 +185,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.roleForm)
         if (valid) {
+          this.btnLoading = true
           addRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -187,6 +193,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -197,6 +204,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -205,12 +214,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
index 9d22fe6..88f5445 100644
--- a/src/views/system/role/dataPerm.vue
+++ b/src/views/system/role/dataPerm.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getDeptTreeByRole } from '@/api/dept'
-import { dataAuthor } from '@/api/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { dataAuthor } from '@/api/system/role'
 
 export default {
   name: 'DataPerm',
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
index d161417..cc1add3 100644
--- a/src/views/system/role/editRole.vue
+++ b/src/views/system/role/editRole.vue
@@ -31,10 +31,22 @@
             <dept-select v-model="roleForm.deptid" placeholder="请选择组织机构" />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="数据权限" prop="dataScopeType">
+            <el-select v-model="roleForm.dataScopeType" placeholder="请选择">
+              <el-option
+                v-for="item in dataScopeTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+            <!--<el-input v-model="resourceForm.resourceType" type="text" placeholder="必填"/>-->
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -44,8 +56,8 @@
 import { toTreeList } from '@/utils/structure'
 import DeptSelect from '@/components/DeptSelect'
 import SelectTree from '@/components/SelectTree/singleSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList, addRole, updateRole } from '@/api/role'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList, addRole, updateRole, getDataScopeTypeList } from '@/api/system/role'
 
 export default {
   name: 'EditRole',
@@ -54,6 +66,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       roleForm: {
         id: '', // 编号
         pid: '', // 父级编号
@@ -61,7 +74,8 @@
         tips: '', // 别名，
         deptid: '', // 组织机构编号
         version: '', // 保留字段
-        num: 99 // 排序
+        num: 99, // 排序
+        dataScopeType: '' // 数据权限类型
       }, // 表单
       deptProps: {
         parent: 'pid',
@@ -77,6 +91,7 @@
       },
       deptTreeList: [], // 组织树列表数据
       roleTreeList: [], // 角色树列表数据
+      dataScopeTypeList: [], // 数据权限类型列表
       textMap: {
         update: '编辑',
         create: '新增'
@@ -97,14 +112,16 @@
       return tree
     }
   },
-  mounted: function() {
+  created: function() {
     this.fetchRoleTree()
+    this.fetchDataScopeType()
   },
   methods: {
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -124,29 +141,17 @@
       }
     },
     // 加载组织机构树形下拉菜单
-    // fetchDeptTree: function() {
-    //   getDeptTreeList().then(response => {
-    //     if (response.data.list) {
-    //       if (response.data.list.length > 1) {
-    //         debugger
-    //         if (judgeTree(response.data.list)) {
-    //           this.deptTreeList = toTreeList(response.data.list)
-    //           this.showDeptTree = 1
-    //         } else {
-    //           this.deptTreeList = response.data.list
-    //           this.showDeptTree = 2
-    //         }
-    //         console.log(this.deptTreeList)
-    //       } else {
-    //         this.showDeptTree = 0
-    //       }
-    //     }
-    //   })
-    // },
+    fetchDataScopeType: function() {
+      getDataScopeTypeList().then(response => {
+        if (response.data) {
+          this.dataScopeTypeList = response.data
+          console.log(this.resourceTreeList)
+        }
+      })
+    },
     // 加载角色树形下拉菜单
     fetchRoleTree: function() {
       getRoleTreeList(this.listQuery).then(response => {
-        console.log('fetchRoleTree:')
         console.log(response.data)
         if (response.data.list) {
           this.roleTreeList = toTreeList(response.data.list, '0')
@@ -180,6 +185,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.roleForm)
         if (valid) {
+          this.btnLoading = true
           addRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -187,6 +193,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -197,6 +204,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -205,12 +214,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
index 75fc261..4fba274 100644
--- a/src/views/system/role/functionPerm.vue
+++ b/src/views/system/role/functionPerm.vue
@@ -10,9 +10,7 @@
         :default-checked-keys="defaultChecked"
         check-strictly
         show-checkbox
-        node-key="id"
-        @check="changeSelect"
-      />
+        node-key="id"/>
     </el-scrollbar>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="saveData">保存</el-button>
@@ -23,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getResourceListByRole } from '@/api/resource'
-import { funcAuthor } from '@/api/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { funcAuthor } from '@/api/system/role'
 
 export default {
   name: 'FunctionPerm',
@@ -37,7 +35,6 @@
         label: 'name',
         children: 'children'
       },
-      resourcePlainList: [], // 资源列表平行数据
       resourceTreeList: [], // 资源树列表数据
       defaultExpanded: [], // 默认展开的项
       defaultChecked: [], // 默认选中的树
@@ -64,7 +61,6 @@
     fetchResourceTree: function() {
       getResourceListByRole(this.roleId).then(response => {
         if (response.data.list) {
-          this.resourcePlainList = response.data.list
           this.resourceTreeList = toTreeList(response.data.list)
           const temp = getShowItem(response.data.list) // 获取展开项和选中项
           this.defaultExpanded = temp[0]
@@ -84,76 +80,7 @@
           this.dialogFormVisible = false
         }
       })
-    },
-    // 选择变更，对应更新上下级
-    changeSelect(node, treeState) {
-      const checked = treeState.checkedKeys.findIndex(v => v === node.id) !== -1
-      // 若有子节点，将子节点都选中或不选中
-      this.checkChildState(node, checked, treeState)
-      // 如果有父节点，向上追溯找父节点
-      if (node.pid !== '0' && checked) {
-        // treeState.checkedKeys.push(node.pid)
-        const pcodes_str = node.pcodes
-        const pcodes_ori_list = pcodes_str.split(',')
-        const pcodes_list = [] // 存父级pcodes
-        for (const item of pcodes_ori_list) {
-          if (item.length !== 0) {
-            pcodes_list.push(item.substring(1, item.length - 1))
-          }
-        }
-        // 根据code找id,将id放入选中列表
-        for (const item of this.resourcePlainList) {
-          if (pcodes_list.includes(item.code)) {
-            treeState.checkedKeys.push(item.id)
-          }
-        }
-      }
-      // else if (node.pid !== '0' && !checked) {
-      //   const index = treeState.checkedKeys.findIndex(v => v === node.pid)
-      //   if (index !== -1) {
-      //     treeState.checkedKeys.splice(index, 1)
-      //   }
-      // }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-    },
-    // 检查子节点状态，状态若有变更更新
-    checkChildState(node, checked, treeState) {
-      // 如果选中
-      if (checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index === -1) {
-          treeState.checkedKeys.push(node.id)
-        }
-      } else { // 如果没有选中
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-
-      if (node.children && node.children.length > 0) {
-        node.children.forEach((item) => {
-          this.checkChildState(item, checked, treeState)
-        })
-      }
-    },
-    // 检查父节点状态，状态若有变更则更新
-    checkParentState(pid, checked, treeState) {
-      if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index === -1) {
-          treeState.checkedKeys.push(pid)
-        }
-      } else if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
     }
-
   }
 }
 </script>

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
index 9d22fe6..88f5445 100644
--- a/src/views/system/role/dataPerm.vue
+++ b/src/views/system/role/dataPerm.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getDeptTreeByRole } from '@/api/dept'
-import { dataAuthor } from '@/api/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { dataAuthor } from '@/api/system/role'
 
 export default {
   name: 'DataPerm',
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
index d161417..cc1add3 100644
--- a/src/views/system/role/editRole.vue
+++ b/src/views/system/role/editRole.vue
@@ -31,10 +31,22 @@
             <dept-select v-model="roleForm.deptid" placeholder="请选择组织机构" />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="数据权限" prop="dataScopeType">
+            <el-select v-model="roleForm.dataScopeType" placeholder="请选择">
+              <el-option
+                v-for="item in dataScopeTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+            <!--<el-input v-model="resourceForm.resourceType" type="text" placeholder="必填"/>-->
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -44,8 +56,8 @@
 import { toTreeList } from '@/utils/structure'
 import DeptSelect from '@/components/DeptSelect'
 import SelectTree from '@/components/SelectTree/singleSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList, addRole, updateRole } from '@/api/role'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList, addRole, updateRole, getDataScopeTypeList } from '@/api/system/role'
 
 export default {
   name: 'EditRole',
@@ -54,6 +66,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       roleForm: {
         id: '', // 编号
         pid: '', // 父级编号
@@ -61,7 +74,8 @@
         tips: '', // 别名，
         deptid: '', // 组织机构编号
         version: '', // 保留字段
-        num: 99 // 排序
+        num: 99, // 排序
+        dataScopeType: '' // 数据权限类型
       }, // 表单
       deptProps: {
         parent: 'pid',
@@ -77,6 +91,7 @@
       },
       deptTreeList: [], // 组织树列表数据
       roleTreeList: [], // 角色树列表数据
+      dataScopeTypeList: [], // 数据权限类型列表
       textMap: {
         update: '编辑',
         create: '新增'
@@ -97,14 +112,16 @@
       return tree
     }
   },
-  mounted: function() {
+  created: function() {
     this.fetchRoleTree()
+    this.fetchDataScopeType()
   },
   methods: {
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -124,29 +141,17 @@
       }
     },
     // 加载组织机构树形下拉菜单
-    // fetchDeptTree: function() {
-    //   getDeptTreeList().then(response => {
-    //     if (response.data.list) {
-    //       if (response.data.list.length > 1) {
-    //         debugger
-    //         if (judgeTree(response.data.list)) {
-    //           this.deptTreeList = toTreeList(response.data.list)
-    //           this.showDeptTree = 1
-    //         } else {
-    //           this.deptTreeList = response.data.list
-    //           this.showDeptTree = 2
-    //         }
-    //         console.log(this.deptTreeList)
-    //       } else {
-    //         this.showDeptTree = 0
-    //       }
-    //     }
-    //   })
-    // },
+    fetchDataScopeType: function() {
+      getDataScopeTypeList().then(response => {
+        if (response.data) {
+          this.dataScopeTypeList = response.data
+          console.log(this.resourceTreeList)
+        }
+      })
+    },
     // 加载角色树形下拉菜单
     fetchRoleTree: function() {
       getRoleTreeList(this.listQuery).then(response => {
-        console.log('fetchRoleTree:')
         console.log(response.data)
         if (response.data.list) {
           this.roleTreeList = toTreeList(response.data.list, '0')
@@ -180,6 +185,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.roleForm)
         if (valid) {
+          this.btnLoading = true
           addRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -187,6 +193,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -197,6 +204,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -205,12 +214,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
index 75fc261..4fba274 100644
--- a/src/views/system/role/functionPerm.vue
+++ b/src/views/system/role/functionPerm.vue
@@ -10,9 +10,7 @@
         :default-checked-keys="defaultChecked"
         check-strictly
         show-checkbox
-        node-key="id"
-        @check="changeSelect"
-      />
+        node-key="id"/>
     </el-scrollbar>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="saveData">保存</el-button>
@@ -23,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getResourceListByRole } from '@/api/resource'
-import { funcAuthor } from '@/api/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { funcAuthor } from '@/api/system/role'
 
 export default {
   name: 'FunctionPerm',
@@ -37,7 +35,6 @@
         label: 'name',
         children: 'children'
       },
-      resourcePlainList: [], // 资源列表平行数据
       resourceTreeList: [], // 资源树列表数据
       defaultExpanded: [], // 默认展开的项
       defaultChecked: [], // 默认选中的树
@@ -64,7 +61,6 @@
     fetchResourceTree: function() {
       getResourceListByRole(this.roleId).then(response => {
         if (response.data.list) {
-          this.resourcePlainList = response.data.list
           this.resourceTreeList = toTreeList(response.data.list)
           const temp = getShowItem(response.data.list) // 获取展开项和选中项
           this.defaultExpanded = temp[0]
@@ -84,76 +80,7 @@
           this.dialogFormVisible = false
         }
       })
-    },
-    // 选择变更，对应更新上下级
-    changeSelect(node, treeState) {
-      const checked = treeState.checkedKeys.findIndex(v => v === node.id) !== -1
-      // 若有子节点，将子节点都选中或不选中
-      this.checkChildState(node, checked, treeState)
-      // 如果有父节点，向上追溯找父节点
-      if (node.pid !== '0' && checked) {
-        // treeState.checkedKeys.push(node.pid)
-        const pcodes_str = node.pcodes
-        const pcodes_ori_list = pcodes_str.split(',')
-        const pcodes_list = [] // 存父级pcodes
-        for (const item of pcodes_ori_list) {
-          if (item.length !== 0) {
-            pcodes_list.push(item.substring(1, item.length - 1))
-          }
-        }
-        // 根据code找id,将id放入选中列表
-        for (const item of this.resourcePlainList) {
-          if (pcodes_list.includes(item.code)) {
-            treeState.checkedKeys.push(item.id)
-          }
-        }
-      }
-      // else if (node.pid !== '0' && !checked) {
-      //   const index = treeState.checkedKeys.findIndex(v => v === node.pid)
-      //   if (index !== -1) {
-      //     treeState.checkedKeys.splice(index, 1)
-      //   }
-      // }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-    },
-    // 检查子节点状态，状态若有变更更新
-    checkChildState(node, checked, treeState) {
-      // 如果选中
-      if (checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index === -1) {
-          treeState.checkedKeys.push(node.id)
-        }
-      } else { // 如果没有选中
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-
-      if (node.children && node.children.length > 0) {
-        node.children.forEach((item) => {
-          this.checkChildState(item, checked, treeState)
-        })
-      }
-    },
-    // 检查父节点状态，状态若有变更则更新
-    checkParentState(pid, checked, treeState) {
-      if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index === -1) {
-          treeState.checkedKeys.push(pid)
-        }
-      } else if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
     }
-
   }
 }
 </script>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index 2ce6456..c567717 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="roleName">
-          <el-input v-model.trim="listQuery.keyword" placeholder="角色名称" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/role/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="角色名称" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/role/add')" class="filter-item" size="small" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="250">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-          <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
-          <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="250">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+            <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
+            <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-role v-show="editShow" ref="editrole" @watchChild="fetchData"/>
     <!--功能权限-->
@@ -29,7 +29,7 @@
     <!--数据权限-->
     <data-perm v-show="dataShow" ref="dataperm" />
 
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -38,12 +38,18 @@
 import editRole from '@/views/system/role/editrole'
 import functionPerm from '@/views/system/role/functionPerm'
 import dataPerm from '@/views/system/role/dataPerm'
-import { getRoleList, delRole } from '@/api/role'
+import { getRoleList, delRole } from '@/api/system/role'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListRole',
   components: {
+    SearchItem,
+    SearchArea,
+    AppContainer,
     treeTable,
     functionPerm,
     dataPerm,
@@ -141,7 +147,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             // this.deleteItem(value.children, des)

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
index 9d22fe6..88f5445 100644
--- a/src/views/system/role/dataPerm.vue
+++ b/src/views/system/role/dataPerm.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getDeptTreeByRole } from '@/api/dept'
-import { dataAuthor } from '@/api/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { dataAuthor } from '@/api/system/role'
 
 export default {
   name: 'DataPerm',
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
index d161417..cc1add3 100644
--- a/src/views/system/role/editRole.vue
+++ b/src/views/system/role/editRole.vue
@@ -31,10 +31,22 @@
             <dept-select v-model="roleForm.deptid" placeholder="请选择组织机构" />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="数据权限" prop="dataScopeType">
+            <el-select v-model="roleForm.dataScopeType" placeholder="请选择">
+              <el-option
+                v-for="item in dataScopeTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+            <!--<el-input v-model="resourceForm.resourceType" type="text" placeholder="必填"/>-->
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -44,8 +56,8 @@
 import { toTreeList } from '@/utils/structure'
 import DeptSelect from '@/components/DeptSelect'
 import SelectTree from '@/components/SelectTree/singleSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList, addRole, updateRole } from '@/api/role'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList, addRole, updateRole, getDataScopeTypeList } from '@/api/system/role'
 
 export default {
   name: 'EditRole',
@@ -54,6 +66,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       roleForm: {
         id: '', // 编号
         pid: '', // 父级编号
@@ -61,7 +74,8 @@
         tips: '', // 别名，
         deptid: '', // 组织机构编号
         version: '', // 保留字段
-        num: 99 // 排序
+        num: 99, // 排序
+        dataScopeType: '' // 数据权限类型
       }, // 表单
       deptProps: {
         parent: 'pid',
@@ -77,6 +91,7 @@
       },
       deptTreeList: [], // 组织树列表数据
       roleTreeList: [], // 角色树列表数据
+      dataScopeTypeList: [], // 数据权限类型列表
       textMap: {
         update: '编辑',
         create: '新增'
@@ -97,14 +112,16 @@
       return tree
     }
   },
-  mounted: function() {
+  created: function() {
     this.fetchRoleTree()
+    this.fetchDataScopeType()
   },
   methods: {
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -124,29 +141,17 @@
       }
     },
     // 加载组织机构树形下拉菜单
-    // fetchDeptTree: function() {
-    //   getDeptTreeList().then(response => {
-    //     if (response.data.list) {
-    //       if (response.data.list.length > 1) {
-    //         debugger
-    //         if (judgeTree(response.data.list)) {
-    //           this.deptTreeList = toTreeList(response.data.list)
-    //           this.showDeptTree = 1
-    //         } else {
-    //           this.deptTreeList = response.data.list
-    //           this.showDeptTree = 2
-    //         }
-    //         console.log(this.deptTreeList)
-    //       } else {
-    //         this.showDeptTree = 0
-    //       }
-    //     }
-    //   })
-    // },
+    fetchDataScopeType: function() {
+      getDataScopeTypeList().then(response => {
+        if (response.data) {
+          this.dataScopeTypeList = response.data
+          console.log(this.resourceTreeList)
+        }
+      })
+    },
     // 加载角色树形下拉菜单
     fetchRoleTree: function() {
       getRoleTreeList(this.listQuery).then(response => {
-        console.log('fetchRoleTree:')
         console.log(response.data)
         if (response.data.list) {
           this.roleTreeList = toTreeList(response.data.list, '0')
@@ -180,6 +185,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.roleForm)
         if (valid) {
+          this.btnLoading = true
           addRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -187,6 +193,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -197,6 +204,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -205,12 +214,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
index 75fc261..4fba274 100644
--- a/src/views/system/role/functionPerm.vue
+++ b/src/views/system/role/functionPerm.vue
@@ -10,9 +10,7 @@
         :default-checked-keys="defaultChecked"
         check-strictly
         show-checkbox
-        node-key="id"
-        @check="changeSelect"
-      />
+        node-key="id"/>
     </el-scrollbar>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="saveData">保存</el-button>
@@ -23,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getResourceListByRole } from '@/api/resource'
-import { funcAuthor } from '@/api/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { funcAuthor } from '@/api/system/role'
 
 export default {
   name: 'FunctionPerm',
@@ -37,7 +35,6 @@
         label: 'name',
         children: 'children'
       },
-      resourcePlainList: [], // 资源列表平行数据
       resourceTreeList: [], // 资源树列表数据
       defaultExpanded: [], // 默认展开的项
       defaultChecked: [], // 默认选中的树
@@ -64,7 +61,6 @@
     fetchResourceTree: function() {
       getResourceListByRole(this.roleId).then(response => {
         if (response.data.list) {
-          this.resourcePlainList = response.data.list
           this.resourceTreeList = toTreeList(response.data.list)
           const temp = getShowItem(response.data.list) // 获取展开项和选中项
           this.defaultExpanded = temp[0]
@@ -84,76 +80,7 @@
           this.dialogFormVisible = false
         }
       })
-    },
-    // 选择变更，对应更新上下级
-    changeSelect(node, treeState) {
-      const checked = treeState.checkedKeys.findIndex(v => v === node.id) !== -1
-      // 若有子节点，将子节点都选中或不选中
-      this.checkChildState(node, checked, treeState)
-      // 如果有父节点，向上追溯找父节点
-      if (node.pid !== '0' && checked) {
-        // treeState.checkedKeys.push(node.pid)
-        const pcodes_str = node.pcodes
-        const pcodes_ori_list = pcodes_str.split(',')
-        const pcodes_list = [] // 存父级pcodes
-        for (const item of pcodes_ori_list) {
-          if (item.length !== 0) {
-            pcodes_list.push(item.substring(1, item.length - 1))
-          }
-        }
-        // 根据code找id,将id放入选中列表
-        for (const item of this.resourcePlainList) {
-          if (pcodes_list.includes(item.code)) {
-            treeState.checkedKeys.push(item.id)
-          }
-        }
-      }
-      // else if (node.pid !== '0' && !checked) {
-      //   const index = treeState.checkedKeys.findIndex(v => v === node.pid)
-      //   if (index !== -1) {
-      //     treeState.checkedKeys.splice(index, 1)
-      //   }
-      // }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-    },
-    // 检查子节点状态，状态若有变更更新
-    checkChildState(node, checked, treeState) {
-      // 如果选中
-      if (checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index === -1) {
-          treeState.checkedKeys.push(node.id)
-        }
-      } else { // 如果没有选中
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-
-      if (node.children && node.children.length > 0) {
-        node.children.forEach((item) => {
-          this.checkChildState(item, checked, treeState)
-        })
-      }
-    },
-    // 检查父节点状态，状态若有变更则更新
-    checkParentState(pid, checked, treeState) {
-      if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index === -1) {
-          treeState.checkedKeys.push(pid)
-        }
-      } else if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
     }
-
   }
 }
 </script>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index 2ce6456..c567717 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="roleName">
-          <el-input v-model.trim="listQuery.keyword" placeholder="角色名称" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/role/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="角色名称" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/role/add')" class="filter-item" size="small" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="250">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-          <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
-          <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="250">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+            <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
+            <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-role v-show="editShow" ref="editrole" @watchChild="fetchData"/>
     <!--功能权限-->
@@ -29,7 +29,7 @@
     <!--数据权限-->
     <data-perm v-show="dataShow" ref="dataperm" />
 
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -38,12 +38,18 @@
 import editRole from '@/views/system/role/editrole'
 import functionPerm from '@/views/system/role/functionPerm'
 import dataPerm from '@/views/system/role/dataPerm'
-import { getRoleList, delRole } from '@/api/role'
+import { getRoleList, delRole } from '@/api/system/role'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListRole',
   components: {
+    SearchItem,
+    SearchArea,
+    AppContainer,
     treeTable,
     functionPerm,
     dataPerm,
@@ -141,7 +147,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             // this.deleteItem(value.children, des)
diff --git a/src/views/system/user/editUser.vue b/src/views/system/user/editUser.vue
index 2fd735a..a9ba171 100644
--- a/src/views/system/user/editUser.vue
+++ b/src/views/system/user/editUser.vue
@@ -79,7 +79,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -89,9 +89,9 @@
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
 import DeptSelect from '@/components/DeptSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList } from '@/api/role'
-import { addUser, updateUser } from '@/api/user'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList } from '@/api/system/role'
+import { addUser, updateUser } from '@/api/system/user'
 import { RSAencrypt } from '../../../utils/security'
 
 export default {
@@ -186,7 +186,8 @@
           trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       roleName: '',
-      deptShow: true
+      deptShow: true,
+      btnLoading: false // 保存按钮的加载中状态
     }
   },
   computed: {
@@ -204,6 +205,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.ifdisabled = false
@@ -269,6 +271,7 @@
         const userForm = JSON.parse(JSON.stringify(this.userForm))
         userForm.password = RSAencrypt(userForm.password)
         if (valid) {
+          this.btnLoading = true
           addUser(userForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -276,6 +279,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -285,6 +289,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -293,12 +299,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateUser(this.userForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
index 9d22fe6..88f5445 100644
--- a/src/views/system/role/dataPerm.vue
+++ b/src/views/system/role/dataPerm.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getDeptTreeByRole } from '@/api/dept'
-import { dataAuthor } from '@/api/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { dataAuthor } from '@/api/system/role'
 
 export default {
   name: 'DataPerm',
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
index d161417..cc1add3 100644
--- a/src/views/system/role/editRole.vue
+++ b/src/views/system/role/editRole.vue
@@ -31,10 +31,22 @@
             <dept-select v-model="roleForm.deptid" placeholder="请选择组织机构" />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="数据权限" prop="dataScopeType">
+            <el-select v-model="roleForm.dataScopeType" placeholder="请选择">
+              <el-option
+                v-for="item in dataScopeTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+            <!--<el-input v-model="resourceForm.resourceType" type="text" placeholder="必填"/>-->
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -44,8 +56,8 @@
 import { toTreeList } from '@/utils/structure'
 import DeptSelect from '@/components/DeptSelect'
 import SelectTree from '@/components/SelectTree/singleSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList, addRole, updateRole } from '@/api/role'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList, addRole, updateRole, getDataScopeTypeList } from '@/api/system/role'
 
 export default {
   name: 'EditRole',
@@ -54,6 +66,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       roleForm: {
         id: '', // 编号
         pid: '', // 父级编号
@@ -61,7 +74,8 @@
         tips: '', // 别名，
         deptid: '', // 组织机构编号
         version: '', // 保留字段
-        num: 99 // 排序
+        num: 99, // 排序
+        dataScopeType: '' // 数据权限类型
       }, // 表单
       deptProps: {
         parent: 'pid',
@@ -77,6 +91,7 @@
       },
       deptTreeList: [], // 组织树列表数据
       roleTreeList: [], // 角色树列表数据
+      dataScopeTypeList: [], // 数据权限类型列表
       textMap: {
         update: '编辑',
         create: '新增'
@@ -97,14 +112,16 @@
       return tree
     }
   },
-  mounted: function() {
+  created: function() {
     this.fetchRoleTree()
+    this.fetchDataScopeType()
   },
   methods: {
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -124,29 +141,17 @@
       }
     },
     // 加载组织机构树形下拉菜单
-    // fetchDeptTree: function() {
-    //   getDeptTreeList().then(response => {
-    //     if (response.data.list) {
-    //       if (response.data.list.length > 1) {
-    //         debugger
-    //         if (judgeTree(response.data.list)) {
-    //           this.deptTreeList = toTreeList(response.data.list)
-    //           this.showDeptTree = 1
-    //         } else {
-    //           this.deptTreeList = response.data.list
-    //           this.showDeptTree = 2
-    //         }
-    //         console.log(this.deptTreeList)
-    //       } else {
-    //         this.showDeptTree = 0
-    //       }
-    //     }
-    //   })
-    // },
+    fetchDataScopeType: function() {
+      getDataScopeTypeList().then(response => {
+        if (response.data) {
+          this.dataScopeTypeList = response.data
+          console.log(this.resourceTreeList)
+        }
+      })
+    },
     // 加载角色树形下拉菜单
     fetchRoleTree: function() {
       getRoleTreeList(this.listQuery).then(response => {
-        console.log('fetchRoleTree:')
         console.log(response.data)
         if (response.data.list) {
           this.roleTreeList = toTreeList(response.data.list, '0')
@@ -180,6 +185,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.roleForm)
         if (valid) {
+          this.btnLoading = true
           addRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -187,6 +193,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -197,6 +204,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -205,12 +214,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
index 75fc261..4fba274 100644
--- a/src/views/system/role/functionPerm.vue
+++ b/src/views/system/role/functionPerm.vue
@@ -10,9 +10,7 @@
         :default-checked-keys="defaultChecked"
         check-strictly
         show-checkbox
-        node-key="id"
-        @check="changeSelect"
-      />
+        node-key="id"/>
     </el-scrollbar>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="saveData">保存</el-button>
@@ -23,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getResourceListByRole } from '@/api/resource'
-import { funcAuthor } from '@/api/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { funcAuthor } from '@/api/system/role'
 
 export default {
   name: 'FunctionPerm',
@@ -37,7 +35,6 @@
         label: 'name',
         children: 'children'
       },
-      resourcePlainList: [], // 资源列表平行数据
       resourceTreeList: [], // 资源树列表数据
       defaultExpanded: [], // 默认展开的项
       defaultChecked: [], // 默认选中的树
@@ -64,7 +61,6 @@
     fetchResourceTree: function() {
       getResourceListByRole(this.roleId).then(response => {
         if (response.data.list) {
-          this.resourcePlainList = response.data.list
           this.resourceTreeList = toTreeList(response.data.list)
           const temp = getShowItem(response.data.list) // 获取展开项和选中项
           this.defaultExpanded = temp[0]
@@ -84,76 +80,7 @@
           this.dialogFormVisible = false
         }
       })
-    },
-    // 选择变更，对应更新上下级
-    changeSelect(node, treeState) {
-      const checked = treeState.checkedKeys.findIndex(v => v === node.id) !== -1
-      // 若有子节点，将子节点都选中或不选中
-      this.checkChildState(node, checked, treeState)
-      // 如果有父节点，向上追溯找父节点
-      if (node.pid !== '0' && checked) {
-        // treeState.checkedKeys.push(node.pid)
-        const pcodes_str = node.pcodes
-        const pcodes_ori_list = pcodes_str.split(',')
-        const pcodes_list = [] // 存父级pcodes
-        for (const item of pcodes_ori_list) {
-          if (item.length !== 0) {
-            pcodes_list.push(item.substring(1, item.length - 1))
-          }
-        }
-        // 根据code找id,将id放入选中列表
-        for (const item of this.resourcePlainList) {
-          if (pcodes_list.includes(item.code)) {
-            treeState.checkedKeys.push(item.id)
-          }
-        }
-      }
-      // else if (node.pid !== '0' && !checked) {
-      //   const index = treeState.checkedKeys.findIndex(v => v === node.pid)
-      //   if (index !== -1) {
-      //     treeState.checkedKeys.splice(index, 1)
-      //   }
-      // }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-    },
-    // 检查子节点状态，状态若有变更更新
-    checkChildState(node, checked, treeState) {
-      // 如果选中
-      if (checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index === -1) {
-          treeState.checkedKeys.push(node.id)
-        }
-      } else { // 如果没有选中
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-
-      if (node.children && node.children.length > 0) {
-        node.children.forEach((item) => {
-          this.checkChildState(item, checked, treeState)
-        })
-      }
-    },
-    // 检查父节点状态，状态若有变更则更新
-    checkParentState(pid, checked, treeState) {
-      if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index === -1) {
-          treeState.checkedKeys.push(pid)
-        }
-      } else if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
     }
-
   }
 }
 </script>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index 2ce6456..c567717 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="roleName">
-          <el-input v-model.trim="listQuery.keyword" placeholder="角色名称" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/role/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="角色名称" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/role/add')" class="filter-item" size="small" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="250">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-          <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
-          <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="250">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+            <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
+            <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-role v-show="editShow" ref="editrole" @watchChild="fetchData"/>
     <!--功能权限-->
@@ -29,7 +29,7 @@
     <!--数据权限-->
     <data-perm v-show="dataShow" ref="dataperm" />
 
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -38,12 +38,18 @@
 import editRole from '@/views/system/role/editrole'
 import functionPerm from '@/views/system/role/functionPerm'
 import dataPerm from '@/views/system/role/dataPerm'
-import { getRoleList, delRole } from '@/api/role'
+import { getRoleList, delRole } from '@/api/system/role'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListRole',
   components: {
+    SearchItem,
+    SearchArea,
+    AppContainer,
     treeTable,
     functionPerm,
     dataPerm,
@@ -141,7 +147,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             // this.deleteItem(value.children, des)
diff --git a/src/views/system/user/editUser.vue b/src/views/system/user/editUser.vue
index 2fd735a..a9ba171 100644
--- a/src/views/system/user/editUser.vue
+++ b/src/views/system/user/editUser.vue
@@ -79,7 +79,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -89,9 +89,9 @@
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
 import DeptSelect from '@/components/DeptSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList } from '@/api/role'
-import { addUser, updateUser } from '@/api/user'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList } from '@/api/system/role'
+import { addUser, updateUser } from '@/api/system/user'
 import { RSAencrypt } from '../../../utils/security'
 
 export default {
@@ -186,7 +186,8 @@
           trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       roleName: '',
-      deptShow: true
+      deptShow: true,
+      btnLoading: false // 保存按钮的加载中状态
     }
   },
   computed: {
@@ -204,6 +205,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.ifdisabled = false
@@ -269,6 +271,7 @@
         const userForm = JSON.parse(JSON.stringify(this.userForm))
         userForm.password = RSAencrypt(userForm.password)
         if (valid) {
+          this.btnLoading = true
           addUser(userForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -276,6 +279,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -285,6 +289,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -293,12 +299,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateUser(this.userForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
index a3c25a9..44beb6b 100644
--- a/src/views/system/user/listUser.vue
+++ b/src/views/system/user/listUser.vue
@@ -43,11 +43,11 @@
               <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
             </el-row>
             <el-row>
-              <el-button v-if="hasPerm('/mgr/add')" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+              <el-button v-if="hasPerm('/mgr/add')" class="filter-item" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
               <el-button v-if="hasPerm('/mgr/update')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="edit">修改</el-button>
-              <el-button v-if="hasPerm('/mgr/delete')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="del">删除</el-button>
-              <el-button v-if="hasPerm('/mgr/reset')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="resetPwd">重置密码</el-button>
-              <el-button v-if="hasPerm('/mgr/roleAssign')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="roleAssign">角色分配</el-button>
+              <el-button v-if="hasPerm('/mgr/delete')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-delete" @click="del">删除</el-button>
+              <el-button v-if="hasPerm('/mgr/reset')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-key" @click="resetPwd">重置密码</el-button>
+              <el-button v-if="hasPerm('/mgr/roleAssign')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-magic-stick" @click="roleAssign">角色分配</el-button>
               <!--<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">冻结</el-button>-->
               <!--<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">解冻</el-button>-->
             </el-row>
@@ -74,7 +74,7 @@
               <el-tag :type="tagNames[scope.row.statusName]" size="medium">{{ scope.row.statusName }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column v-if="hasPerm('/mgr/freeze')" label="操作" width="60">
+          <el-table-column v-if="hasPerm('/mgr/freeze')" label="操作" align="center" width="60">
             <template slot-scope="scope">
               <el-button v-if="hasPerm('/mgr/freeze')" :type="btnStatus[scope.row.statusName]" size="mini" @click="freeze(scope.row)">{{ btnNames[scope.row.statusName] }}</el-button>
             </template>
@@ -105,8 +105,8 @@
 import { RSAencrypt } from '@/utils/security'
 import editUser from '@/views/system/user/editUser'
 import roleAssign from '@/views/system/user/roleAssign'
-import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd } from '@/api/user'
-import { getDeptTreeList } from '@/api/dept'
+import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd } from '@/api/system/user'
+import { getDeptTreeList } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -130,7 +130,7 @@
       },
       registerTime: [], // 注册时间范围
       tagNames: {
-        '已冻结': 'warning',
+        '已冻结': 'danger',
         '启用': 'success'
       },
       btnNames: {
@@ -138,8 +138,8 @@
         '启用': '冻结'
       },
       btnStatus: {
-        '已冻结': 'success',
-        '正常': 'danger'
+        '已冻结': '',
+        '启用': 'primary'
       },
       columns: [
         {
@@ -323,11 +323,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取用户数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getUserList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = response.data.total
@@ -340,7 +343,6 @@
       this.treeLoading = true
       getDeptTreeList(this.listQuery).then(response => {
         this.deptTree = toTreeList(response.data.list, '0', true)
-        console.log(this.deptTree)
         this.treeLoading = false
       })
     },
@@ -364,7 +366,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
index 9d22fe6..88f5445 100644
--- a/src/views/system/role/dataPerm.vue
+++ b/src/views/system/role/dataPerm.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getDeptTreeByRole } from '@/api/dept'
-import { dataAuthor } from '@/api/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { dataAuthor } from '@/api/system/role'
 
 export default {
   name: 'DataPerm',
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
index d161417..cc1add3 100644
--- a/src/views/system/role/editRole.vue
+++ b/src/views/system/role/editRole.vue
@@ -31,10 +31,22 @@
             <dept-select v-model="roleForm.deptid" placeholder="请选择组织机构" />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="数据权限" prop="dataScopeType">
+            <el-select v-model="roleForm.dataScopeType" placeholder="请选择">
+              <el-option
+                v-for="item in dataScopeTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+            <!--<el-input v-model="resourceForm.resourceType" type="text" placeholder="必填"/>-->
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -44,8 +56,8 @@
 import { toTreeList } from '@/utils/structure'
 import DeptSelect from '@/components/DeptSelect'
 import SelectTree from '@/components/SelectTree/singleSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList, addRole, updateRole } from '@/api/role'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList, addRole, updateRole, getDataScopeTypeList } from '@/api/system/role'
 
 export default {
   name: 'EditRole',
@@ -54,6 +66,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       roleForm: {
         id: '', // 编号
         pid: '', // 父级编号
@@ -61,7 +74,8 @@
         tips: '', // 别名，
         deptid: '', // 组织机构编号
         version: '', // 保留字段
-        num: 99 // 排序
+        num: 99, // 排序
+        dataScopeType: '' // 数据权限类型
       }, // 表单
       deptProps: {
         parent: 'pid',
@@ -77,6 +91,7 @@
       },
       deptTreeList: [], // 组织树列表数据
       roleTreeList: [], // 角色树列表数据
+      dataScopeTypeList: [], // 数据权限类型列表
       textMap: {
         update: '编辑',
         create: '新增'
@@ -97,14 +112,16 @@
       return tree
     }
   },
-  mounted: function() {
+  created: function() {
     this.fetchRoleTree()
+    this.fetchDataScopeType()
   },
   methods: {
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -124,29 +141,17 @@
       }
     },
     // 加载组织机构树形下拉菜单
-    // fetchDeptTree: function() {
-    //   getDeptTreeList().then(response => {
-    //     if (response.data.list) {
-    //       if (response.data.list.length > 1) {
-    //         debugger
-    //         if (judgeTree(response.data.list)) {
-    //           this.deptTreeList = toTreeList(response.data.list)
-    //           this.showDeptTree = 1
-    //         } else {
-    //           this.deptTreeList = response.data.list
-    //           this.showDeptTree = 2
-    //         }
-    //         console.log(this.deptTreeList)
-    //       } else {
-    //         this.showDeptTree = 0
-    //       }
-    //     }
-    //   })
-    // },
+    fetchDataScopeType: function() {
+      getDataScopeTypeList().then(response => {
+        if (response.data) {
+          this.dataScopeTypeList = response.data
+          console.log(this.resourceTreeList)
+        }
+      })
+    },
     // 加载角色树形下拉菜单
     fetchRoleTree: function() {
       getRoleTreeList(this.listQuery).then(response => {
-        console.log('fetchRoleTree:')
         console.log(response.data)
         if (response.data.list) {
           this.roleTreeList = toTreeList(response.data.list, '0')
@@ -180,6 +185,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.roleForm)
         if (valid) {
+          this.btnLoading = true
           addRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -187,6 +193,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -197,6 +204,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -205,12 +214,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
index 75fc261..4fba274 100644
--- a/src/views/system/role/functionPerm.vue
+++ b/src/views/system/role/functionPerm.vue
@@ -10,9 +10,7 @@
         :default-checked-keys="defaultChecked"
         check-strictly
         show-checkbox
-        node-key="id"
-        @check="changeSelect"
-      />
+        node-key="id"/>
     </el-scrollbar>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="saveData">保存</el-button>
@@ -23,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getResourceListByRole } from '@/api/resource'
-import { funcAuthor } from '@/api/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { funcAuthor } from '@/api/system/role'
 
 export default {
   name: 'FunctionPerm',
@@ -37,7 +35,6 @@
         label: 'name',
         children: 'children'
       },
-      resourcePlainList: [], // 资源列表平行数据
       resourceTreeList: [], // 资源树列表数据
       defaultExpanded: [], // 默认展开的项
       defaultChecked: [], // 默认选中的树
@@ -64,7 +61,6 @@
     fetchResourceTree: function() {
       getResourceListByRole(this.roleId).then(response => {
         if (response.data.list) {
-          this.resourcePlainList = response.data.list
           this.resourceTreeList = toTreeList(response.data.list)
           const temp = getShowItem(response.data.list) // 获取展开项和选中项
           this.defaultExpanded = temp[0]
@@ -84,76 +80,7 @@
           this.dialogFormVisible = false
         }
       })
-    },
-    // 选择变更，对应更新上下级
-    changeSelect(node, treeState) {
-      const checked = treeState.checkedKeys.findIndex(v => v === node.id) !== -1
-      // 若有子节点，将子节点都选中或不选中
-      this.checkChildState(node, checked, treeState)
-      // 如果有父节点，向上追溯找父节点
-      if (node.pid !== '0' && checked) {
-        // treeState.checkedKeys.push(node.pid)
-        const pcodes_str = node.pcodes
-        const pcodes_ori_list = pcodes_str.split(',')
-        const pcodes_list = [] // 存父级pcodes
-        for (const item of pcodes_ori_list) {
-          if (item.length !== 0) {
-            pcodes_list.push(item.substring(1, item.length - 1))
-          }
-        }
-        // 根据code找id,将id放入选中列表
-        for (const item of this.resourcePlainList) {
-          if (pcodes_list.includes(item.code)) {
-            treeState.checkedKeys.push(item.id)
-          }
-        }
-      }
-      // else if (node.pid !== '0' && !checked) {
-      //   const index = treeState.checkedKeys.findIndex(v => v === node.pid)
-      //   if (index !== -1) {
-      //     treeState.checkedKeys.splice(index, 1)
-      //   }
-      // }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-    },
-    // 检查子节点状态，状态若有变更更新
-    checkChildState(node, checked, treeState) {
-      // 如果选中
-      if (checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index === -1) {
-          treeState.checkedKeys.push(node.id)
-        }
-      } else { // 如果没有选中
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-
-      if (node.children && node.children.length > 0) {
-        node.children.forEach((item) => {
-          this.checkChildState(item, checked, treeState)
-        })
-      }
-    },
-    // 检查父节点状态，状态若有变更则更新
-    checkParentState(pid, checked, treeState) {
-      if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index === -1) {
-          treeState.checkedKeys.push(pid)
-        }
-      } else if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
     }
-
   }
 }
 </script>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index 2ce6456..c567717 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="roleName">
-          <el-input v-model.trim="listQuery.keyword" placeholder="角色名称" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/role/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="角色名称" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/role/add')" class="filter-item" size="small" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="250">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-          <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
-          <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="250">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+            <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
+            <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-role v-show="editShow" ref="editrole" @watchChild="fetchData"/>
     <!--功能权限-->
@@ -29,7 +29,7 @@
     <!--数据权限-->
     <data-perm v-show="dataShow" ref="dataperm" />
 
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -38,12 +38,18 @@
 import editRole from '@/views/system/role/editrole'
 import functionPerm from '@/views/system/role/functionPerm'
 import dataPerm from '@/views/system/role/dataPerm'
-import { getRoleList, delRole } from '@/api/role'
+import { getRoleList, delRole } from '@/api/system/role'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListRole',
   components: {
+    SearchItem,
+    SearchArea,
+    AppContainer,
     treeTable,
     functionPerm,
     dataPerm,
@@ -141,7 +147,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             // this.deleteItem(value.children, des)
diff --git a/src/views/system/user/editUser.vue b/src/views/system/user/editUser.vue
index 2fd735a..a9ba171 100644
--- a/src/views/system/user/editUser.vue
+++ b/src/views/system/user/editUser.vue
@@ -79,7 +79,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -89,9 +89,9 @@
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
 import DeptSelect from '@/components/DeptSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList } from '@/api/role'
-import { addUser, updateUser } from '@/api/user'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList } from '@/api/system/role'
+import { addUser, updateUser } from '@/api/system/user'
 import { RSAencrypt } from '../../../utils/security'
 
 export default {
@@ -186,7 +186,8 @@
           trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       roleName: '',
-      deptShow: true
+      deptShow: true,
+      btnLoading: false // 保存按钮的加载中状态
     }
   },
   computed: {
@@ -204,6 +205,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.ifdisabled = false
@@ -269,6 +271,7 @@
         const userForm = JSON.parse(JSON.stringify(this.userForm))
         userForm.password = RSAencrypt(userForm.password)
         if (valid) {
+          this.btnLoading = true
           addUser(userForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -276,6 +279,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -285,6 +289,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -293,12 +299,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateUser(this.userForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
index a3c25a9..44beb6b 100644
--- a/src/views/system/user/listUser.vue
+++ b/src/views/system/user/listUser.vue
@@ -43,11 +43,11 @@
               <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
             </el-row>
             <el-row>
-              <el-button v-if="hasPerm('/mgr/add')" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+              <el-button v-if="hasPerm('/mgr/add')" class="filter-item" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
               <el-button v-if="hasPerm('/mgr/update')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="edit">修改</el-button>
-              <el-button v-if="hasPerm('/mgr/delete')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="del">删除</el-button>
-              <el-button v-if="hasPerm('/mgr/reset')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="resetPwd">重置密码</el-button>
-              <el-button v-if="hasPerm('/mgr/roleAssign')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="roleAssign">角色分配</el-button>
+              <el-button v-if="hasPerm('/mgr/delete')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-delete" @click="del">删除</el-button>
+              <el-button v-if="hasPerm('/mgr/reset')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-key" @click="resetPwd">重置密码</el-button>
+              <el-button v-if="hasPerm('/mgr/roleAssign')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-magic-stick" @click="roleAssign">角色分配</el-button>
               <!--<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">冻结</el-button>-->
               <!--<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">解冻</el-button>-->
             </el-row>
@@ -74,7 +74,7 @@
               <el-tag :type="tagNames[scope.row.statusName]" size="medium">{{ scope.row.statusName }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column v-if="hasPerm('/mgr/freeze')" label="操作" width="60">
+          <el-table-column v-if="hasPerm('/mgr/freeze')" label="操作" align="center" width="60">
             <template slot-scope="scope">
               <el-button v-if="hasPerm('/mgr/freeze')" :type="btnStatus[scope.row.statusName]" size="mini" @click="freeze(scope.row)">{{ btnNames[scope.row.statusName] }}</el-button>
             </template>
@@ -105,8 +105,8 @@
 import { RSAencrypt } from '@/utils/security'
 import editUser from '@/views/system/user/editUser'
 import roleAssign from '@/views/system/user/roleAssign'
-import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd } from '@/api/user'
-import { getDeptTreeList } from '@/api/dept'
+import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd } from '@/api/system/user'
+import { getDeptTreeList } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -130,7 +130,7 @@
       },
       registerTime: [], // 注册时间范围
       tagNames: {
-        '已冻结': 'warning',
+        '已冻结': 'danger',
         '启用': 'success'
       },
       btnNames: {
@@ -138,8 +138,8 @@
         '启用': '冻结'
       },
       btnStatus: {
-        '已冻结': 'success',
-        '正常': 'danger'
+        '已冻结': '',
+        '启用': 'primary'
       },
       columns: [
         {
@@ -323,11 +323,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取用户数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getUserList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = response.data.total
@@ -340,7 +343,6 @@
       this.treeLoading = true
       getDeptTreeList(this.listQuery).then(response => {
         this.deptTree = toTreeList(response.data.list, '0', true)
-        console.log(this.deptTree)
         this.treeLoading = false
       })
     },
@@ -364,7 +366,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/user/resetPwd.vue b/src/views/system/user/resetPwd.vue
index 8d18ff3..5afa427 100644
--- a/src/views/system/user/resetPwd.vue
+++ b/src/views/system/user/resetPwd.vue
@@ -20,7 +20,7 @@
 
 <script>
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { changePwd } from '../../../api/user'
+import { changePwd } from '../../../api/system/user'
 import { RSAencrypt } from '../../../utils/security'
 
 export default {
@@ -51,12 +51,12 @@
         } else {
           callback(new Error('必须由数字、字母、字符中至少两种组成'))
         }
+
         callback()
       }
     }
-    const validateRepass = (rule, value, callback) => {
+    const validatePass2 = (rule, value, callback) => {
       console.log('验证重复密码')
-      debugger
       if (value === '') {
         callback(new Error('重复密码不能为空'))
       } else if (value !== this.userForm.password) {
@@ -75,8 +75,8 @@
       }, // 表单
       rules: {
         oldpassword: [{ required: true, validator: validateOldPass, trigger: ['blur', 'change'] }],
-        password: [{ required: true, validator: validatePass, trigger: ['blur'] }],
-        repassword: [{ required: true, validator: validateRepass, trigger: ['blur'] }]
+        password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
+        repassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }]
       } // 前端校验规则
     }
   },

diff --git a/src/api/area.js b/src/api/area.js
deleted file mode 100644
index 1207d91..0000000
--- a/src/api/area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 区域接口
- */
-import request from '@/utils/request'
-// 区域查询
-export function getAreaList(params) {
-  return request({
-    url: 'area/listPage',
-    method: 'get',
-    params
-  })
-}
-// 区域查询,非分页，加载树用
-export function getAreaTree(params) {
-  return request({
-    url: 'area/list',
-    method: 'get',
-    params
-  })
-}
-// 区域类型查询
-export function getAreaType() {
-  return request({
-    url: 'dict/code/levelType',
-    method: 'get'
-  })
-}
-
-// 添加区域
-export function addArea(params) {
-  return request({
-    url: 'area/add',
-    method: 'post',
-    params
-  })
-}
-// 修改区域机构
-export function updateArea(params) {
-  return request({
-    url: 'area/update',
-    method: 'post',
-    params
-  })
-}
-// 删除区域机构
-export function delArea(id) {
-  return request({
-    url: 'area/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dept.js b/src/api/dept.js
deleted file mode 100644
index ae3dd22..0000000
--- a/src/api/dept.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 组织机构接口
- */
-import request from '@/utils/request'
-// 组织查询
-export function getDeptList(params) {
-  return request({
-    url: 'dept/list',
-    method: 'get',
-    params
-  })
-}
-// 组织机构树列表
-export function getDeptTreeList(params) {
-  return request({
-    url: 'dept/tree',
-    method: 'get',
-    params
-  })
-}
-
-// 组织机构树列表
-export function getDeptTreeListByPid(pid) {
-  return request({
-    url: 'dept/listByPid',
-    method: 'get',
-    data: {
-      pid: pid
-    }
-  })
-}
-// 根据角色获取组织机构树列表
-export function getDeptTreeByRole(roleId) {
-  return request({
-    url: 'role/treeByRoleId',
-    method: 'get',
-    params: {
-      roleId
-    }
-  })
-}
-
-// 添加组织机构
-export function addDept(params) {
-  return request({
-    url: 'dept/add',
-    method: 'post',
-    params
-  })
-}
-// 修改组织机构
-export function updateDept(params) {
-  return request({
-    url: 'dept/update',
-    method: 'post',
-    params
-  })
-}
-// 删除组织机构
-export function delDept(id) {
-  return request({
-    url: 'dept/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/dict.js b/src/api/dict.js
deleted file mode 100644
index 3415b6d..0000000
--- a/src/api/dict.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 字典接口
- */
-import request from '@/utils/request'
-// 字典查询
-export function getDictList(params) {
-  return request({
-    url: 'dict/listPage',
-    method: 'get',
-    params
-  })
-}
-
-// 添加字典
-export function addDict(params) {
-  return request({
-    url: 'dict/add',
-    method: 'post',
-    params
-  })
-}
-// 修改字典机构
-export function updateDict(params) {
-  return request({
-    url: 'dict/update',
-    method: 'post',
-    params
-  })
-}
-// 删除字典机构
-export function delDict(id) {
-  return request({
-    url: 'dict/delete',
-    method: 'post',
-    params: {
-      dictId: id
-    }
-  })
-}
diff --git a/src/api/log.js b/src/api/log.js
deleted file mode 100644
index 1dbb3a3..0000000
--- a/src/api/log.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 日志管理接口
- */
-import request from '@/utils/request'
-// 日志查询
-export function getLogList(params) {
-  return request({
-    url: 'log/list',
-    method: 'post',
-    params
-  })
-}
-// 日志查询
-export function getLogDetail(id) {
-  return request({
-    url: 'log/detail/' + id,
-    method: 'get'
-  })
-}
-// 日志类型查询
-export function getLogType() {
-  return request({
-    url: 'dict/code/logType',
-    method: 'get'
-  })
-}
-
-// 删除日志
-export function delLog() {
-  return request({
-    url: 'log/delLog',
-    method: 'post'
-  })
-}
-
-// 登录日志查询
-export function getLoginLogList(params) {
-  return request({
-    url: 'loginLog/list',
-    method: 'get',
-    params
-  })
-}
-// 删除日志
-export function delLoginLog() {
-  return request({
-    url: 'loginLog/delLoginLog',
-    method: 'post'
-  })
-}
diff --git a/src/api/resource.js b/src/api/resource.js
deleted file mode 100644
index bd57641..0000000
--- a/src/api/resource.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * 资源管理接口
- */
-import request from '@/utils/request'
-// 资源查询
-export function getResourceList(params) {
-  return request({
-    url: 'resource/list',
-    method: 'get',
-    params
-  })
-}
-// 资源查询
-export function getResourceListByRole(roleId) {
-  return request({
-    url: 'resource/treeListByRoleId',
-    method: 'get',
-    params: {
-      roleId: roleId
-    }
-  })
-}
-// 资源树列表
-export function getResourceTreeList() {
-  return request({
-    url: 'resource/tree',
-    method: 'get'
-  })
-}
-
-// 资源类型列表
-export function getResourceTypeList() {
-  return request({
-    url: 'dict/code/resourceType',
-    method: 'get'
-  })
-}
-
-// 添加资源
-export function addResource(params) {
-  return request({
-    url: 'resource/add',
-    method: 'post',
-    params
-  })
-}
-// 修改资源
-export function updateResource(params) {
-  return request({
-    url: 'resource/update',
-    method: 'post',
-    params
-  })
-}
-// 删除资源
-export function delResource(id) {
-  return request({
-    url: 'resource/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
diff --git a/src/api/role.js b/src/api/role.js
deleted file mode 100644
index 573f948..0000000
--- a/src/api/role.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import qs from 'qs'
-/**
- * 角色管理接口
- */
-import request from '@/utils/request'
-// 角色查询
-export function getRoleList(params) {
-  return request({
-    url: 'role/list',
-    method: 'get',
-    params
-  })
-}
-// 角色机构树列表
-export function getRoleTreeList() {
-  return request({
-    url: 'role/tree',
-    method: 'get'
-  })
-}
-// 根据用户获取角色机构树列表
-export function getRoleTreeListByUser(userId) {
-  return request({
-    url: 'role/treeByUserId',
-    method: 'get',
-    params: {
-      userId: userId
-    }
-  })
-}
-
-// 添加角色机构
-export function addRole(params) {
-  return request({
-    url: 'role/add',
-    method: 'post',
-    params
-  })
-}
-// 修改角色机构
-export function updateRole(params) {
-  return request({
-    url: 'role/update',
-    method: 'post',
-    params
-  })
-}
-// 删除角色机构
-export function delRole(id) {
-  return request({
-    url: 'role/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 功能授权, 改为body
-export function funcAuthor(roleId, ids) {
-  return request({
-    url: 'role/funcAuthorJson',
-    method: 'post',
-    data: {
-      roleId: roleId,
-      ids: ids
-    }
-  })
-}
-// 数据授权
-export function dataAuthor(roleId, ids) {
-  return request({
-    url: 'role/dataAuthor',
-    method: 'post',
-    params: {
-      roleId: roleId,
-      ids: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
diff --git a/src/api/system/area.js b/src/api/system/area.js
new file mode 100644
index 0000000..ee118ec
--- /dev/null
+++ b/src/api/system/area.js
@@ -0,0 +1,76 @@
+/**
+ * 区域管理接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaListPage(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部门找其默认区域
+export function getAreaByDept(deptid) {
+  return request({
+    url: 'config/getAreaByDept',
+    method: 'get',
+    params: {
+      deptId: deptid
+    }
+  })
+}
+// 区域查询
+export function getAreaList(pid) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params: {
+      pid: pid
+    }
+  })
+}
+
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..ae3dd22
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+/**
+ * 组织机构接口
+ */
+import request from '@/utils/request'
+// 组织查询
+export function getDeptList(params) {
+  return request({
+    url: 'dept/list',
+    method: 'get',
+    params
+  })
+}
+// 组织机构树列表
+export function getDeptTreeList(params) {
+  return request({
+    url: 'dept/tree',
+    method: 'get',
+    params
+  })
+}
+
+// 组织机构树列表
+export function getDeptTreeListByPid(pid) {
+  return request({
+    url: 'dept/listByPid',
+    method: 'get',
+    data: {
+      pid: pid
+    }
+  })
+}
+// 根据角色获取组织机构树列表
+export function getDeptTreeByRole(roleId) {
+  return request({
+    url: 'role/treeByRoleId',
+    method: 'get',
+    params: {
+      roleId
+    }
+  })
+}
+
+// 添加组织机构
+export function addDept(params) {
+  return request({
+    url: 'dept/add',
+    method: 'post',
+    params
+  })
+}
+// 修改组织机构
+export function updateDept(params) {
+  return request({
+    url: 'dept/update',
+    method: 'post',
+    params
+  })
+}
+// 删除组织机构
+export function delDept(id) {
+  return request({
+    url: 'dept/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/dict.js b/src/api/system/dict.js
new file mode 100644
index 0000000..3415b6d
--- /dev/null
+++ b/src/api/system/dict.js
@@ -0,0 +1,39 @@
+/**
+ * 字典接口
+ */
+import request from '@/utils/request'
+// 字典查询
+export function getDictList(params) {
+  return request({
+    url: 'dict/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加字典
+export function addDict(params) {
+  return request({
+    url: 'dict/add',
+    method: 'post',
+    params
+  })
+}
+// 修改字典机构
+export function updateDict(params) {
+  return request({
+    url: 'dict/update',
+    method: 'post',
+    params
+  })
+}
+// 删除字典机构
+export function delDict(id) {
+  return request({
+    url: 'dict/delete',
+    method: 'post',
+    params: {
+      dictId: id
+    }
+  })
+}
diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 0000000..1dbb3a3
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,50 @@
+/**
+ * 日志管理接口
+ */
+import request from '@/utils/request'
+// 日志查询
+export function getLogList(params) {
+  return request({
+    url: 'log/list',
+    method: 'post',
+    params
+  })
+}
+// 日志查询
+export function getLogDetail(id) {
+  return request({
+    url: 'log/detail/' + id,
+    method: 'get'
+  })
+}
+// 日志类型查询
+export function getLogType() {
+  return request({
+    url: 'dict/code/logType',
+    method: 'get'
+  })
+}
+
+// 删除日志
+export function delLog() {
+  return request({
+    url: 'log/delLog',
+    method: 'post'
+  })
+}
+
+// 登录日志查询
+export function getLoginLogList(params) {
+  return request({
+    url: 'loginLog/list',
+    method: 'get',
+    params
+  })
+}
+// 删除日志
+export function delLoginLog() {
+  return request({
+    url: 'loginLog/delLoginLog',
+    method: 'post'
+  })
+}
diff --git a/src/api/system/resource.js b/src/api/system/resource.js
new file mode 100644
index 0000000..bd57641
--- /dev/null
+++ b/src/api/system/resource.js
@@ -0,0 +1,64 @@
+/**
+ * 资源管理接口
+ */
+import request from '@/utils/request'
+// 资源查询
+export function getResourceList(params) {
+  return request({
+    url: 'resource/list',
+    method: 'get',
+    params
+  })
+}
+// 资源查询
+export function getResourceListByRole(roleId) {
+  return request({
+    url: 'resource/treeListByRoleId',
+    method: 'get',
+    params: {
+      roleId: roleId
+    }
+  })
+}
+// 资源树列表
+export function getResourceTreeList() {
+  return request({
+    url: 'resource/tree',
+    method: 'get'
+  })
+}
+
+// 资源类型列表
+export function getResourceTypeList() {
+  return request({
+    url: 'dict/code/resourceType',
+    method: 'get'
+  })
+}
+
+// 添加资源
+export function addResource(params) {
+  return request({
+    url: 'resource/add',
+    method: 'post',
+    params
+  })
+}
+// 修改资源
+export function updateResource(params) {
+  return request({
+    url: 'resource/update',
+    method: 'post',
+    params
+  })
+}
+// 删除资源
+export function delResource(id) {
+  return request({
+    url: 'resource/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..99ff16e
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,91 @@
+import qs from 'qs'
+/**
+ * 角色管理接口
+ */
+import request from '@/utils/request'
+// 角色查询
+export function getRoleList(params) {
+  return request({
+    url: 'role/list',
+    method: 'get',
+    params
+  })
+}
+// 角色机构树列表
+export function getRoleTreeList() {
+  return request({
+    url: 'role/tree',
+    method: 'get'
+  })
+}
+// 根据用户获取角色机构树列表
+export function getRoleTreeListByUser(userId) {
+  return request({
+    url: 'role/treeByUserId',
+    method: 'get',
+    params: {
+      userId: userId
+    }
+  })
+}
+
+// 添加角色机构
+export function addRole(params) {
+  return request({
+    url: 'role/add',
+    method: 'post',
+    params
+  })
+}
+// 修改角色机构
+export function updateRole(params) {
+  return request({
+    url: 'role/update',
+    method: 'post',
+    params
+  })
+}
+// 删除角色机构
+export function delRole(id) {
+  return request({
+    url: 'role/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 功能授权, 改为body
+export function funcAuthor(roleId, ids) {
+  return request({
+    url: 'role/funcAuthorJson',
+    method: 'post',
+    data: {
+      roleId: roleId,
+      ids: ids
+    }
+  })
+}
+// 数据授权
+export function dataAuthor(roleId, ids) {
+  return request({
+    url: 'role/dataAuthor',
+    method: 'post',
+    params: {
+      roleId: roleId,
+      ids: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
+
+// 角色类型列表
+export function getDataScopeTypeList() {
+  return request({
+    url: 'dict/code/dataScopeType',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..02a38d0
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,95 @@
+/**
+ * 用户管理接口
+ */
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 用户查询
+export function getUserList(params) {
+  return request({
+    url: 'mgr/list',
+    method: 'post',
+    params
+  })
+}
+
+// 添加用户
+export function addUser(params) {
+  return request({
+    url: 'mgr/add',
+    method: 'post',
+    params
+  })
+}
+// 修改用户
+export function updateUser(params) {
+  return request({
+    url: 'mgr/update',
+    method: 'post',
+    params
+  })
+}
+// 删除用户
+export function delUser(id) {
+  return request({
+    url: 'mgr/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 冻结用户
+export function freezeUser(id) {
+  return request({
+    url: 'mgr/freeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+// 冻结用户
+export function unfreezeUser(id) {
+  return request({
+    url: 'mgr/unfreeze',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+// 重置用户密码
+export function resetPwd(params) {
+  return request({
+    url: 'mgr/reset',
+    method: 'post',
+    params
+  })
+}
+
+// 修改密码
+export function changePwd(params) {
+  return request({
+    url: 'mgr/changePwd',
+    method: 'post',
+    params
+  })
+}
+
+// 分配角色
+export function roleAssign(userId, ids) {
+  return request({
+    url: 'mgr/roleAssign',
+    method: 'post',
+    params: {
+      userId: userId,
+      roleIds: ids
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { indices: false })
+    }
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
deleted file mode 100644
index 3b67ef5..0000000
--- a/src/api/user.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 用户管理接口
- */
-import request from '@/utils/request'
-import qs from 'qs'
-
-// 用户查询
-export function getUserList(params) {
-  return request({
-    url: 'mgr/list',
-    method: 'post',
-    params
-  })
-}
-
-// 添加用户
-export function addUser(params) {
-  return request({
-    url: 'mgr/add',
-    method: 'post',
-    params
-  })
-}
-// 修改用户
-export function updateUser(params) {
-  return request({
-    url: 'mgr/update',
-    method: 'post',
-    params
-  })
-}
-// 删除用户
-export function delUser(id) {
-  return request({
-    url: 'mgr/delete',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 冻结用户
-export function freezeUser(id) {
-  return request({
-    url: 'mgr/freeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-// 冻结用户
-export function unfreezeUser(id) {
-  return request({
-    url: 'mgr/unfreeze',
-    method: 'post',
-    params: {
-      id: id
-    }
-  })
-}
-
-// 重置用户密码
-export function resetPwd(params) {
-  return request({
-    url: 'mgr/reset',
-    method: 'post',
-    params
-  })
-}
-
-// 修改密码
-export function changePwd(params) {
-  return request({
-    url: 'mgr/changePwd',
-    method: 'post',
-    params
-  })
-}
-
-// 分配角色
-export function roleAssign(userId, ids) {
-  return request({
-    url: 'mgr/roleAssign',
-    method: 'post',
-    params: {
-      userId: userId,
-      roleIds: ids
-    },
-    paramsSerializer: params => {
-      return qs.stringify(params, { indices: false })
-    }
-  })
-}
-
-// 在线用户查询
-export function getUserOnLine(params) {
-  return request({
-    url: '/userDevice/userDeviceOnLine',
-    method: 'get',
-    params
-  })
-}
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 7907f3c..6147dd7 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -14,7 +14,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/dept'
+import { getDeptTreeList } from '@/api/system/dept'
 export default {
   name: 'DeptSelect',
   components: {
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
new file mode 100644
index 0000000..aad20c6
--- /dev/null
+++ b/src/components/NormalTable/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-container">
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            <i v-else class="el-icon-menu"/>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <!--工具栏-->
+      <el-row class="tool" type="flex" justify="right">
+        <el-col>
+          <el-button-group style="float: right">
+            <!--显示列筛选工具-->
+            <el-popover
+              v-if="toolsOption.selectColumns"
+              v-model="visible"
+              placement="bottom-end"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
+            </el-popover>
+            <!--刷新按钮-->
+            <el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!-- 表格正文-->
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--需要加在表最前方的插槽-->
+        <slot name="preColumns"/>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    }, // 查询条件，此处主要需要分页的条件
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头，一般需要再此行中加按钮需要设置为true
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    }, // 数据总数
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true // 是否需要序号列
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }, // 表格大小，默认，small,mini等，与el-table条件仙童
+    toolsOption: {
+      type: Object,
+      default: function() {
+        return {
+          selectColumns: false, // 是否需要筛选列工具
+          refresh: false // 是否需要刷新按钮
+        }
+      }
+    }// 表格工具配置
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列情况
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 刷新
+    refresh() {
+      this.$emit('change')
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    /*background-color:rgba(243, 243, 243, 1);*/
+    background-color:#fff;
+    .title-header{
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..e911521
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    },
+    buttonTop: {
+      default: 250,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..1175911
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns"/>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    padding:12px;
+    padding-bottom: 2px; /* 本身输入框有10px下边距*/
+    background-color: #fff;
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..b3243ce
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{'padding':hasPadding?paddingSize:'0px','background-color':background}" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: false
+    },
+    paddingSize: {
+      type: String,
+      default: '0px'
+    },
+    background: {
+      type: String,
+      default: '#fff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..38c6f74
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <app-header class="app-header"/>
+    <el-main class="app-body">
+      <!--侧边栏-->
+      <sidebar class="sidebar-container"/>
+      <!--右半部分-->
+      <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <!--开启固定头部设置-->
+        <div v-if="fixedHeader">
+          <!--导航(面包屑)-->
+          <navbar/>
+          <!--标签栏-->
+          <tags-view v-if="needTagsView" />
+          <!--主内容包裹在el-scrollbar中-->
+          <el-scrollbar class="no-head-scrollbar">
+            <app-main/>
+          </el-scrollbar>
+        </div>
+        <!--为开始固定头部设置-->
+        <div v-else>
+          <!--导航，tagsView都包裹在el-scrollbar中-->
+          <el-scrollbar class="has-head-scrollbar">
+            <navbar/>
+            <tags-view v-if="needTagsView" />
+            <app-main/>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { AppHeader, Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import TagsView from './components/TagsView/index'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    TagsView,
+    AppHeader,
+    Navbar,
+    Sidebar,
+    AppMain,
+    RightPanel
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  /*.el-scrollbar{*/
+    /*height: calc(100vh - 50px);*/
+  /*}*/
+  .has-head-scrollbar{
+    height: 100vh;
+  }
+</style>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
new file mode 100644
index 0000000..dbc4dbd
--- /dev/null
+++ b/src/layout/components/AppHeader.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-header class="app-header">
+    <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown class="systemSelect" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown class="dropdown-container" trigger="click">
+      <div class="dropdown-wrapper">
+        <span style="line-height:50px;">欢迎您，{{ name }}</span>
+        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+        <i class="el-icon-arrow-down"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item>
+          <span style="display:block;" @click="backToIndex">回首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="resetPwd">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item divided>
+          <span style="display:block;" @click="logout">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
+  </el-header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/system/user/resetPwd'
+
+export default {
+  name: 'AppHeader',
+  components: { ResetPwd },
+  data() {
+    return {
+      title: this.baseConfig.title, // 标题
+      name: this.$store.getters.name, // 用户姓名
+      showSetPwd: false // 是否显示修改密码按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    currentSystem() {
+      return this.$store.getters.currentSystem
+    },
+    systems() {
+      return this.$store.getters.systems
+    }
+  },
+  created() {
+    this.getSystems()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    resetPwd() {
+      this.showSetPwd = true
+      this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      this.$router.push('/dashboard')
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        const params = '?token=' + this.$store.getters.token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params
+        } else {
+          window.open(command.url + params, '_blank')
+        }
+      } else {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', command)
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(command.url)
+        })
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  h3{
+    margin-left:24px;
+    display: inline-block;
+    float:left;
+  }
+  .dropdown-container {
+    /*height: 50px;*/
+    display: inline-block;
+    float: right;
+    z-index:500;
+    position: fixed;
+    top:0px;
+    right: 35px;
+    .dropdown-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        font-size: 12px;
+      }
+    }
+  }
+  .systemSelect{
+    height: 56px;
+    display: inline-block;
+    float: left;
+    z-index:500;
+    position: fixed;
+    margin-left:60px;
+    top:5px;
+    color:#fff;
+    line-height: 56px;
+  }
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..2ea268e
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
+      <!-- <router-view :key="key"></router-view> -->
+      <div>
+        <keep-alive>
+          <router-view v-if="$route.meta.keepAlive" :key="key"/>
+        </keep-alive>
+        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      if (this.$route.meta.keepAlive) {
+        return this.$route.name !== undefined ? this.$route.name : this.$route
+      } else {
+        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  /*min-height: calc(100vh - 50px);*/
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..24ea99b
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="navbar">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
+  .hamburger-container {
+    text-align: center;
+    height: 50px;
+    float: left;
+    padding: 0 12px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      line-height: initial;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..cf3023d
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">Page style setting</h3>
+
+      <div class="drawer-item">
+        <span>Theme Color</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Open Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Fixed Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>Sidebar Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  name: 'Settings',
+  components: { ThemePicker },
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..4ed6b5f
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..bff45cd
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot/>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..988d662
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </a>
+    </template>
+
+    <el-submenu v-else :index="item.name||item.path">
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+      </template>
+
+      <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          v-if="child.children&&child.children.length>0"
+          :is-nest="true"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu" />
+
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          <el-menu-item :index="resolvePath(child.path)">
+            <span class="light-line"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
+          </el-menu-item>
+        </a>
+      </template>
+    </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
+    },
+    clickLink(routePath, e) {
+      if (!this.isExternalLink(routePath)) {
+        e.preventDefault()
+        const path = this.resolvePath(routePath)
+        this.$router.push({ path, query: { t: +new Date() }})
+        // this.$router.push(path)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..2cf371d
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :show-timeout="200"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    permission_routers() {
+      let permission_routers = this.$store.getters.permission_routers
+      const currentSystem = this.$store.getters.currentSystem
+      permission_routers = permission_routers.filter(item => {
+        if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) {
+          return true
+        }
+      })
+      return permission_routers
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // 如果meta中上设置activeMenu，按照meta中设置高亮
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..0ec76e7
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..1091fc0
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
+      <li @click="closeOthersTags">关闭其他标签页</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+
+export default {
+  name: 'TagsView',
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return this.$store.state.permission.routers
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY - 40
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #d8dce5;
+    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 12px;
+        }
+        &:last-of-type {
+          margin-right: 15px;
+        }
+        &.active {
+          /*background-color: #42b983;*/
+          /*color: #fff;*/
+          /*border-color: #42b983;*/
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  //reset element css of el-icon-close
+  .tags-view-wrapper {
+    .tags-view-item {
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: 2px;
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+          vertical-align: -3px;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..52d35e3
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppHeader } from './AppHeader'
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..604fe3d
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 043a276..01e8427 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,15 @@
 import VCharts from 'v-charts'
 Vue.use(VCharts)
 
+// 注册全局自定义布局组件
+import NormalTable from '@/components/NomalTable/index'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import AppContainer from '@/components/layout/AppContainer'
+
+Vue.use(AppContainer)
+Vue.use(NormalTable)
+Vue.use(SearchArea)
+
 // 先加载配置文件后，new Vue
 /* eslint-disable no-new */
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index 646647f..52dc869 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '../layout/Layout'
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
diff --git a/src/router/modules/base.js b/src/router/modules/base.js
index 5812db4..c28e4b1 100644
--- a/src/router/modules/base.js
+++ b/src/router/modules/base.js
@@ -1,5 +1,5 @@
 
-import SupLayout from '../../views/layout/SupLayout'
+import Layout from '../../layout/Layout'
 export const baseRouters = [
   {
     path: '/base',
@@ -14,7 +14,7 @@
   },
   {
     path: '/baseSource',
-    component: SupLayout,
+    component: Layout,
     redirect: '/baseSourceMain',
     name: 'BaseSource',
     alwaysShow: true,
diff --git a/src/router/modules/comment.js b/src/router/modules/comment.js
index 31eb0df..4a6531b 100644
--- a/src/router/modules/comment.js
+++ b/src/router/modules/comment.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commenetRouters = [
   {
     path: '/comment',
diff --git a/src/router/modules/common.js b/src/router/modules/common.js
index 3e252fd..96fcc6d 100644
--- a/src/router/modules/common.js
+++ b/src/router/modules/common.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const commonRouters = [
   {
     path: '/common',
diff --git a/src/router/modules/coo.js b/src/router/modules/coo.js
index 14aa37e..5bd2ded 100644
--- a/src/router/modules/coo.js
+++ b/src/router/modules/coo.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const cooRouters = [
   {
     path: '/cooperate',
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
index c9727c8..6d0f9c8 100644
--- a/src/router/modules/suphandle.js
+++ b/src/router/modules/suphandle.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const suphandleRouters = [
   {
     path: '/suphandle',
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index c80b732..2f77b38 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import Layout from '../../layout/Layout'
 export const systemRouters = [
   {
     path: '/sys',
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..b568ce0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,33 @@
+module.exports = {
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示设置按钮
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否显示tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否固定面包屑和tagsViews头
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description 是否要显示侧边栏logo
+   */
+  sidebarLogo: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..7747f6a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    settings
   },
   getters
 })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..bd06105
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,33 @@
+import variables from '@/styles/element-variables.scss'
+import defaultSettings from '@/settings'
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  theme: variables.theme, // 主题
+  showSettings: showSettings, // 是否显示设置按钮
+  tagsView: tagsView, // 是否显示tagsView
+  fixedHeader: fixedHeader, // 是否固定面包屑
+  sidebarLogo: sidebarLogo // 是否显示logo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..f11a88b
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #278df9;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+//$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+//
+//$--border-color-light: #dfe4ed;
+//$--border-color-lighter: #e6ebf5;
+//
+//$--table-border:1px solid#dfe6ec;
+//
+///* icon font path, required */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96a98ed..781865d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+@import './element-variables';
 @import './sidebar.scss';
 
 body {
@@ -57,6 +58,11 @@
   text-decoration: none;
 }
 
+// 去掉IE 的密码眼睛
+input::-ms-reveal {
+  display: none;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -71,23 +77,84 @@
 //main-container全局样式
 
 .app-container {
-  padding: 20px;
+  height:100%;
+  min-height: calc(100vh - 158px);
+  //border:10px solid #ebebeb;
 }
+
 .app-header{
-  background-color:$themeColor;
+  height:$headerHeight !important;
+  background-color:$headerColor;
   width: 100%;
   position:fixed;
+  //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  color:$headerText;
+  .dropdown-container{
+    height: $headerHeight;
+    .dropdown-wrapper{
+      color:$dropDownText;
+    }
+  }
 }
+.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb {
+  height:$breadcrumbHeight !important;
+  line-height: $breadcrumbHeight !important;
+}
+
+.tags-view-container {
+  .tags-view-wrapper {
+    .tags-view-item{
+      &.active {
+        background-color: $tagsViewActiveBg !important;
+        color: #fff !important;
+        border-color: $tagsViewActiveBg !important;
+      }
+    }
+  }
+}
+.no-head-scrollbar, has-head-scrollbar{
+  .el-scrollbar__wrap{
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #ebebeb;
+  }
+}
+.no-head-scrollbar{
+  height: calc(100vh - 138px);
+}
+
 .app-body{
   width: 100%;
   position:fixed;
-  margin-top:60px;
+  margin-top:$headerHeight;
 }
 .el-main{
-  height: calc(100vh - 50px);
+  padding:0px !important;
+  //height: calc(100vh - $headerHeight);
 }
 .imgBox img{
   max-height: 400px !important;
   max-width:700px !important;
   margin: 0px auto;
 }
+
+.table-container{
+  background-color: $tableTitleColor !important;
+  border-top: 12px solid #ebebeb !important;
+  .table-title{
+    background-color:#fff;
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: $tableTitleText;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+.el-table td{
+  padding: 4px 0px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..dfa0193 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     width: $sideBarWidth !important;
     height: 100%;
     position: fixed;
-    padding-top:60px;
+    margin-top:$headerHeight;
     font-size: 0px;
     top: 0;
     bottom: 0;
@@ -58,12 +58,14 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: $subMenuHoverText !important;
         background-color: $menuHover !important;
       }
     }
@@ -83,6 +85,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
+        color: $menuHoverText !important;
         background-color: $subMenuHover !important;
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a19cece..d8e287e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,35 +1,55 @@
+@import './element-variables';
+$themeColor:$--color-primary;
+// Header
+$headerColor:$themeColor;
+$headerText:#ffffff;
+$dropDownText: #fff;
+$headerHeight: 56px;
+// tagsView
+$breadcrumbHeight: 48px;
+$tagsViewHeight: 30px;
+$tagsViewActiveBg:#66b1ff;
 //sidebar
-$menuText:#bfcbd9;
-$themeColor: rgb(40, 51, 86);
-$menuText:#000000;
-$subMenuText:#000000;
-$menuActiveText: rgb(98, 193, 255);
-//$menuActiveText:#ffffff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#333333;
+$subMenuText:#333333;
+$menuActiveText:$themeColor;
+$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #2f3856;
-//$menuBg:#ffffff;
-$menuHover:#0c1f3c;
-//$menuHover:#6666cc;
+$menuBg:#f4f4f4;
+$menuHover:#f4f4f4;
+$menuHoverText:$themeColor;
 
-$subMenuBg:#2f3856;
-//$subMenuBg:#fcfcfc;
-$subMenuHover: #0c1f3c;
-//$subMenuHover:#6666cc;
+$subMenuBg:#f4f4f4;
+$subMenuHover:#f4f4f4;
+$subMenuHoverText:$themeColor;
+$sideBarWidth: 208px;
 
-$sideBarWidth: 180px;
+// table
+$tableTitleHeight:46px;
+$tableTitleColor:#fff;
+$tableTitleText:#606266;
 
 // the :export directive is the magic sauce for webpack
 :export {
   themeColor: $themeColor;
+  headerColor: headerColor;
+  headerText: headerText;
+  dropDownText:$dropDownText;
+  headerHeight:$headerHeight;
+  breadcrumbHeight:$breadcrumbHeight;
+  tagsViewHeight:$tagsViewHeight;
   menuText: $menuText;
   subMenuText: $subMenuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
+  menuHoverText:$menuHoverText;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  subMenuHoverText:$subMenuHoverText;
   sideBarWidth: $sideBarWidth;
+  tableTitleHeight:$tableTitleHeight;
+  tableTitleColor:$tableTitleColor;
+  tabelTitleText:$tableTitleText;
 }
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
index d0ba37f..c2b1355 100644
--- a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1e2dde6..5ec5ddf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
+  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
     <div class="title-div">
       <div>{{ title }}</div>
       <!--<div class="divider-line"/>-->
@@ -113,7 +113,7 @@
   $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
   $iconheight: 70%;
   $titleheight: 30%;
-  .app-container{
+  .dashboard-container{
     width: 100%;
     height:100%;
     /*position: relative;*/
@@ -127,7 +127,7 @@
       font-size: 40px;
       height: 120px;
       color: white;
-      margin-top: 20px;
+      padding-top: 20px;
       text-align: center;
       .divider-line{
         margin: 5px auto;
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index c524f36..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getAreaTree } from '@/api/area'
+import { getAreaTree } from '@/api/system/area'
 export default {
   name: 'AreaSelectTree',
   data() {
@@ -70,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index 8282db9..baadacc 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -45,7 +45,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
@@ -56,7 +56,7 @@
 
 <script>
 import { toTreeList } from '@/utils/structure'
-import { getAreaType, addArea, updateArea } from '@/api/area'
+import { getAreaType, addArea, updateArea } from '@/api/system/area'
 import AreaSelectTree from './areaSelectTree'
 
 export default {
@@ -82,6 +82,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
         areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
@@ -107,6 +108,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
         this.isEditMode = false
@@ -167,22 +169,26 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.areaForm)
         if (valid) {
+          this.btnLoading = true
           addArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
                 confirmButtonText: '是',
                 cancelButtonText: '否',
                 type: 'info'
-              }).then(() => {
+              }).then(() => { // 选是
                 this.resetForm()
+                this.btnLoading = false
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
                 })
-              }).catch(() => {
+              }).catch(() => { // 选否,关闭窗口，并刷新页面
                 this.$emit('watchChild')
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -191,6 +197,7 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateArea(this.areaForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
@@ -198,6 +205,8 @@
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 1d73f81..5d9f44d 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="keywords">
-            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-        </el-row>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" size="small" placeholder="区域名称/编号" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/area/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <div>
+    <div class="table-container">
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
@@ -45,16 +42,19 @@
 
     <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
 
-  </div>
+  </app-container>
 </template>
 
 <script>
-import { getAreaList, delArea } from '@/api/area'
+import { getAreaListPage, delArea } from '@/api/system/area'
 import EditArea from './editArea'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListArea',
-  components: { EditArea },
+  components: { SearchItem, SearchArea, AppContainer, EditArea },
   data() {
     return {
       listQuery: {
@@ -157,7 +157,7 @@
       if (!isNowPage) { // 是否显示当前页，否则跳转第一页
         this.listQuery.offset = 1
       }
-      getAreaList(this.listQuery).then(response => {
+      getAreaListPage(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
         this.listLoading = false
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
index 97a0f42..d7a2129 100644
--- a/src/views/system/dept/editDept.vue
+++ b/src/views/system/dept/editDept.vue
@@ -17,7 +17,7 @@
         <el-col :span="12">
           <el-form-item label="父组织" prop="pid">
             <!--<dept-select v-model="deptForm.pid" :dept-tree-list="deptTreeList" :dept-props="defaultProps" :multi-data="multiData" >-->
-            <dept-select v-model="deptForm.pid" placeholder="请选择父级" >
+            <dept-select v-model="deptForm.pid" :dept-show="true" placeholder="请选择父级" >
             <!--<select-tree v-model="deptForm.pid" :options="deptTreeList" :props="defaultProps" />-->
           </dept-select></el-form-item>
         </el-col>
@@ -48,7 +48,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -57,7 +57,7 @@
 <script>
 import { judgeTree, toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList, addDept, updateDept } from '@/api/dept'
+import { getDeptTreeList, addDept, updateDept } from '@/api/system/dept'
 import DeptSelect from '@/components/DeptSelect'
 
 export default {
@@ -94,6 +94,7 @@
           value: '04'
         }
       ],
+      btnLoading: false, // 保存按钮的加载中状态
       multiData: false, // 组织树是否为多级列表
       deptTreeList: [], // 组织树列表数据
       textMap: {
@@ -124,6 +125,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -189,6 +191,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.deptForm)
         if (valid) {
+          this.btnLoading = true
           addDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -196,6 +199,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -205,6 +209,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -213,12 +219,16 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
+          this.dialogFormVisible = true
           updateDept(this.deptForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index ca13348..da2419a 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -14,8 +14,8 @@
     <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="simplename" class="treetable" border stripe>
       <el-table-column v-if="showOperate" label="操作" width="110">
         <template slot-scope="scope">
-          <el-button v-if="hasPerm('/dept/update')" :disabled="scope.row.simplename=='顶级'" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/dept/delete')" :disabled="scope.row.simplename=='顶级'" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          <el-button v-if="hasPerm('/dept/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+          <el-button v-if="hasPerm('/dept/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </tree-table>
@@ -29,7 +29,7 @@
 
 import treeTable from '@/components/TreeTable'
 import editDept from '@/views/system/dept/editdept'
-import { getDeptList, delDept } from '@/api/dept'
+import { getDeptList, delDept } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -84,11 +84,9 @@
     },
     edit(row) {
       this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       console.log('row:' + row)
-      setTimeout(() => {
-        this.dialogFormVisible = true
-        this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
-      }, 100)
+      this.$refs.editdept.initDialog(this.dialogStatus, this.dialogFormVisible, row)
     },
     del(row) {
       this.$confirm(
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
index 2467947..bde4039 100644
--- a/src/views/system/dict/editDict.vue
+++ b/src/views/system/dict/editDict.vue
@@ -46,14 +46,14 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { addDict, updateDict } from '@/api/dict'
+import { addDict, updateDict } from '@/api/system/dict'
 
 export default {
   name: 'EditDict',
@@ -73,6 +73,7 @@
         update: '编辑',
         create: '新增'
       }, // 表头显示标题
+      btnLoading: false, // 保存按钮的加载中状态
       rules: {
         dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
         dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
@@ -87,6 +88,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       // this.fetchPcode()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -149,10 +151,8 @@
     // 保存数据
     saveData: function() {
       const flag = this.arrayToString()
-      debugger
       if (!flag) {
         this.$message.warning('请将字典值和名称都填全后再进行保存')
-        return
       } else {
         if (this.dialogStatus === 'update') {
           this.updateData()
@@ -176,6 +176,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.dictForm)
         if (valid) {
+          this.btnLoading = true
           addDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -183,6 +184,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -192,6 +194,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -200,12 +204,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateDict(this.dictForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index bcca9d1..fa9211b 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { getDictList, delDict } from '@/api/dict'
+import { getDictList, delDict } from '@/api/system/dict'
 import EditDict from './editDict'
 
 export default {
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index 353feff..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { getLogList, getLogDetail, getLogType, delLog } from '@/api/log'
+import { getLogList, getLogDetail, getLogType, delLog } from '@/api/system/log'
 export default {
   name: 'ListLog',
   data() {
@@ -150,12 +150,14 @@
     },
     // 查询数据
     search() {
-      this.listQuery.offset = 1
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index e9e5304..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { getLoginLogList, delLoginLog } from '@/api/log'
+import { getLoginLogList, delLoginLog } from '@/api/system/log'
 export default {
   name: 'LoginLog',
   data() {
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 75c2421..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -62,7 +62,7 @@
 <script>
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/resource'
+import { getResourceTreeList, getResourceTypeList, addResource, updateResource } from '@/api/system/resource'
 
 export default {
   name: 'EditResource',
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index d9b7bf8..20b5197 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="resourceName">
-          <el-input v-model.trim="listQuery.resourceName" placeholder="资源名称" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="resourceUrl">
-          <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/resource/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.resourceName" size="small" placeholder="菜单名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" size="small" placeholder="菜单路径" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/resource/add')" size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="110">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="110">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/resource/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/resource/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-resource v-show="dialogFormVisible" ref="editResource" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
 
 import treeTable from '@/components/TreeTable'
 import editResource from '@/views/system/resource/editResource'
-import { getResourceList, delResource } from '@/api/resource'
+import { getResourceList, delResource } from '@/api/system/resource'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListResource',
-  components: { treeTable, editResource },
+  components: { SearchItem, SearchArea, AppContainer, treeTable, editResource },
   data() {
     return {
       listQuery: {
@@ -51,11 +54,11 @@
           type: 'expand'
         },
         {
-          text: '资源编码',
+          text: '资源编号',
           value: 'code'
         },
         {
-          text: '父资源编码',
+          text: '资源父编号',
           value: 'pcode'
         },
         {
@@ -143,7 +146,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
index 9d22fe6..88f5445 100644
--- a/src/views/system/role/dataPerm.vue
+++ b/src/views/system/role/dataPerm.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getDeptTreeByRole } from '@/api/dept'
-import { dataAuthor } from '@/api/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { dataAuthor } from '@/api/system/role'
 
 export default {
   name: 'DataPerm',
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
index d161417..cc1add3 100644
--- a/src/views/system/role/editRole.vue
+++ b/src/views/system/role/editRole.vue
@@ -31,10 +31,22 @@
             <dept-select v-model="roleForm.deptid" placeholder="请选择组织机构" />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="数据权限" prop="dataScopeType">
+            <el-select v-model="roleForm.dataScopeType" placeholder="请选择">
+              <el-option
+                v-for="item in dataScopeTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+            <!--<el-input v-model="resourceForm.resourceType" type="text" placeholder="必填"/>-->
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -44,8 +56,8 @@
 import { toTreeList } from '@/utils/structure'
 import DeptSelect from '@/components/DeptSelect'
 import SelectTree from '@/components/SelectTree/singleSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList, addRole, updateRole } from '@/api/role'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList, addRole, updateRole, getDataScopeTypeList } from '@/api/system/role'
 
 export default {
   name: 'EditRole',
@@ -54,6 +66,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       roleForm: {
         id: '', // 编号
         pid: '', // 父级编号
@@ -61,7 +74,8 @@
         tips: '', // 别名，
         deptid: '', // 组织机构编号
         version: '', // 保留字段
-        num: 99 // 排序
+        num: 99, // 排序
+        dataScopeType: '' // 数据权限类型
       }, // 表单
       deptProps: {
         parent: 'pid',
@@ -77,6 +91,7 @@
       },
       deptTreeList: [], // 组织树列表数据
       roleTreeList: [], // 角色树列表数据
+      dataScopeTypeList: [], // 数据权限类型列表
       textMap: {
         update: '编辑',
         create: '新增'
@@ -97,14 +112,16 @@
       return tree
     }
   },
-  mounted: function() {
+  created: function() {
     this.fetchRoleTree()
+    this.fetchDataScopeType()
   },
   methods: {
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.resetForm()
@@ -124,29 +141,17 @@
       }
     },
     // 加载组织机构树形下拉菜单
-    // fetchDeptTree: function() {
-    //   getDeptTreeList().then(response => {
-    //     if (response.data.list) {
-    //       if (response.data.list.length > 1) {
-    //         debugger
-    //         if (judgeTree(response.data.list)) {
-    //           this.deptTreeList = toTreeList(response.data.list)
-    //           this.showDeptTree = 1
-    //         } else {
-    //           this.deptTreeList = response.data.list
-    //           this.showDeptTree = 2
-    //         }
-    //         console.log(this.deptTreeList)
-    //       } else {
-    //         this.showDeptTree = 0
-    //       }
-    //     }
-    //   })
-    // },
+    fetchDataScopeType: function() {
+      getDataScopeTypeList().then(response => {
+        if (response.data) {
+          this.dataScopeTypeList = response.data
+          console.log(this.resourceTreeList)
+        }
+      })
+    },
     // 加载角色树形下拉菜单
     fetchRoleTree: function() {
       getRoleTreeList(this.listQuery).then(response => {
-        console.log('fetchRoleTree:')
         console.log(response.data)
         if (response.data.list) {
           this.roleTreeList = toTreeList(response.data.list, '0')
@@ -180,6 +185,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.roleForm)
         if (valid) {
+          this.btnLoading = true
           addRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -187,6 +193,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -197,6 +204,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -205,12 +214,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateRole(this.roleForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
index 75fc261..4fba274 100644
--- a/src/views/system/role/functionPerm.vue
+++ b/src/views/system/role/functionPerm.vue
@@ -10,9 +10,7 @@
         :default-checked-keys="defaultChecked"
         check-strictly
         show-checkbox
-        node-key="id"
-        @check="changeSelect"
-      />
+        node-key="id"/>
     </el-scrollbar>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="saveData">保存</el-button>
@@ -23,8 +21,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getResourceListByRole } from '@/api/resource'
-import { funcAuthor } from '@/api/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { funcAuthor } from '@/api/system/role'
 
 export default {
   name: 'FunctionPerm',
@@ -37,7 +35,6 @@
         label: 'name',
         children: 'children'
       },
-      resourcePlainList: [], // 资源列表平行数据
       resourceTreeList: [], // 资源树列表数据
       defaultExpanded: [], // 默认展开的项
       defaultChecked: [], // 默认选中的树
@@ -64,7 +61,6 @@
     fetchResourceTree: function() {
       getResourceListByRole(this.roleId).then(response => {
         if (response.data.list) {
-          this.resourcePlainList = response.data.list
           this.resourceTreeList = toTreeList(response.data.list)
           const temp = getShowItem(response.data.list) // 获取展开项和选中项
           this.defaultExpanded = temp[0]
@@ -84,76 +80,7 @@
           this.dialogFormVisible = false
         }
       })
-    },
-    // 选择变更，对应更新上下级
-    changeSelect(node, treeState) {
-      const checked = treeState.checkedKeys.findIndex(v => v === node.id) !== -1
-      // 若有子节点，将子节点都选中或不选中
-      this.checkChildState(node, checked, treeState)
-      // 如果有父节点，向上追溯找父节点
-      if (node.pid !== '0' && checked) {
-        // treeState.checkedKeys.push(node.pid)
-        const pcodes_str = node.pcodes
-        const pcodes_ori_list = pcodes_str.split(',')
-        const pcodes_list = [] // 存父级pcodes
-        for (const item of pcodes_ori_list) {
-          if (item.length !== 0) {
-            pcodes_list.push(item.substring(1, item.length - 1))
-          }
-        }
-        // 根据code找id,将id放入选中列表
-        for (const item of this.resourcePlainList) {
-          if (pcodes_list.includes(item.code)) {
-            treeState.checkedKeys.push(item.id)
-          }
-        }
-      }
-      // else if (node.pid !== '0' && !checked) {
-      //   const index = treeState.checkedKeys.findIndex(v => v === node.pid)
-      //   if (index !== -1) {
-      //     treeState.checkedKeys.splice(index, 1)
-      //   }
-      // }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-    },
-    // 检查子节点状态，状态若有变更更新
-    checkChildState(node, checked, treeState) {
-      // 如果选中
-      if (checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index === -1) {
-          treeState.checkedKeys.push(node.id)
-        }
-      } else { // 如果没有选中
-        const index = treeState.checkedKeys.findIndex(v => v === node.id)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
-
-      if (node.children && node.children.length > 0) {
-        node.children.forEach((item) => {
-          this.checkChildState(item, checked, treeState)
-        })
-      }
-    },
-    // 检查父节点状态，状态若有变更则更新
-    checkParentState(pid, checked, treeState) {
-      if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index === -1) {
-          treeState.checkedKeys.push(pid)
-        }
-      } else if (pid !== '0' && checked) {
-        const index = treeState.checkedKeys.findIndex(v => v === pid)
-        if (index !== -1) {
-          treeState.checkedKeys.splice(index, 1)
-        }
-      }
-      this.$refs.tree.setCheckedKeys(treeState.checkedKeys)
     }
-
   }
 }
 </script>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index 2ce6456..c567717 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="roleName">
-          <el-input v-model.trim="listQuery.keyword" placeholder="角色名称" clearable/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button v-if="hasPerm('/role/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="角色名称" clearable/>
+      </search-item>
+      <template slot="btns">
+        <el-button v-if="hasPerm('/role/add')" class="filter-item" size="small" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+      </template>
+    </search-area>
     <!--查询结果Table显示-->
-    <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border stripe>
-      <el-table-column v-if="showOperate" label="操作" width="250">
-        <template slot-scope="scope">
-          <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-          <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
-          <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
-        </template>
-      </el-table-column>
-    </tree-table>
-
+    <div class="table-container">
+      <tree-table v-loading="listLoading" :data="list" :columns="columns" rowkey="id" class="treetable" border>
+        <el-table-column v-if="showOperate" label="操作" width="250">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/role/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/role/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+            <el-button v-if="hasPerm('/role/funcAuthor')" type="primary" size="mini" @click="funcPermission(scope.row)">功能权限</el-button>
+            <el-button v-if="hasPerm('/role/dataAuthor')" type="success" size="mini" @click="dataPermission(scope.row)">数据权限</el-button>
+          </template>
+        </el-table-column>
+      </tree-table>
+    </div>
     <!--编辑资源的对话框-->
     <edit-role v-show="editShow" ref="editrole" @watchChild="fetchData"/>
     <!--功能权限-->
@@ -29,7 +29,7 @@
     <!--数据权限-->
     <data-perm v-show="dataShow" ref="dataperm" />
 
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -38,12 +38,18 @@
 import editRole from '@/views/system/role/editrole'
 import functionPerm from '@/views/system/role/functionPerm'
 import dataPerm from '@/views/system/role/dataPerm'
-import { getRoleList, delRole } from '@/api/role'
+import { getRoleList, delRole } from '@/api/system/role'
 import { toTreeList } from '@/utils/structure'
+import AppContainer from '../../../components/layout/AppContainer'
+import SearchArea from '../../../components/SearchArea/SearchArea'
+import SearchItem from '../../../components/SearchArea/SearchItem'
 
 export default {
   name: 'ListRole',
   components: {
+    SearchItem,
+    SearchArea,
+    AppContainer,
     treeTable,
     functionPerm,
     dataPerm,
@@ -141,7 +147,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             // this.deleteItem(value.children, des)
diff --git a/src/views/system/user/editUser.vue b/src/views/system/user/editUser.vue
index 2fd735a..a9ba171 100644
--- a/src/views/system/user/editUser.vue
+++ b/src/views/system/user/editUser.vue
@@ -79,7 +79,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -89,9 +89,9 @@
 import { toTreeList } from '@/utils/structure'
 import SelectTree from '@/components/SelectTree/singleSelect'
 import DeptSelect from '@/components/DeptSelect'
-// import { getDeptTreeList } from '@/api/dept'
-import { getRoleTreeList } from '@/api/role'
-import { addUser, updateUser } from '@/api/user'
+// import { getDeptTreeList } from '@/api/system/dept'
+import { getRoleTreeList } from '@/api/system/role'
+import { addUser, updateUser } from '@/api/system/user'
 import { RSAencrypt } from '../../../utils/security'
 
 export default {
@@ -186,7 +186,8 @@
           trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       roleName: '',
-      deptShow: true
+      deptShow: true,
+      btnLoading: false // 保存按钮的加载中状态
     }
   },
   computed: {
@@ -204,6 +205,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchRoleTree()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
         this.ifdisabled = false
@@ -269,6 +271,7 @@
         const userForm = JSON.parse(JSON.stringify(this.userForm))
         userForm.password = RSAencrypt(userForm.password)
         if (valid) {
+          this.btnLoading = true
           addUser(userForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -276,6 +279,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -285,6 +289,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -293,12 +299,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateUser(this.userForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
index a3c25a9..44beb6b 100644
--- a/src/views/system/user/listUser.vue
+++ b/src/views/system/user/listUser.vue
@@ -43,11 +43,11 @@
               <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
             </el-row>
             <el-row>
-              <el-button v-if="hasPerm('/mgr/add')" class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+              <el-button v-if="hasPerm('/mgr/add')" class="filter-item" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
               <el-button v-if="hasPerm('/mgr/update')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="edit">修改</el-button>
-              <el-button v-if="hasPerm('/mgr/delete')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="del">删除</el-button>
-              <el-button v-if="hasPerm('/mgr/reset')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="resetPwd">重置密码</el-button>
-              <el-button v-if="hasPerm('/mgr/roleAssign')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="roleAssign">角色分配</el-button>
+              <el-button v-if="hasPerm('/mgr/delete')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-delete" @click="del">删除</el-button>
+              <el-button v-if="hasPerm('/mgr/reset')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-key" @click="resetPwd">重置密码</el-button>
+              <el-button v-if="hasPerm('/mgr/roleAssign')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-magic-stick" @click="roleAssign">角色分配</el-button>
               <!--<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">冻结</el-button>-->
               <!--<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">解冻</el-button>-->
             </el-row>
@@ -74,7 +74,7 @@
               <el-tag :type="tagNames[scope.row.statusName]" size="medium">{{ scope.row.statusName }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column v-if="hasPerm('/mgr/freeze')" label="操作" width="60">
+          <el-table-column v-if="hasPerm('/mgr/freeze')" label="操作" align="center" width="60">
             <template slot-scope="scope">
               <el-button v-if="hasPerm('/mgr/freeze')" :type="btnStatus[scope.row.statusName]" size="mini" @click="freeze(scope.row)">{{ btnNames[scope.row.statusName] }}</el-button>
             </template>
@@ -105,8 +105,8 @@
 import { RSAencrypt } from '@/utils/security'
 import editUser from '@/views/system/user/editUser'
 import roleAssign from '@/views/system/user/roleAssign'
-import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd } from '@/api/user'
-import { getDeptTreeList } from '@/api/dept'
+import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd } from '@/api/system/user'
+import { getDeptTreeList } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
 export default {
@@ -130,7 +130,7 @@
       },
       registerTime: [], // 注册时间范围
       tagNames: {
-        '已冻结': 'warning',
+        '已冻结': 'danger',
         '启用': 'success'
       },
       btnNames: {
@@ -138,8 +138,8 @@
         '启用': '冻结'
       },
       btnStatus: {
-        '已冻结': 'success',
-        '正常': 'danger'
+        '已冻结': '',
+        '启用': 'primary'
       },
       columns: [
         {
@@ -323,11 +323,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取用户数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getUserList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = response.data.total
@@ -340,7 +343,6 @@
       this.treeLoading = true
       getDeptTreeList(this.listQuery).then(response => {
         this.deptTree = toTreeList(response.data.list, '0', true)
-        console.log(this.deptTree)
         this.treeLoading = false
       })
     },
@@ -364,7 +366,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-          return
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/user/resetPwd.vue b/src/views/system/user/resetPwd.vue
index 8d18ff3..5afa427 100644
--- a/src/views/system/user/resetPwd.vue
+++ b/src/views/system/user/resetPwd.vue
@@ -20,7 +20,7 @@
 
 <script>
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { changePwd } from '../../../api/user'
+import { changePwd } from '../../../api/system/user'
 import { RSAencrypt } from '../../../utils/security'
 
 export default {
@@ -51,12 +51,12 @@
         } else {
           callback(new Error('必须由数字、字母、字符中至少两种组成'))
         }
+
         callback()
       }
     }
-    const validateRepass = (rule, value, callback) => {
+    const validatePass2 = (rule, value, callback) => {
       console.log('验证重复密码')
-      debugger
       if (value === '') {
         callback(new Error('重复密码不能为空'))
       } else if (value !== this.userForm.password) {
@@ -75,8 +75,8 @@
       }, // 表单
       rules: {
         oldpassword: [{ required: true, validator: validateOldPass, trigger: ['blur', 'change'] }],
-        password: [{ required: true, validator: validatePass, trigger: ['blur'] }],
-        repassword: [{ required: true, validator: validateRepass, trigger: ['blur'] }]
+        password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
+        repassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }]
       } // 前端校验规则
     }
   },
diff --git a/src/views/system/user/roleAssign.vue b/src/views/system/user/roleAssign.vue
index 2194558..e5c7776 100644
--- a/src/views/system/user/roleAssign.vue
+++ b/src/views/system/user/roleAssign.vue
@@ -23,8 +23,8 @@
 
 <script>
 import { toTreeList, getShowItem } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/role'
-import { roleAssign } from '@/api/user'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
 
 export default {
   name: 'RoleAssign',