From b94e69be6f9a5cb42741c77c5039bdf7eb155add Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Mon, 1 Apr 2019 17:07:16 +0800
Subject: [PATCH] [release] 4.0.0 (#1291)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix[ExternalLink]: fixed bug when url include chinese #1182

* feature: support  Spanish(#1196)

* fix[MockJS]: fix bug with withCredentials after using mockjs  (#1194)

* 修复 Mock 导致请求丢失 Cookie 的问题

修复 Mock 导致 Cookie 丢失的问题，只有在 XHR.open() 周期时，自定义的 withCredentials 会被挂载，此时检查是否是未被拦截的 xhr，并挂载自定义的 withCredentials ，无则默认为 false

* update readme

* perf[tagsView]: refactor the moveToTarget function (#1195)

* fix[tagsView]:fixed visited view move to currentTag

* edit the scroll regular friendly

* tweak

* fix[tagsView]: fixed moveToCurrentTag bug

* feature: add pagination component (#1213)

* fix[TagsView]: fixed update tags title demo bug (#1223)

* chore: temporary hack cssnano bug #1222

* [release] 3.9.2

* chore: restore the hack of cssnano bug

https://github.com/cssnano/cssnano/issues/643

* add an example of sort data by table  (#1236)

* feature: add drag select component (#1249)

* feat: perfect migrate to @vue/cli-service, upgrade vue babel version (#1267)

* feat: perfect migrate to @vue/cli-service, upgrade vue babel version

1. update to @vue/cli-service@3.0.5, @babel/core@7.0.0
2. use vue-cli service replace config file in build/ and config/
3. upgrade vue and babel configuration
4. solve the svg-sprite config problem #980

refs: #932 #1087  #980 #1056

* fix: fix breadcrumb dependency

* fix: fix index template and static assets load with vue-cli 3

* fix: fix import driver.js in guide page

* refactor(mock): mak mock api compatible with both web-view and webpack server

1. 把 Mockjs 功能移到 server 端中间件，同时也兼容前端直接劫持 XHR
2. dev 环境下默认作为 express 中间件通过 webpack server 提供 mock api
3. prod 构建时，默认在前端用 Mockjs 劫持 XHR

benefits:
  - dev 开发调试时能直接看到 XHR 请求，方便调试网络，能和后端对接联调
  - 避开在开发时因为 Mockjs 引起的网络 bug
  - prod 构建时劫持 XHR，保证本项目的 Github Pages preview 能正常显示 (逻辑和 error-log 一样)
  - 前后台使用的 mock 是同一份代码，不会增加维护负担

ref: [#562](https://github.com/PanJiaChen/vue-element-admin/issues/562#issuecomment-378116233)

* update requires the lowest version of node

* add favicon

* fix(TreeTable): fix `Array.prototype.concat` on custom-tree-table page

* update

* add test

* fix bug

* fix[Charts]: fixed charts resize mixins bug  #1285 (#1290)

* perf[Tinymce]: add searchreplace plugin

* perf[avatar]:minimize the selected area of avatar on the mobile phone when user clicked avatar (#1304)

* refine css

* fix[DragSelect]: fixed querySelectorAll bug

* perf[DragSelect]: add $listeners

* fix link

* fix[Breadcurmb]: fixed pathCompile bug

* fix[Breadcurmb]: fixed router-link bug

* perf[style]: use webpack alias instead of hard code src path (#1338)

* perf[style]: use webpack alias instead of hard code src path

* add sponsors

* fix import path bug

* update vue-router to fixed url path for non ascii urls #1362

* fix[Pagination]: apply PageSizes property to el-pagination  (#1355)

Apply PageSizes property to el-pagination

* update dependence

* add tui.editor (#1374)

* tweak

* add preview

* fix return back bug

* update guide page

* fix[Tinymce]: fixed fullScreen bug #1400

* feat[Breadcrumb]: add hide Breadcrumb option #1442

* perf: use WeChat 7.0 new version icon color

* refactor[login]: refactor login page style

* perf[ScrollPane]: refine moveToTarget code (#1460)

* feature[PDF]: add PDF demo (#1469)

* perf[v-permission]: refine v-permission demo

* perf[Sidebar]: refine sidebar store #1473 (#1474)

* refine: GetUserInfo error message

* fix typo (#1505)

* perf: add sidebar width to variables.scss (#1494)

* tweak

* fix[ThemePicker]: fixed bug when oldVal is null (#1517)

* update README.md

* fix[Breadcrumb]: fixed eslint error (#1521)

* fix[DndList]: fixed drag bug (#1527)

https://github.com/PanJiaChen/vue-element-admin/issues/1524

* pref[Hamburger]: refactor Hamburger component (#1528)

* 美化侧栏菜单切换按钮

* tweak

* perf[Login Form]: optimize eye icon style (#1545)

* optimiz: eye icon style for login form

* change eye-open svg

* perf[Sticky]: export reset method (#1550)

* perf[Sticky]: refine width default value

* perf[utils]: refine parseTime function (#1546)

* 优化 parseTime

修复传入的时间戳是字符串类型，不能转换时间的问题
例：parseTime("1548221490638")

* Update index.js

* perf[UploadExcel]: optimized code (#1552)

* perf: adjust the import order to make it more elegant #1537

* perf[Sidebar]: use sass variables in vue template

* perf[Style]: optimize the sidebar style to make it better to set (#1568)

* perf[SizeSelect]: add default size option (#1566)

* fix[SIdebar]: fixed bug in mobile #1567 (#1569)

* perf: fixed eslint errors

* perf[Lang]: make up for miss keywords

* perf: optimize some code

* perf[Navbar]: refactor navbar style

* perf[Login]: refine css

* feature[Navbar]: add header-search component(#1591)

* fix[Screenfull]: fix screenfull click bug

* perf[Screenfull]: refactor screenfull component

* fix[Screenfull]: fix screenfull bug (#1603)

* fix typo

* fearure[TagsView]: add affix option (#1577)

* perf[utils]: optimize code

* perf[utils]: optimizate variable name

* perf[Navbar]: add scroll bar when the subMenu is too long (#1619)

* perf[ThemePicker]: refine updateStyle function (#554)

* theme replacing should cut tons of irrelevant css

* perf[ResizeHandler]: optimized the judgment of isMobile (#1633)

perf[ResizeHandler]: optimized the judgment of isMobile

*  fix[Sidebar]: fixed infinite loop bug(#1333)

* fixed infinite loop Bug when in hasOneShowingChild Edit the onlyOneChild

* tweak

* fix[Sidebar]: data should return a object

* perf[Sidebar]: optimize code logic (#1349)

* fix[TagsView]: fixed refresh affixed-tag bug (#1653)

* perf[utils.js]: refactor byteLength function (#1650)

* perf[TagsView]: refine code

* perf[TagsView]: set the scrollPane as a business component (#1660)

* fix[DragTable]: support multiple drag-table (#1666)

* perf[Tree-Table]: refactor tree-table

* perf[Tree-Table]: organize the structure and add documentation (#1673)

* fix[Sidebar]: fixed nested router hover bug

* update version

* set preserveWhitespace

* lint code

* fix jest test case

* update config

* bump

* remove empty file

* docs: add link

* fix[Sidebar]: fixed collapse animation problem (#1690)

* fix[Tree-Table]: fixed update item data bug (#1692)

* fix[Waves-Directive]: fixed v-waves does not support update (#1705)

* update husky

* rm cli-plugin-eslint

* add settings (#1707)

* refine settings

* fix[utils]: fixed param2Obj not decoding plus sign (#1712)

* feature[Directive]: add auto-height table directive (#1702)

* fix bug

* feature[Permission]: add role permission management page (#1605)

* feature[Excel]: support export merged header export (#1718)

* feature[Excel]: add export merge header excel demo

* lint

* refine theme color

* add role mock

* tweak mock

* fix[Excel]: fixed export merge-header excel bug

* refine code

* add ThemePicker to setting

* fix[HeaderSearch]: fixed bug in vue2.6+ (#1733)

* fix[Sticky]: fixed bug when set stickyTop

* perf[Sticky]: refine demo

* refine code

* tweak mock

* vuex add namespaced

* fix[Excel]: fixed export bug (#1736)

* rm

* refactor permission

* perf[ThemePicker]: add predefine (#1743)

* fix[Utils]: fixed deepClone error msg (#1748)

* feature: add fixedHeader settings

* fix style in mobile

* fix chore

* perf[Eslint]: update eslint rules

* feature: add create template (#1762)

* add comment

* update vue.config.js

* feature: add sidebar logo (#1767)

* rm

* perf settings

* bump

* refine script and css

* update

* refine settings

* refine config

* update docs

* refine

* rm

* fix jest

* add theme setting

* dump vue-cli

* perf: remove redundant code

* update element-ui

* fix sticky demo bug

* docs

* fixed password input  bug

* refine login form css

* remove tree-table

* update version

* mock error

* refine layout name

* refine
---
 .babelrc                                      |  17 -
 .env.development                              |  14 +
 .env.production                               |   6 +
 .env.staging                                  |   8 +
 .eslintignore                                 |   3 +-
 .eslintrc.js                                  |   3 +-
 .gitignore                                    |   6 +-
 .postcssrc.js                                 |   2 -
 README.md                                     |  51 +-
 README.zh-CN.md                               |  63 +--
 babel.config.js                               |   5 +
 build/build.js                                |  67 ---
 build/check-versions.js                       |  64 ---
 build/index.js                                |  35 ++
 build/logo.png                                | Bin 6849 -> 0 bytes
 build/utils.js                                | 108 ----
 build/vue-loader.conf.js                      |   5 -
 build/webpack.base.conf.js                    | 107 ----
 build/webpack.dev.conf.js                     |  98 ----
 build/webpack.prod.conf.js                    | 187 -------
 config/dev.env.js                             |   5 -
 config/index.js                               |  88 ---
 config/prod.env.js                            |   5 -
 config/sit.env.js                             |   5 -
 jest.config.js                                |  27 +
 mock/article.js                               | 116 ++++
 mock/index.js                                 |  54 ++
 mock/mocks.js                                 |  12 +
 mock/remoteSearch.js                          |  51 ++
 mock/role/index.js                            |  98 ++++
 mock/role/routes.js                           | 525 ++++++++++++++++++
 mock/user.js                                  |  84 +++
 package.json                                  | 148 +++--
 plop-templates/component/index.hbs            |  26 +
 plop-templates/component/prompt.js            |  55 ++
 plop-templates/utils.js                       |   9 +
 plop-templates/view/index.hbs                 |  26 +
 plop-templates/view/prompt.js                 |  55 ++
 plopfile.js                                   |   7 +
 favicon.ico => public/favicon.ico             | Bin
 index.html => public/index.html               |   5 +-
 .../static}/tinymce4.7.5/langs/zh_CN.js       |   0
 .../plugins/codesample/css/prism.css          |   0
 .../plugins/emoticons/img/smiley-cool.gif     | Bin
 .../plugins/emoticons/img/smiley-cry.gif      | Bin
 .../emoticons/img/smiley-embarassed.gif       | Bin
 .../emoticons/img/smiley-foot-in-mouth.gif    | Bin
 .../plugins/emoticons/img/smiley-frown.gif    | Bin
 .../plugins/emoticons/img/smiley-innocent.gif | Bin
 .../plugins/emoticons/img/smiley-kiss.gif     | Bin
 .../plugins/emoticons/img/smiley-laughing.gif | Bin
 .../emoticons/img/smiley-money-mouth.gif      | Bin
 .../plugins/emoticons/img/smiley-sealed.gif   | Bin
 .../plugins/emoticons/img/smiley-smile.gif    | Bin
 .../emoticons/img/smiley-surprised.gif        | Bin
 .../emoticons/img/smiley-tongue-out.gif       | Bin
 .../emoticons/img/smiley-undecided.gif        | Bin
 .../plugins/emoticons/img/smiley-wink.gif     | Bin
 .../plugins/emoticons/img/smiley-yell.gif     | Bin
 .../plugins/visualblocks/css/visualblocks.css |   0
 .../skins/lightgray/content.inline.min.css    |   0
 .../skins/lightgray/content.min.css           |   0
 .../skins/lightgray/fonts/tinymce-mobile.woff | Bin
 .../skins/lightgray/fonts/tinymce-small.eot   | Bin
 .../skins/lightgray/fonts/tinymce-small.svg   |   0
 .../skins/lightgray/fonts/tinymce-small.ttf   | Bin
 .../skins/lightgray/fonts/tinymce-small.woff  | Bin
 .../skins/lightgray/fonts/tinymce.eot         | Bin
 .../skins/lightgray/fonts/tinymce.svg         |   0
 .../skins/lightgray/fonts/tinymce.ttf         | Bin
 .../skins/lightgray/fonts/tinymce.woff        | Bin
 .../skins/lightgray/img/anchor.gif            | Bin
 .../skins/lightgray/img/loader.gif            | Bin
 .../skins/lightgray/img/object.gif            | Bin
 .../skins/lightgray/img/trans.gif             | Bin
 .../tinymce4.7.5/skins/lightgray/skin.min.css |   0
 .../skins/lightgray/skin.min.css.map          |   0
 .../static}/tinymce4.7.5/tinymce.min.js       |   0
 src/api/remoteSearch.js                       |  10 +-
 src/api/role.js                               |  20 +-
 src/api/transaction.js                        |   9 -
 src/api/{login.js => user.js}                 |  22 +-
 src/components/BackToTop/index.vue            |  42 +-
 src/components/Breadcrumb/index.vue           |  26 +-
 src/components/DndList/index.vue              |  14 +-
 src/components/Dropzone/index.vue             |   2 +-
 src/components/ErrorLog/index.vue             |  13 +-
 src/components/Hamburger/index.vue            |   9 +-
 src/components/HeaderSearch/index.vue         |   2 +
 src/components/Kanban/index.vue               |   2 +-
 src/components/LangSelect/index.vue           |   2 +-
 src/components/MDinput/index.vue              |   2 +-
 src/components/RightPanel/index.vue           | 152 +++++
 src/components/Screenfull/index.vue           |  15 +-
 src/components/Share/dropdownMenu.vue         |   2 +-
 src/components/SizeSelect/index.vue           |   7 +-
 src/components/ThemePicker/index.vue          |  79 +--
 .../Tinymce/components/editorImage.vue        |  14 +-
 src/components/TreeTable/README.md            | 220 --------
 src/components/TreeTable/eval.js              |  48 --
 src/components/TreeTable/index.vue            | 193 -------
 src/components/TreeTable/readme.md            | 220 --------
 src/components/Upload/singleImage.vue         |   8 +-
 src/components/Upload/singleImage2.vue        |   6 +-
 src/components/Upload/singleImage3.vue        |   6 +-
 src/components/UploadExcel/index.vue          |   4 +-
 src/directive/waves/waves.js                  |  13 +-
 src/errorLog.js                               |  19 -
 src/lang/en.js                                |   9 +-
 src/lang/es.js                                |   9 +-
 src/lang/zh.js                                |   9 +-
 src/{views => }/layout/components/AppMain.vue |  21 +-
 src/{views => }/layout/components/Navbar.vue  |  22 +-
 src/layout/components/Settings/index.vue      | 108 ++++
 .../layout/components/Sidebar/FixiOSBug.js    |   0
 .../layout/components/Sidebar/Item.vue        |   0
 .../layout/components/Sidebar/Link.vue        |   0
 src/layout/components/Sidebar/Logo.vue        |  82 +++
 .../layout/components/Sidebar/SidebarItem.vue |   2 -
 src/layout/components/Sidebar/index.vue       |  44 ++
 .../layout/components/TagsView/ScrollPane.vue |   2 +-
 .../layout/components/TagsView/index.vue      |  33 +-
 src/{views => }/layout/components/index.js    |   1 +
 src/layout/index.vue                          | 102 ++++
 src/{views => }/layout/mixin/ResizeHandler.js |  13 +-
 src/main.js                                   |  10 +-
 src/mock/article.js                           |  70 ---
 src/mock/index.js                             |  48 --
 src/mock/login.js                             |  34 --
 src/mock/remoteSearch.js                      |  24 -
 src/mock/role.js                              |  61 --
 src/mock/transaction.js                       |  23 -
 src/permission.js                             |  82 ++-
 src/router/index.js                           |  38 +-
 src/router/modules/charts.js                  |   2 +-
 src/router/modules/components.js              |   2 +-
 src/router/modules/nested.js                  |   2 +-
 src/router/modules/table.js                   |   2 +-
 src/router/modules/tree-table.js              |  29 -
 src/settings.js                               |  37 ++
 src/store/getters.js                          |   2 -
 src/store/index.js                            |   2 +
 src/store/modules/app.js                      | 107 ++--
 src/store/modules/errorLog.js                 |  34 +-
 src/store/modules/permission.js               |  56 +-
 src/store/modules/settings.js                 |  32 ++
 src/store/modules/tagsView.js                 | 285 +++++-----
 src/store/modules/user.js                     | 242 ++++----
 src/styles/element-variables.scss             |  31 ++
 src/styles/sidebar.scss                       |  12 +
 src/styles/transition.scss                    |   2 +-
 src/utils/errorLog.js                         |  35 ++
 src/utils/index.js                            |  19 +-
 src/utils/request.js                          |  66 +--
 src/utils/validate.js                         |  27 +-
 src/views/clipboard/index.vue                 |   8 +-
 src/views/components-demo/countTo.vue         |  14 +-
 src/views/components-demo/dragDialog.vue      |   4 +-
 src/views/components-demo/dragKanban.vue      |  10 +-
 src/views/components-demo/dragSelect.vue      |   6 +-
 src/views/components-demo/jsonEditor.vue      |   6 +-
 src/views/components-demo/markdown.vue        |  53 +-
 src/views/components-demo/mixin.vue           |  32 +-
 src/views/components-demo/sticky.vue          |   6 +-
 src/views/components-demo/tinymce.vue         |   1 -
 .../dashboard/admin/components/BoxCard.vue    |   4 +-
 .../dashboard/admin/components/PanelGroup.vue |  18 +-
 .../admin/components/TransactionTable.vue     |   4 +-
 src/views/dashboard/admin/index.vue           |   4 +-
 src/views/dashboard/editor/index.vue          |   2 +-
 src/views/documentation/index.vue             |   2 +-
 src/views/errorPage/401.vue                   |  18 +-
 src/views/errorPage/404.vue                   |  18 +-
 .../example/components/ArticleDetail.vue      |  17 +-
 src/views/example/list.vue                    |  11 +-
 .../excel/components/AutoWidthOption.vue      |   8 +-
 src/views/excel/exportExcel.vue               |   5 +-
 src/views/excel/selectExcel.vue               |   4 +-
 src/views/guide/index.vue                     |   4 +-
 src/views/i18n-demo/index.vue                 |  42 +-
 src/views/layout/Layout.vue                   |  71 ---
 src/views/layout/components/Sidebar/index.vue |  37 --
 src/views/login/authredirect.vue              |  11 +-
 src/views/login/index.vue                     | 149 ++---
 src/views/login/socialsignin.vue              |   2 +-
 src/views/pdf/download.vue                    |   7 +-
 src/views/pdf/index.vue                       |   4 +-
 .../permission/components/SwitchRoles.vue     |   6 +-
 src/views/permission/directive.vue            |  26 +-
 src/views/permission/role.vue                 |  37 +-
 src/views/qiniu/upload.vue                    |   4 +-
 src/views/svg-icons/index.vue                 |   2 +-
 src/views/tab/components/tabPane.vue          |   2 -
 src/views/table/complexTable.vue              |  35 +-
 src/views/table/dragTable.vue                 |  34 +-
 src/views/table/dynamicTable/fixedThead.vue   |  14 +-
 src/views/table/dynamicTable/index.vue        |   8 +-
 src/views/table/dynamicTable/unfixedThead.vue |  14 +-
 src/views/table/inlineEditTable.vue           |  36 +-
 src/views/theme/index.vue                     |  37 +-
 src/views/tree-table/custom/data.js           |  51 --
 src/views/tree-table/custom/index.vue         | 158 ------
 src/views/tree-table/data.js                  |  80 ---
 src/views/tree-table/index.vue                | 128 -----
 src/views/zip/index.vue                       |  13 +-
 tests/unit/.eslintrc.js                       |   5 +
 tests/unit/components/Hamburger.spec.js       |  18 +
 tests/unit/components/SvgIcon.spec.js         |  22 +
 tests/unit/utils/formatTime.spec.js           |  29 +
 tests/unit/utils/parseTime.spec.js            |  27 +
 tests/unit/utils/validate.spec.js             |  28 +
 vue.config.js                                 | 147 +++++
 212 files changed, 3499 insertions(+), 3348 deletions(-)
 delete mode 100644 .babelrc
 create mode 100644 .env.development
 create mode 100644 .env.production
 create mode 100644 .env.staging
 create mode 100644 babel.config.js
 delete mode 100644 build/build.js
 delete mode 100644 build/check-versions.js
 create mode 100644 build/index.js
 delete mode 100644 build/logo.png
 delete mode 100644 build/utils.js
 delete mode 100644 build/vue-loader.conf.js
 delete mode 100644 build/webpack.base.conf.js
 delete mode 100644 build/webpack.dev.conf.js
 delete mode 100644 build/webpack.prod.conf.js
 delete mode 100644 config/dev.env.js
 delete mode 100644 config/index.js
 delete mode 100644 config/prod.env.js
 delete mode 100644 config/sit.env.js
 create mode 100644 jest.config.js
 create mode 100644 mock/article.js
 create mode 100644 mock/index.js
 create mode 100644 mock/mocks.js
 create mode 100644 mock/remoteSearch.js
 create mode 100644 mock/role/index.js
 create mode 100644 mock/role/routes.js
 create mode 100644 mock/user.js
 create mode 100644 plop-templates/component/index.hbs
 create mode 100644 plop-templates/component/prompt.js
 create mode 100644 plop-templates/utils.js
 create mode 100644 plop-templates/view/index.hbs
 create mode 100644 plop-templates/view/prompt.js
 create mode 100644 plopfile.js
 rename favicon.ico => public/favicon.ico (100%)
 rename index.html => public/index.html (68%)
 rename {static => public/static}/tinymce4.7.5/langs/zh_CN.js (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/codesample/css/prism.css (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-cool.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-cry.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-embarassed.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-foot-in-mouth.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-frown.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-innocent.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-kiss.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-laughing.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-money-mouth.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-sealed.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-smile.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-surprised.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-tongue-out.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-undecided.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-wink.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/emoticons/img/smiley-yell.gif (100%)
 rename {static => public/static}/tinymce4.7.5/plugins/visualblocks/css/visualblocks.css (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/content.inline.min.css (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/content.min.css (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce-mobile.woff (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.eot (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.svg (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.ttf (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.woff (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce.eot (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce.svg (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce.ttf (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/fonts/tinymce.woff (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/img/anchor.gif (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/img/loader.gif (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/img/object.gif (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/img/trans.gif (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/skin.min.css (100%)
 rename {static => public/static}/tinymce4.7.5/skins/lightgray/skin.min.css.map (100%)
 rename {static => public/static}/tinymce4.7.5/tinymce.min.js (100%)
 delete mode 100644 src/api/transaction.js
 rename src/api/{login.js => user.js} (57%)
 create mode 100644 src/components/RightPanel/index.vue
 delete mode 100644 src/components/TreeTable/README.md
 delete mode 100644 src/components/TreeTable/eval.js
 delete mode 100644 src/components/TreeTable/index.vue
 delete mode 100644 src/components/TreeTable/readme.md
 delete mode 100644 src/errorLog.js
 rename src/{views => }/layout/components/AppMain.vue (62%)
 rename src/{views => }/layout/components/Navbar.vue (85%)
 create mode 100644 src/layout/components/Settings/index.vue
 rename src/{views => }/layout/components/Sidebar/FixiOSBug.js (100%)
 rename src/{views => }/layout/components/Sidebar/Item.vue (100%)
 rename src/{views => }/layout/components/Sidebar/Link.vue (100%)
 create mode 100644 src/layout/components/Sidebar/Logo.vue
 rename src/{views => }/layout/components/Sidebar/SidebarItem.vue (99%)
 create mode 100644 src/layout/components/Sidebar/index.vue
 rename src/{views => }/layout/components/TagsView/ScrollPane.vue (97%)
 rename src/{views => }/layout/components/TagsView/index.vue (88%)
 rename src/{views => }/layout/components/index.js (80%)
 create mode 100644 src/layout/index.vue
 rename src/{views => }/layout/mixin/ResizeHandler.js (61%)
 delete mode 100644 src/mock/article.js
 delete mode 100644 src/mock/index.js
 delete mode 100644 src/mock/login.js
 delete mode 100644 src/mock/remoteSearch.js
 delete mode 100644 src/mock/role.js
 delete mode 100644 src/mock/transaction.js
 delete mode 100644 src/router/modules/tree-table.js
 create mode 100644 src/settings.js
 create mode 100644 src/store/modules/settings.js
 create mode 100644 src/styles/element-variables.scss
 create mode 100644 src/utils/errorLog.js
 delete mode 100644 src/views/layout/Layout.vue
 delete mode 100644 src/views/layout/components/Sidebar/index.vue
 delete mode 100644 src/views/tree-table/custom/data.js
 delete mode 100644 src/views/tree-table/custom/index.vue
 delete mode 100644 src/views/tree-table/data.js
 delete mode 100644 src/views/tree-table/index.vue
 create mode 100644 tests/unit/.eslintrc.js
 create mode 100644 tests/unit/components/Hamburger.spec.js
 create mode 100644 tests/unit/components/SvgIcon.spec.js
 create mode 100644 tests/unit/utils/formatTime.spec.js
 create mode 100644 tests/unit/utils/parseTime.spec.js
 create mode 100644 tests/unit/utils/validate.spec.js
 create mode 100644 vue.config.js

diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 6c0b7f27..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
-  "env": {
-    "development":{
-      "plugins": ["dynamic-import-node"]
-    }
-  }
-}
diff --git a/.env.development b/.env.development
new file mode 100644
index 00000000..8f5856db
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,14 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/dev-api'
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/.env.production b/.env.production
new file mode 100644
index 00000000..80c81030
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,6 @@
+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+
diff --git a/.env.staging b/.env.staging
new file mode 100644
index 00000000..a8793a09
--- /dev/null
+++ b/.env.staging
@@ -0,0 +1,8 @@
+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+
diff --git a/.eslintignore b/.eslintignore
index e3a4037e..e6529fc0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 build/*.js
-config/*.js
 src/assets
+public
+dist
diff --git a/.eslintrc.js b/.eslintrc.js
index 1266f38d..c9775054 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,6 +24,7 @@ module.exports = {
     "vue/singleline-html-element-content-newline": "off",
     "vue/multiline-html-element-content-newline":"off",
     "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
       'before': true,
@@ -46,7 +47,7 @@ module.exports = {
     'curly': [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
-    'eqeqeq': [2, 'allow-null'],
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
     'generator-star-spacing': [2, {
       'before': true,
       'after': true
diff --git a/.gitignore b/.gitignore
index 9322b8a6..78a752d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,8 +6,8 @@ yarn-debug.log*
 yarn-error.log*
 **/*.log
 
-test/unit/coverage
-test/e2e/reports
+tests/**/coverage/
+tests/e2e/reports
 selenium-debug.log
 
 # Editor directories and files
@@ -17,5 +17,7 @@ selenium-debug.log
 *.ntvs*
 *.njsproj
 *.sln
+*.local
 
 package-lock.json
+yarn.lock
diff --git a/.postcssrc.js b/.postcssrc.js
index eee3e92d..09948d63 100644
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -2,8 +2,6 @@
 
 module.exports = {
   "plugins": {
-    "postcss-import": {},
-    "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
     "autoprefixer": {}
   }
diff --git a/README.md b/README.md
index 5f26a357..48599a7e 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,10 @@
 
 <p align="center">
   <a href="https://github.com/vuejs/vue">
-    <img src="https://img.shields.io/badge/vue-2.5.17-brightgreen.svg" alt="vue">
+    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
   </a>
   <a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.4.11-brightgreen.svg" alt="element-ui">
+    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
   </a>
   <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
     <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
@@ -30,48 +30,41 @@ English | [简体中文](./README.zh-CN.md)
 
 ## Introduction
 
-[vue-element-admin](http://panjiachen.github.io/vue-element-admin) is a front-end management background integration solution. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element](https://github.com/ElemeFE/element).
+[vue-element-admin](http://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
 
 It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
 
-**[v4.0](https://github.com/PanJiaChen/vue-element-admin/tree/v4.0) has in beta. It built on vue-cli@3, optimized a lot of code and added a lot of new features. Welcome to use and make suggestions.**
-
 - [Preview](http://panjiachen.github.io/vue-element-admin)
 
 - [Documentation](https://panjiachen.github.io/vue-element-admin-site/)
 
 - [Gitter](https://gitter.im/vue-element-admin/discuss)
 
-- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
-
 - [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
 
-- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
 
-**This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.**
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
 
 - Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
 
-**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
-
-**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
+**The current version is `4.0-beta`. If you find a problem, please put [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). If you want to use the old version - stable version, you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)**
 
-**Start using `webpack4` from `v3.8.0`. If you still want to continue using `webpack3`, please use this branch [webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
+**This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.**
 
 ## Preparation
 
-You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
+You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
 Understanding and learning this knowledge in advance will greatly help the use of this project.
 
----
-
  <p align="center">
   <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>
 
 ## Sponsors
+
 Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
 
 <a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
@@ -84,6 +77,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 - Permission Authentication
   - Page permission
   - Directive permission
+  - Permission configuration page
   - Two-step login
 
 - Multi-environment build
@@ -107,14 +101,13 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 
 - Excel
   - Export Excel
-  - Export zip
   - Upload Excel
   - Visualization Excel
+  - Export zip
 
 - Table
   - Dynamic Table
   - Drag And Drop Table
-  - Tree Table
   - Inline Edit Table
 
 - Error Page
@@ -148,6 +141,9 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 # clone the project
 git clone https://github.com/PanJiaChen/vue-element-admin.git
 
+# enter the project directory
+cd vue-element-admin
+
 # install dependency
 npm install
 
@@ -155,13 +151,13 @@ npm install
 npm run dev
 ```
 
-This will automatically open http://localhost:9527.
+This will automatically open http://localhost:9527
 
 ## Build
 
 ```bash
 # build for test environment
-npm run build:sit
+npm run build:stage
 
 # build for production environment
 npm run build:prod
@@ -170,19 +166,16 @@ npm run build:prod
 ## Advanced
 
 ```bash
-# --report to build with bundle size analytics
-npm run build:prod --report
-
-# --generate a bundle size analytics. default: bundle-report.html
-npm run build:prod --generate_report
+# preview the release environment effect
+npm run preview
 
-# --preview to start a server in local to preview
-npm run build:prod --preview
+# preview the release environment effect + static resource analysis
+npm run preview -- --report
 
-# lint code
+# code format check
 npm run lint
 
-# auto fix
+# code format check and auto fix
 npm run lint -- --fix
 ```
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 18d4aca3..e0ec09bb 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -4,10 +4,10 @@
 
 <p align="center">
   <a href="https://github.com/vuejs/vue">
-    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
   </a>
   <a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.4.11-brightgreen.svg" alt="element-ui">
+    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
   </a>
   <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
     <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
@@ -30,43 +30,37 @@
 
 ## 简介
 
-[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
+[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
 
-**[v4.0](https://github.com/PanJiaChen/vue-element-admin/tree/v4.0) 已经进入 beta 测试阶段。 它基于 vue-cli@3 进行构建，优化了大量代码(尤其是权限和 mock)，并且增加了不少新特性。欢迎使用并提出建议。**
-
-- [在线访问](http://panjiachen.github.io/vue-element-admin)
+- [在线预览](http://panjiachen.github.io/vue-element-admin)
 
 - [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
 
 - [Gitter 讨论组](https://gitter.im/vue-element-admin/discuss)
 
-- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
-
 - [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
 
-- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
 
-- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 方便没翻墙的用户查看文档
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 在线预览（国内用户可访问该地址）
 
-**本项目的定位是后台集成方案，不适合当基础模板来开发。**
+- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 文档（方便没翻墙的用户查看）
 
-- 模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
+- 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
-- Typescript版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+- Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
 
-群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602)或者关注[微博](https://weibo.com/u/3423485724?is_all=1)
-
-**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
-
-**从`v3.8.0`开始使用`webpack4`。所以若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
+**目前版本为 `4.0-beta`，若发现问题，欢迎提[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)。若你想使用旧版本-稳定版，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)**
 
 **该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
 
+群主 **[圈子](https://jianshiapp.com/circles/1209)** 群主会经常分享一些技术相关的东西，或者加入 [qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602) 或者关注 [微博](https://weibo.com/u/3423485724?is_all=1)
+
 ## 前序准备
 
-你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
+你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
 
-同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
+同时配套了系列教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
 
 - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
 - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
@@ -84,6 +78,7 @@
 </p>
 
 ## Sponsors
+
 Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
 
 <a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
@@ -96,6 +91,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 - 权限验证
   - 页面权限
   - 指令权限
+  - 权限配置
   - 二步登录
 
 - 多环境发布
@@ -108,7 +104,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
   - 动态面包屑
   - 快捷导航(标签页)
   - Svg Sprite 图标
-  - 本地mock数据
+  - 本地/后端 mock 数据
   - Screenfull全屏
   - 自适应收缩侧边栏
 
@@ -119,14 +115,13 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 
 - Excel
   - 导出excel
-  - 导出zip
   - 导入excel
   - 前端可视化excel
+  - 导出zip
 
 - 表格
   - 动态表格
   - 拖拽表格
-  - 树形表格
   - 内联编辑
 
 - 错误页面
@@ -160,6 +155,9 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 # 克隆项目
 git clone https://github.com/PanJiaChen/vue-element-admin.git
 
+# 进入项目目录
+cd vue-element-admin
+
 # 安装依赖
 npm install
 
@@ -176,7 +174,7 @@ npm run dev
 
 ```bash
 # 构建测试环境
-npm run build:sit
+npm run build:stage
 
 # 构建生产环境
 npm run build:prod
@@ -185,19 +183,16 @@ npm run build:prod
 ## 其它
 
 ```bash
-# --report to build with bundle size analytics
-npm run build:prod
-
-# --generate a bundle size analytics. default: bundle-report.html
-npm run build:prod --generate_report
+# 预览发布环境效果
+npm run preview
 
-# --preview to start a server in local to preview
-npm run build:prod --preview
+# 预览发布环境效果 + 静态资源分析
+npm run preview -- --report
 
-# lint code
+# 代码格式检查
 npm run lint
 
-# auto fix
+# 代码格式检查并自动修复
 npm run lint -- --fix
 ```
 
@@ -220,6 +215,8 @@ Detailed changes for each release are documented in the [release notes](https://
 
 [Paypal Me](https://www.paypal.me/panfree23)
 
+[Buy me a coffee](https://www.buymeacoffee.com/Pan)
+
 ## Browsers support
 
 Modern browsers and Internet Explorer 10+.
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..ba179669
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/build/build.js b/build/build.js
deleted file mode 100644
index 34c71a55..00000000
--- a/build/build.js
+++ /dev/null
@@ -1,67 +0,0 @@
-'use strict'
-require('./check-versions')()
-
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.prod.conf')
-var connect = require('connect')
-var serveStatic = require('serve-static')
-
-const spinner = ora(
-  'building for ' + process.env.env_config + ' environment...'
-)
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, (err, stats) => {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(
-      stats.toString({
-        colors: true,
-        modules: false,
-        children: false,
-        chunks: false,
-        chunkModules: false
-      }) + '\n\n'
-    )
-
-    if (stats.hasErrors()) {
-      console.log(chalk.red(' Build failed with errors.\n'))
-      process.exit(1)
-    }
-
-    console.log(chalk.cyan(' Build complete.\n'))
-    console.log(
-      chalk.yellow(
-        ' Tip: built files are meant to be served over an HTTP server.\n' +
-          " Opening index.html over file:// won't work.\n"
-      )
-    )
-
-    if (process.env.npm_config_preview) {
-      const port = 9526
-      const host = 'http://localhost:' + port
-      const basePath = config.build.assetsPublicPath
-      const app = connect()
-
-      app.use(
-        basePath,
-        serveStatic('./dist', {
-          index: ['index.html', '/']
-        })
-      )
-
-      app.listen(port, function() {
-        console.log(
-          chalk.green(`> Listening at  http://localhost:${port}${basePath}`)
-        )
-      })
-    }
-  })
-})
diff --git a/build/check-versions.js b/build/check-versions.js
deleted file mode 100644
index c5c29e90..00000000
--- a/build/check-versions.js
+++ /dev/null
@@ -1,64 +0,0 @@
-'use strict'
-const chalk = require('chalk')
-const semver = require('semver')
-const packageConfig = require('../package.json')
-const shell = require('shelljs')
-
-function exec(cmd) {
-  return require('child_process')
-    .execSync(cmd)
-    .toString()
-    .trim()
-}
-
-const versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  }
-]
-
-if (shell.which('npm')) {
-  versionRequirements.push({
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  })
-}
-
-module.exports = function() {
-  const warnings = []
-
-  for (let i = 0; i < versionRequirements.length; i++) {
-    const mod = versionRequirements[i]
-
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(
-        mod.name +
-          ': ' +
-          chalk.red(mod.currentVersion) +
-          ' should be ' +
-          chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(
-      chalk.yellow(
-        'To use this template, you must update following to modules:'
-      )
-    )
-    console.log()
-
-    for (let i = 0; i < warnings.length; i++) {
-      const warning = warnings[i]
-      console.log('  ' + warning)
-    }
-
-    console.log()
-    process.exit(1)
-  }
-}
diff --git a/build/index.js b/build/index.js
new file mode 100644
index 00000000..baf3807a
--- /dev/null
+++ b/build/index.js
@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}/report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}
diff --git a/build/logo.png b/build/logo.png
deleted file mode 100644
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6849
zcmaKRcUV(fvo}bjDT-7nLI_nlK}sT_69H+`qzVWDA|yaU?}j417wLi^B1KB1SLsC&
zL0ag7$U(XW5YR7p&Ux?s<Na=)C)s<=p5LrlQ`Vj}i8j!?Lr2R_OGZXUr=_WGNV*Q3
zf2k=+zm;ZH`J@Y*r-qrQk(;BZj~xa<rsClC5CPOe**PH$5q1uK9)k!4GBOHYq_LT&
znXV4h-VG&gcg`d3i*hHS$;cFxeBJHrT@aqYhX^Mm8V1^F=>P$d4lvMt8C^+TcQu4F
zQqv!UF!I+kw)c0jhd6+g6oCr9P?7)?!qX1ui*iL{p}sKCAGuJ{{W)0z1pLF|=>h}&
zt(2Lr0Z`2ig8<5i%Zk}cO5Fm=LByqGWaS`oqChZdEFmc`0hSb#gg|Aap^{+WKOYcj
zHjINK)KDG%&s?Mt4CL(T=?;~U@bU2x_mLKN!#GJuK_CzbNw5SMEJorG!}_5;?R>@1
zSl)jns3WlU7^J%=(hUtfmuUCU&C3%8B5C^f5>W2Cy8jW3#{Od{lF1}|?c61##3dzA
zsPlFG;l_FzBK}8>|H_Ru_H#!_7$UH4UKo3lKOA}g1(R&|e@}GINYVzX?q=_WLZCgh
z)L|eJMce`D0EIwgRaNETDsr+?vQknSGAi=7H00r`QnI%oQnFxm`G2umXso9l+8*&Q
z7WqF|$p49js$mdzo^BXpH#gURy=UO;=IMrYc5?@+sR4y_?d*~0^YP7d+y0{}0)zBM
zIKVM(DBvICK#~7N0a+PY6)7;u=dutmNqK3AlsrUU9U`d;msiucB_|8|2kY=(7XA;G
zwDA8AR)VCA#JOkxm#6<Fk;3Qv_CIk;8vG~n5ol7lV@Ppr$`vO}M#g$eOI^j-clMjL
zOPuv5uLtX1JFT#MwySH_RJ4r>oHNS^YVuOU;8p$N)2{`;oF|rQ?B~K$%rHDxXs+_G
zF5|-uqHZvSzq}L;5Kcy_P+x0${33}Ofb6+TX&=y;;PkEOpz%<lxjl%Ocl~M2y2lP|
zbFM`Z-*dEp9W{5_I?FqgKOqcjrGzul_KvvA0B9o^)C&!8LQLB95vnvr20|)KwER)3
zg@AiPX~4f9{zIy9K63eeK%_eUy<Xj$!il}`M9Aai_i>+_bCw_<t<K-?r^}*l>{<&~
zeLV|!bP%l1qxywfVr9Z9JI+++EO^x>ZuCK);=$VIG1`kxK8F2M8AdC$iOe3cj<EWM
zKtfCf^Zg1tRdj=Xm)|^7J1pa)+-CDvXj&R?416f(tgg8|WBR8cdxDx?*Yn+_9!KKY
zYfc;GQgX!L+9q}en#aZ8FKqby@Ji7SuT!4)GFKidFyC9wMywvB3c%^>1fo(ce4l-9
z7*zKy3={MixvUk=enQE;ED~7tv%qh&3lR<0m??@w{ILF|e#QOyPkFYK!&Up7xWNtL
zOW%1QMC<3o;G9_S1;NkPB6bqbCOjeztEc6TsBM<(q9((JKiH{01+Ud=uw9B@{;(JJ
z-DxI2*{pMq`q1RQc;V8@gYAY44Z!%#W~M9pRxI(R?SJ7<UU2Y^EpY^fzuq-h_rtLL
zw8{`NN~<)$oMx`|^gGr>sy7em=Z5DbuDlr@*q|25V)($-f}9c#?D%dU^RS<(wz?{P
zFFHtCab*!rl(~j@0(Nadvwg8q|4!}L^>d?0al6}Rrv9$0M#^&@zjbfJy_n!%mVHK4
z6pLRIQ^Uq~dnyy$`ay51Us6WaP%&O;@49m&{G3z7xV3dLtt1VTOMYl3UW~Rm{Eq4m
zF?Zl_v;?7EFx1_+#WFUXxcK78IV)FO>42@cm@}2I%pVbZqQ}3;p;sDIm&knay03a^
zn$5}Q$G!@fTwD$e(x-~aWP0h+4N<q|;xEwzsU+0W)#|>Rz$Kln<bW)%U3n>O_H2c<
z(XX#lPuW_%H#Q+c&(nRyX1-Ia<yTsbNAz3PBfuh9@JU{>dKR-%$4FYC0fsCmL9ky3
zKpxyjd^JFR+vg2!=HWf}2Z?@Td`0EG`kU?{8zKrvtsm)|7>pPk9nu@2^z96aU2<#`
z2QhvH5w&V;wER?mopu+nqu*n8p~(%Q<o-E#HMmv_6Lr(S<y?zXl02$twV54+g=p_C
zbPW!;qljHcIPw~aX95_u!itzF%xKBH?y!MCRe^`1V@8<G!;_`~Q-@-mUm7r`3Jc*<
zW|jM!A9`X|osT!srEU-27h+^5j<OqNPj-EFHPokG&HB5WAG01lt!13`S9niUI^dz+
zrPE=GX-SXL@wqVGe*HT?V{#O~&~?uH#PoV2h;Vj@x`#d8)T&F})!(j^f1!z+l?Jjx
zylKosI<}}<nHbsk7I?v<<vXs6tPoozmJ}avD&{J7$vR$!Ni~Q@;tH>kwSs&*0eJwa
zMXR05`OSFpfyRb!<VB&Y0bEEVE$hSNXH(0mbzS-;?|O<AG)<R8gmLSuf>Y_+H@O%Y
z0=K^y6B8Gcbl?SA)qMP3Z+=C(?8zL@=74R=EVnE?vY!1BQy2@q*RUgRx4yJ$k}MnL
zs!?74QciNb-LcG*&o<9=DSL>1n}ZNd)w1z3-0Pd^4ED1{qd=9|!!N?xnXjM!EuylY
z5=!H>&hSofh8V?Jofyd!h`xDI1fYAuV(sZwwN~{$a}MX^=+0TH*SFp$vyxmUv7C*W
zv^3Gl0+eTFgBi3FVD;$nhcp)ka*4gSskYIqQ&+M}xP9yLAkWzBI^I%zR^l1e?bW_6
zIn{mo{dD=)9@V?s^fa55jh78rP*Ze<3`tRCN4*mpO$@7a^*2B*7N_|A(Ve2VB|)_o
z$=#_=aBkhe(ifX}MLT()@5?<tMQW)|T904`EDIN{(*~?7PZ%vrUEuUf@Om1Lh8V<U
zqvVYpe+tw_sKHyj#O-VCO5S%E1lshLO74De`Gk2E(7WE#<PpDtbvmnFnSOqG1oI3d
zYC<jZo_G~2KIE6{8;7bJFfC?E4zS>OV+~7cXC3r!%{QJxriXo9I%*3q4KT4Xxzyd{
z9;_%=W%q!Vw$Z7F3lUnY+1HZ*lO;4;VR2+i4+D(m#01OYq|L_fbnT;KN<^dkkCwtd
zF7n+O7KvAw8c`JUh6LmeIrk4`F3o|AagKSMK3))_5Cv~y2Bb2!Ibg9BO7Vkz?pAYX
zoI=B}+$R22&IL`NCYUYjrdhwjnM<dIpta11b@>x_v=-Qcx-jmtN>!Zqf|n1^SWrHy
zK|MwJ?Z#^>)rfT5YSY{qjZ&`Fjd;^vv&gF-Yj6$9-Dy$<6zeP4s+78gS2|t%Z309b
z0^fp~ue_}i`U9j!<|qF92_3oB09NqgAoehQ`)<)dSfKoJl_A6Ec#*Mx9Cpd-p#$Ez
z={AM*r-bQs6*z$!*V<pNyBZpFi*F}aPuOZk!oD1sov}{rrxFZa@)!5H(|DKR-T0B*
zk=XmkSgqtSP+yWN@0aMgOdP>A4|QE7bf@-4vb?Q+pPKLkY2{yKsw{&udv_2v8{Dbd
zm~8VAv!G~s)`O3|Q6vFUV%8%+?ZSVUa(;fhPNg#vab@J*9XE4#D%)$UU-T5`fwjz!
z6&gA^`OGu6aUk{l*h9eB?opVdrHK>Q@U>&JQ_2pR%}TyOXGq_6s56_`U(WoOaAb+K
zXQr#6H}>a-GYs9^bG<C4b$CvneP46N2fi^kmcJjoTXRGgd^g1b&uQ5spV5+b#%y`#
zrU;H~D)utn!YWIi=j;?C-zcJ^D5xZF+#(?rMdp;)?KT1xBnMkmoV;zh&S;rXW6QQx
zWTQ2K14`6wG0eo+=1oSxjIHJc9Zkw+()XT69~5<`ZtDM}Z2bxUwYy3m%<I&~-0+^1
zYtu2vJf--MIxlG~PPDn;z8t5-=$6>P2Y&hSP5gEtW+GVC4=wy0wQk=~%CSXj=GH6q
z-T#s!BV`xZVxm{~jr_ezYRpqqIcXC=Oq`b{lu`Rt(IYr4B91hhVC?yg{ol4WUr3v9
zOAk2LG>CIECZ-WIs0$N}F#eoIUEtZudc7DPYIjzGqDLWk_A4#(<oDDN)6%Ctygl~O
zyPZcr9YCj-jDP7@YK23SJG!MDFZ1)E9`{R$R<J$u)%oUM9#k)$atlYczfhesFXL-4
zvsoG-9l@uTA8QI2Z$HsSvPZlMpB!@DV{4Bs(b)t!a<<4O@H~uuN{fO$vY>LgacooD
z2K4IWs@N`Bddm-{%oy}!k0^i6Yh)uJ1S*90>|bm3TOZxcV|ywHUb(+CeX-o1|LTZM
zwU>dY3R&U)T(}5#Neh?-CWT~@{6Ke@sI)uSuzoah8COy)w)B)aslJmp`WUcjdia-0
zl2Y}&L~XfA`uYQboAJ1;J{XLhYjH){cObH3FDva+^8ioOQy%Z=xyjGLmWMrzfFoH;
zEi3AG`_v+%)&lDJE;iJWJDI@-X9K5O)LD~j*PBe(wu+|%ar~C+LK1+-+lK<ll>=t#
z+Xc+J7qp~5q=B~rD!x78)?1+KUIbYr^5rcl&tB-cTtj+e%{gpZZ4G~6r15+d|J(ky
zjg@@UzMW0k9@S#W(1H{u;Nq(7llJbq;;4t$awM;l&(2s+$l!Ay9^Ge|34CVhr7|BG
z?dAR83smef^frq9V(OH+a+ki#q&-7TkWfFM=5bsGbU(8mC;>QTCWL5ydz9s6k@?+V
zcjiH`VI=59P-(-DWXZ~5DH>B^_H~;4$)KUhnmGo*G!Tq8^LjfUDO)lASN*=#AY_yS
zqW9UX(VOCO&p@kHdUUgsBO0KhXxn1sprK5h8}+>IhX(nSXZKwlNsjk^M|RAaqmCZB
zHBol<PMLlw!1W2AX{4`0(aI-^)x1d_zq-0U*e!X=g^kk>OHYBas@&{PT=R+?d8pZu
zUHfyucQ`(umXSW7o?HQ3H21M`ZJal+%*)SH1B1j6rxTlG3hx1IGJN^M7{$j(9V;MZ
zRKybgVuxKo#XVM+?*yTy{W+XHaU5Jbt-UG33x{u(N-2wmw;zzPH&4DE103HV@ER86
z|FZEmQb|&1s5#`$4!Cm}&`^{(4V}OP$bk`}v6q6rm;P!H)W|2i^e{7lTk2W@jo_9q
z*aw|U7#+g59Fv(5qI`#O-qPj#@_P>PC#I(GSp3DLv7x-dmYK=C7lPF8a)bxb=@)B1
zUZ`EqpXV2dR}B&r`uM}N(TS99ZT0UB%IN|0H%DcVO#T%L_chrgn#m6%x4KE*IMfjX
zJ%4veCEqbXZ`H`F_+fELMC@wuy_ch%t*+Z+1I}wN#C+dRrf2X{1C8=yZ_%Pt6wL_~
zZ2NN-hXOT4P4n$QFO7yYHS-4wF1Xfr-meG9Pn;uK51?hfel`d38k{W)F*|gJLT2#T
z<~>spMu4(mul-8Q3*pf=N4DcI)zzjqAgbE2eOT7~&f1W3VsdD44Ffe;3mJp-V@8UC
z)|qnPc12o~$X-+U@L_lWqv-RtvB~%hLF($%Ew5w>^NR82qC_0F<zVqs?Raxz=2A>B
z)=hP1-OEx?lLi#jnLzH}a;Nvr@JDO-zQWd}#k^an$Kwml;MrD&)sC5b`s0ZkVyPkb
zt}-jOq^%_9>YZe7Y}PhW{a)c39G`kg(P4@kxjcYfgB4XOOcmezdUI7j-!gs7oAo2o
zx(Ph{G+YZ`a%~kzK!HTAA5NXE-7vOFRr5oqY$rH>WI6SFvWmahFav!CfRMM3%8J&c
z*p+%|-fNS_@QrFr(at!JY9jCg9F-%5{nb5Bo~z@Y9m&SHYV`49GAJjA5h~h4(G!Se
zZmK{Bo7ivCfvl}@A-ptkFGcWXAzj3xfl{evi-OG(TaCn1FAHxRc{}B|x+Ua1D=I6M
z!C^ZIvK6aS_c&(=OQDZfm>O`Nxsw{ta&yiYPA~@e#c%N>>#rq)k6Aru-qD4(D^v)y
z*>Rs;YUbD1S8^D(ps6Jbj0K3wJw>L4m)0e(6Pee3Y?gy9i0^bZO?$*sv+xKV?WBlh
zAp*;v6w!a8;A7sLB*g-^<$Z4L7|5jXxxP1}hQZ<55f9<^KJ>^mKlWSGaLcO0=$jem
zWyZkRwe~u{{tU63DlCaS9$Y4CP4f?+wwa(&1ou)b>72yd<aYLC-(YWFHR=3p2C;o@
zP>rFvm`R<qZaNijJ?9e0Ao@J0FQbg1c%wi*X&vhQIV{0-tqBevRs?R)1sbxUT&}HJ
z*KdKSzTFX7&Aa4>j-0`kBJgK@nd(*Eh!(NC{F-@=FnF&Y!q`7){YsLLHf0_B6aHc#
z>WIuHTyJwIH{BJ4)2RtEauC7Yq7Cytc|S<m;S)8!_N`GikUqEGHdRcGU-QPEbp3se
zE7LrqZLNv81NNuz!tDCc*XEM9tD}O}AA<wr-O|Mp0pzPgSb{6jitn>)4^*t8Va3HR
zg=~sN^tp9re@w=GTx$;zOWMjcg-7X3Wk^N$n;&Kf1RgVG2}2L-(0o)54C509C&77i
zrjSi{X*WV=%C17((N^6R4Ya*4#6s_L99RtQ>m(%#nQ#wrRC8Y%yxkH;d!MdY+Tw@r
zjpSnK`;C-U{ATcgaxoEpP0Gf+tx);buOM<s@Z}LbUcXA@TIG=Q@myo%l9hl^&h34x
zu6;dv<5;?t)>lK=01D|J+ROu37qc*rD(w`#O=3*O*w9?biwNoq3WN1`&Wp8TvKj3C
z3HR9ssH7a&Vr<6waJrU<Uz3;wi7<=4xfd1VLN$2P7x}BBS2io@ltlrnmzyIDtt<yX
zAPcqxp4#$=Z%yky_m)4l_cnk`*u)Ahtuv8K{6vhAKMH6ow@c&kpm#&qGLE(Nu?A^>
zdLg!ieYz%U^bmpn%;(V%%ugMk92&?_XX1K@mwnVSE6!&%P%Wdi7_h`CpScvspMx?N
zQUR>oadnG17#hNc$pkTp+9<O}Jes}mOYA)lX@8ntoYG-_HA4-;x|^l1dmnFbnH;3A
zo7RmzjAt!StB&)wt}}Vz$Tx7{+QOd#U@!|=V-Oy>lW+MBKHRZ~7<Tp{OpB;sNJVcO
zP9gJmH&Z2nt++Wk^~d|9`p`s~@#e4h2h+!@-1=fBDgb_osGReiQgZ>4XWUryd)4yd
zj98$%XmIL4(9OnoeO5Fnyn&fpQ9b0h4e6EHHw*l68j;>(ya`g^S&y2{O8U>1*>4zR
zq*WSI_2o$CHQ?x0!wl9bpx|Cm2+kFMR)oMud1%n2=qn5nE&t@Fgr#=Zv2?}wtEz^T
z9rrj=?I<GKR}2`GsAAn<o<uOC`pid<%}8(c`p&zgnk&0rnZ{7Rb)^0-DfYcASTQ0s
zKO0S&yqP5xyM1crewennx~2nl$+FH?k$&4izqT?3*7J(SmJOw`dZb5FYs=|K5XN*~
z@!QVYGRE&)UH{eRL^>H*qI5{G@Rn&}^Z{+TW}mQe<Ew(X_9Cg%_)${IZP(Sf(i}}#
zbP^Uyd)|N;rJ4rvPkN0$CN?X?Bu3o`sBkNx9e)Hk<|kZoor>b9=8b<_a`&Cm#n%n~
zU47MvCBsdXFB1+adOO)03+nczfWa#vwk<X*p?NEOGFg@VXR_YfNi3ZWGup*ZMYLrd
zivdVFWx1f#$rH$D0S;+?%}dLVO}~LftMC3)E?;ORtVD#gO@_oLGdOsk#uT@)CP$RI
z#-#zp;&|vD_rYnvw~2N0Wp+nQ+xVJ$IH9kk(&N_Uad`)ORc-o<^o9v_z)$2HD4jGQ
zI}WMPN93Rji|(>#r{o{dF)QWya9v2nv43Zp3%Ps}($lA02*_g25t;|T{A5snSY?3A
zrRQ~(Ygh_ebltHo1VC<XI}!-0hb>bJb*eOAr;4cnlXLvI>*$-#AVsGg6B1r7@;g^L
zFlJ_th0vxO7;-opU@WA<a+$A0VKV&CD~?Y9W`bM2k~*P|j8E*2CoV8)Cu!IV5;k=`
zm0lA9424u4MQ;9hkajM?rCu<5Nio0ru*d*6!O7wLB^>Fe;<}?!2q?RBrFK5U{<mA*
z;WN^+Hz{=MA9j{=Q!Qyy7=i0XTx(4nT94X=`8CIvSzRT*3@ox%j?(gLc30~Knc##R
z`(0eGu62$+sd#-(+!IS_v$FsA^Q8gK0r%Y15^&Pc`)3fzUE9X{;k8eN8;R}9b;E)`
zT8R>*ai@NLKZ^};Ul}beukveh?TQn;$%9=R+DX07m82gP$=}Uo_%&ngV`}Hyv8g{u
z3SWzTGV|cwQuFIs7ZDOqO_fGf8Q`8MwL}eUp>q?4eqCmOTcwQuXtQckPy|4F1on8l
zP*h>d+cH#XQf|+6c|S{7SF(Lg>bR~l(0uY?O{OEVlaxa5@e%T&xju=o1`=OD#qc16
zSvyH*my(dcp6~VqR;o(#@m44Lug@~_qw+HA=mS#Z^<V!az}@c{ARa+_X}NO~a$=9p
za)_Ly?(LOnFWV{rQbS?1K7hP~fC?!$z}<pP%6*k1O(nj^MX2}V?0EMJUI;+4&As(@
zxYB>4reBy8iV?H~I;{LQWk3aKK8$bLRyt$g?-<xQqj`npk`D=fcL`B%EgjfC99(LE
z!z(C4-ap+uQYSIckaE<2uA^ag^t_eaYn_Jfq@U?vzOdv%t*)||aVad7PZ((`gpV!x
rZ$0M!)qwuD?ff?h#CY04MnNVFTnmG)-+p%fr;?V2o_dw4E$;sThR3J6

diff --git a/build/utils.js b/build/utils.js
deleted file mode 100644
index c96d0936..00000000
--- a/build/utils.js
+++ /dev/null
@@ -1,108 +0,0 @@
-'use strict'
-const path = require('path')
-const config = require('../config')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const packageConfig = require('../package.json')
-
-exports.assetsPath = function(_path) {
-  const assetsSubDirectory =
-    process.env.NODE_ENV === 'production'
-      ? config.build.assetsSubDirectory
-      : config.dev.assetsSubDirectory
-
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function(options) {
-  options = options || {}
-
-  const cssLoader = {
-    loader: 'css-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  const postcssLoader = {
-    loader: 'postcss-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  function generateLoaders(loader, loaderOptions) {
-    const loaders = []
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      loaders.push(MiniCssExtractPlugin.loader)
-    } else {
-      loaders.push('vue-style-loader')
-    }
-
-    loaders.push(cssLoader)
-
-    if (options.usePostCSS) {
-      loaders.push(postcssLoader)
-    }
-
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-
-    return loaders
-  }
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', {
-      indentedSyntax: true
-    }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function(options) {
-  const output = []
-  const loaders = exports.cssLoaders(options)
-
-  for (const extension in loaders) {
-    const loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-
-  return output
-}
-
-exports.createNotifierCallback = () => {
-  const notifier = require('node-notifier')
-
-  return (severity, errors) => {
-    if (severity !== 'error') return
-
-    const error = errors[0]
-    const filename = error.file && error.file.split('!').pop()
-
-    notifier.notify({
-      title: packageConfig.name,
-      message: severity + ': ' + error.name,
-      subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
-    })
-  }
-}
diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
deleted file mode 100644
index 5496c931..00000000
--- a/build/vue-loader.conf.js
+++ /dev/null
@@ -1,5 +0,0 @@
-'use strict'
-
-module.exports = {
-  //You can set the vue-loader configuration by yourself.
-}
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
deleted file mode 100644
index 3b946b4b..00000000
--- a/build/webpack.base.conf.js
+++ /dev/null
@@ -1,107 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const config = require('../config')
-const { VueLoaderPlugin } = require('vue-loader')
-const vueLoaderConfig = require('./vue-loader.conf')
-
-function resolve(dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const createLintingRule = () => ({
-  test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
-  options: {
-    formatter: require('eslint-friendly-formatter'),
-    emitWarning: !config.dev.showEslintErrorsInOverlay
-  }
-})
-
-module.exports = {
-  context: path.resolve(__dirname, '../'),
-  entry: {
-    app: './src/main.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath:
-      process.env.NODE_ENV === 'production'
-        ? config.build.assetsPublicPath
-        : config.dev.assetsPublicPath
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      '@': resolve('src')
-    }
-  },
-  module: {
-    rules: [
-      ...(config.dev.useEslint ? [createLintingRule()] : []),
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader?cacheDirectory',
-        include: [
-          resolve('src'),
-          resolve('test'),
-          resolve('node_modules/webpack-dev-server/client')
-        ]
-      },
-      {
-        test: /\.svg$/,
-        loader: 'svg-sprite-loader',
-        include: [resolve('src/icons')],
-        options: {
-          symbolId: 'icon-[name]'
-        }
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        exclude: [resolve('src/icons')],
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
-  plugins: [new VueLoaderPlugin()],
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
-}
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
deleted file mode 100644
index 26a5584a..00000000
--- a/build/webpack.dev.conf.js
+++ /dev/null
@@ -1,98 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
-
-function resolve(dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const HOST = process.env.HOST
-const PORT = process.env.PORT && Number(process.env.PORT)
-
-const devWebpackConfig = merge(baseWebpackConfig, {
-  mode: 'development',
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.dev.cssSourceMap,
-      usePostCSS: true
-    })
-  },
-  // cheap-module-eval-source-map is faster for development
-  devtool: config.dev.devtool,
-
-  // these devServer options should be customized in /config/index.js
-  devServer: {
-    clientLogLevel: 'warning',
-    historyApiFallback: true,
-    hot: true,
-    compress: true,
-    host: HOST || config.dev.host,
-    port: PORT || config.dev.port,
-    open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay
-      ? { warnings: false, errors: true }
-      : false,
-    publicPath: config.dev.assetsPublicPath,
-    proxy: config.dev.proxyTable,
-    quiet: true, // necessary for FriendlyErrorsPlugin
-    watchOptions: {
-      poll: config.dev.poll
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../config/dev.env')
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true,
-      favicon: resolve('favicon.ico'),
-      title: 'vue-element-admin',
-      templateParameters: {
-        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory,
-      },
-    }),
-  ]
-})
-
-module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
-  portfinder.getPort((err, port) => {
-    if (err) {
-      reject(err)
-    } else {
-      // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
-      // add port to devServer config
-      devWebpackConfig.devServer.port = port
-
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(
-        new FriendlyErrorsPlugin({
-          compilationSuccessInfo: {
-            messages: [
-              `Your application is running here: http://${
-                devWebpackConfig.devServer.host
-              }:${port}`
-            ]
-          },
-          onErrors: config.dev.notifyOnErrors
-            ? utils.createNotifierCallback()
-            : undefined
-        })
-      )
-
-      resolve(devWebpackConfig)
-    }
-  })
-})
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
deleted file mode 100644
index 4f84e0c6..00000000
--- a/build/webpack.prod.conf.js
+++ /dev/null
@@ -1,187 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-
-function resolve(dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const env = require('../config/' + process.env.env_config + '.env')
-
-// For NamedChunksPlugin
-const seen = new Set()
-const nameLength = 4
-
-const webpackConfig = merge(baseWebpackConfig, {
-  mode: 'production',
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true,
-      usePostCSS: true
-    })
-  },
-  devtool: config.build.productionSourceMap ? config.build.devtool : false,
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
-    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    // extract css into its own file
-    new MiniCssExtractPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash:8].css'),
-      chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: config.build.index,
-      template: 'index.html',
-      inject: true,
-      favicon: resolve('favicon.ico'),
-      title: 'vue-element-admin',
-      templateParameters: {
-        BASE_URL: config.build.assetsPublicPath + config.build.assetsSubDirectory,
-      },
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      }
-      // default sort mode uses toposort which cannot handle cyclic deps
-      // in certain cases, and in webpack 4, chunk order in HTML doesn't
-      // matter anyway
-    }),
-    new ScriptExtHtmlWebpackPlugin({
-      //`runtime` must same as runtimeChunk name. default is `runtime`
-      inline: /runtime\..*\.js$/
-    }),
-    // keep chunk.id stable when chunk has no name
-    new webpack.NamedChunksPlugin(chunk => {
-      if (chunk.name) {
-        return chunk.name
-      }
-      const modules = Array.from(chunk.modulesIterable)
-      if (modules.length > 1) {
-        const hash = require('hash-sum')
-        const joinedHash = hash(modules.map(m => m.id).join('_'))
-        let len = nameLength
-        while (seen.has(joinedHash.substr(0, len))) len++
-        seen.add(joinedHash.substr(0, len))
-        return `chunk-${joinedHash.substr(0, len)}`
-      } else {
-        return modules[0].id
-      }
-    }),
-    // keep module.id stable when vender modules does not change
-    new webpack.HashedModuleIdsPlugin(),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ],
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      cacheGroups: {
-        libs: {
-          name: 'chunk-libs',
-          test: /[\\/]node_modules[\\/]/,
-          priority: 10,
-          chunks: 'initial' // 只打包初始时依赖的第三方
-        },
-        elementUI: {
-          name: 'chunk-elementUI', // 单独将 elementUI 拆包
-          priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
-          test: /[\\/]node_modules[\\/]element-ui[\\/]/
-        },
-        commons: {
-          name: 'chunk-commons',
-          test: resolve('src/components'), // 可自定义拓展你的规则
-          minChunks: 3, // 最小公用次数
-          priority: 5,
-          reuseExistingChunk: true
-        }
-      }
-    },
-    runtimeChunk: 'single',
-    minimizer: [
-      new UglifyJsPlugin({
-        uglifyOptions: {
-          mangle: {
-            safari10: true
-          }
-        },
-        sourceMap: config.build.productionSourceMap,
-        cache: true,
-        parallel: true
-      }),
-      // Compress extracted CSS. We are using this plugin so that possible
-      // duplicated CSS from different components can be deduped.
-      new OptimizeCSSAssetsPlugin()
-    ]
-  }
-})
-
-if (config.build.productionGzip) {
-  const CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-    .BundleAnalyzerPlugin
-
-  if (config.build.bundleAnalyzerReport) {
-    webpackConfig.plugins.push(
-      new BundleAnalyzerPlugin({
-        analyzerPort: 8080,
-        generateStatsFile: false
-      })
-    )
-  }
-
-  if (config.build.generateAnalyzerReport) {
-    webpackConfig.plugins.push(
-      new BundleAnalyzerPlugin({
-        analyzerMode: 'static',
-        reportFilename: 'bundle-report.html',
-        openAnalyzer: false
-      })
-    )
-  }
-}
-
-module.exports = webpackConfig
diff --git a/config/dev.env.js b/config/dev.env.js
deleted file mode 100644
index 68ddea56..00000000
--- a/config/dev.env.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  NODE_ENV: '"development"',
-  ENV_CONFIG: '"dev"',
-  BASE_API: '"https://api-dev"'
-}
diff --git a/config/index.js b/config/index.js
deleted file mode 100644
index 599e4a63..00000000
--- a/config/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-'use strict'
-// Template version: 1.2.6
-// see http://vuejs-templates.github.io/webpack for documentation.
-
-const path = require('path')
-
-module.exports = {
-  dev: {
-    // Paths
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
-
-    // Various Dev Server settings
-
-    // can be overwritten by process.env.HOST
-    // if you want dev by ip, please set host: '0.0.0.0'
-    host: 'localhost',
-    port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: true,
-    errorOverlay: true,
-    notifyOnErrors: false,
-    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
-
-    // Use Eslint Loader?
-    // If true, your code will be linted during bundling and
-    // linting errors and warnings will be shown in the console.
-    useEslint: true,
-    // If true, eslint errors and warnings will also be shown in the error overlay
-    // in the browser.
-    showEslintErrorsInOverlay: false,
-
-    /**
-     * Source Maps
-     */
-
-    // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-source-map',
-
-    // CSS Sourcemaps off by default because relative paths are "buggy"
-    // with this option, according to the CSS-Loader README
-    // (https://github.com/webpack/css-loader#sourcemaps)
-    // In our experience, they generally work as expected,
-    // just be aware of this issue when enabling this option.
-    cssSourceMap: false
-  },
-
-  build: {
-    // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
-
-    // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-
-    /**
-     * You can set by youself according to actual condition
-     * You will need to set this if you plan to deploy your site under a sub path,
-     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
-     * then assetsPublicPath should be set to "/bar/".
-     * In most cases please use '/' !!!
-     */
-    assetsPublicPath: '/',
-
-    /**
-     * Source Maps
-     */
-    productionSourceMap: false,
-    // https://webpack.js.org/configuration/devtool/#production
-    devtool: 'source-map',
-
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
-
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build:prod --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report || false,
-
-    // `npm run build:prod --generate_report`
-    generateAnalyzerReport: process.env.npm_config_generate_report || false
-  }
-}
diff --git a/config/prod.env.js b/config/prod.env.js
deleted file mode 100644
index bfcd6d27..00000000
--- a/config/prod.env.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  NODE_ENV: '"production"',
-  ENV_CONFIG: '"prod"',
-  BASE_API: '"https://api-prod"'
-}
diff --git a/config/sit.env.js b/config/sit.env.js
deleted file mode 100644
index 93178e80..00000000
--- a/config/sit.env.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  NODE_ENV: '"production"',
-  ENV_CONFIG: '"sit"',
-  BASE_API: '"https://api-sit"'
-}
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 00000000..1ce813e1
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,27 @@
+module.exports = {
+  verbose: true,
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(babel-jest|jest-vue-preprocessor)/)'
+  ],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  // 'collectCoverage': true,
+  'coverageReporters': [
+    'lcov',
+    'text-summary'
+  ],
+  testURL: 'http://localhost/'
+}
diff --git a/mock/article.js b/mock/article.js
new file mode 100644
index 00000000..45b75296
--- /dev/null
+++ b/mock/article.js
@@ -0,0 +1,116 @@
+import Mock from 'mockjs'
+
+const List = []
+const count = 100
+
+const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
+const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+
+for (let i = 0; i < count; i++) {
+  List.push(Mock.mock({
+    id: '@increment',
+    timestamp: +Mock.Random.date('T'),
+    author: '@first',
+    reviewer: '@first',
+    title: '@title(5, 10)',
+    content_short: 'mock data',
+    content: baseContent,
+    forecast: '@float(0, 100, 2, 2)',
+    importance: '@integer(1, 3)',
+    'type|1': ['CN', 'US', 'JP', 'EU'],
+    'status|1': ['published', 'draft', 'deleted'],
+    display_time: '@datetime',
+    comment_disabled: true,
+    pageviews: '@integer(300, 5000)',
+    image_uri,
+    platforms: ['a-platform']
+  }))
+}
+
+export default [
+  {
+    url: '/article/list',
+    type: 'get',
+    response: config => {
+      const { importance, type, title, page = 1, limit = 20, sort } = config.query
+
+      let mockList = List.filter(item => {
+        if (importance && item.importance !== +importance) return false
+        if (type && item.type !== type) return false
+        if (title && item.title.indexOf(title) < 0) return false
+        return true
+      })
+
+      if (sort === '-id') {
+        mockList = mockList.reverse()
+      }
+
+      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
+
+      return {
+        code: 20000,
+        data: {
+          total: mockList.length,
+          items: pageList
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/detail',
+    type: 'get',
+    response: config => {
+      const { id } = config.query
+      for (const article of List) {
+        if (article.id === +id) {
+          return {
+            code: 20000,
+            data: article
+          }
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/pv',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: {
+          pvData: [
+            { key: 'PC', pv: 1024 },
+            { key: 'mobile', pv: 1024 },
+            { key: 'ios', pv: 1024 },
+            { key: 'android', pv: 1024 }
+          ]
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/create',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  },
+
+  {
+    url: '/article/update',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]
+
diff --git a/mock/index.js b/mock/index.js
new file mode 100644
index 00000000..15e07afa
--- /dev/null
+++ b/mock/index.js
@@ -0,0 +1,54 @@
+import Mock from 'mockjs'
+import mocks from './mocks'
+import { param2Obj } from '../src/utils'
+
+const MOCK_API_BASE = '/mock'
+
+export function mockXHR() {
+  // 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
+  // https://github.com/nuysoft/Mock/issues/300
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function() {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+      this.custom.xhr.responseType = this.responseType
+    }
+    this.proxy_send(...arguments)
+  }
+
+  function XHR2ExpressReqWrap(respond) {
+    return function(options) {
+      let result = null
+      if (respond instanceof Function) {
+        const { body, type, url } = options
+        // https://expressjs.com/en/4x/api.html#req
+        result = respond({
+          method: type,
+          body: JSON.parse(body),
+          query: param2Obj(url)
+        })
+      } else {
+        result = respond
+      }
+      return Mock.mock(result)
+    }
+  }
+
+  for (const i of mocks) {
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+  }
+}
+
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`${MOCK_API_BASE}${url}`),
+    type: type || 'get',
+    response(req, res) {
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+
+export default mocks.map(route => {
+  return responseFake(route.url, route.type, route.response)
+})
diff --git a/mock/mocks.js b/mock/mocks.js
new file mode 100644
index 00000000..84a25ddc
--- /dev/null
+++ b/mock/mocks.js
@@ -0,0 +1,12 @@
+import user from './user'
+import role from './role'
+import article from './article'
+import search from './remoteSearch'
+
+export default [
+  ...user,
+  ...role,
+  ...article,
+  ...search
+]
+
diff --git a/mock/remoteSearch.js b/mock/remoteSearch.js
new file mode 100644
index 00000000..bb33c2f4
--- /dev/null
+++ b/mock/remoteSearch.js
@@ -0,0 +1,51 @@
+import Mock from 'mockjs'
+
+const NameList = []
+const count = 100
+
+for (let i = 0; i < count; i++) {
+  NameList.push(Mock.mock({
+    name: '@first'
+  }))
+}
+NameList.push({ name: 'mock-Pan' })
+
+export default [
+  // username search
+  {
+    url: '/search/user',
+    type: 'get',
+    response: config => {
+      const { name } = config.query
+      const mockNameList = NameList.filter(item => {
+        const lowerCaseName = item.name.toLowerCase()
+        return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
+      })
+      return {
+        code: 20000,
+        data: { items: mockNameList }
+      }
+    }
+  },
+
+  // transaction list
+  {
+    url: '/transaction/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: {
+          total: 20,
+          'items|20': [{
+            order_no: '@guid()',
+            timestamp: +Mock.Random.date('T'),
+            username: '@name()',
+            price: '@float(1000, 15000, 0, 2)',
+            'status|1': ['success', 'pending']
+          }]
+        }
+      }
+    }
+  }
+]
diff --git a/mock/role/index.js b/mock/role/index.js
new file mode 100644
index 00000000..39148076
--- /dev/null
+++ b/mock/role/index.js
@@ -0,0 +1,98 @@
+import Mock from 'mockjs'
+import { deepClone } from '../../src/utils/index.js'
+import { asyncRoutes, constantRoutes } from './routes.js'
+
+const routes = deepClone([...constantRoutes, ...asyncRoutes])
+
+const roles = [
+  {
+    key: 'admin',
+    name: 'admin',
+    description: 'Super Administrator. Have access to view all pages.',
+    routes: routes
+  },
+  {
+    key: 'editor',
+    name: 'editor',
+    description: 'Normal Editor. Can see all pages except permission page',
+    routes: routes.filter(i => i.path !== '/permission')// just a mock
+  },
+  {
+    key: 'visitor',
+    name: 'visitor',
+    description: 'Just a visitor. Can only see the home page and the document page',
+    routes: [{
+      path: '',
+      redirect: 'dashboard',
+      children: [
+        {
+          path: 'dashboard',
+          name: 'Dashboard',
+          meta: { title: 'dashboard', icon: 'dashboard' }
+        }
+      ]
+    }]
+  }
+]
+
+export default [
+  // mock get all routes form server
+  {
+    url: '/routes',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: routes
+      }
+    }
+  },
+
+  // mock get all roles form server
+  {
+    url: '/roles',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: roles
+      }
+    }
+  },
+
+  // add role
+  {
+    url: '/role',
+    type: 'post',
+    response: {
+      code: 20000,
+      data: {
+        key: Mock.mock('@integer(300, 5000)')
+      }
+    }
+  },
+
+  // update role
+  {
+    url: '/role/[A-Za-z0-9]',
+    type: 'put',
+    response: {
+      code: 20000,
+      data: {
+        status: 'success'
+      }
+    }
+  },
+
+  // delete role
+  {
+    url: '/role/[A-Za-z0-9]',
+    type: 'delete',
+    response: {
+      code: 20000,
+      data: {
+        status: 'success'
+      }
+    }
+  }
+]
diff --git a/mock/role/routes.js b/mock/role/routes.js
new file mode 100644
index 00000000..d8eaf42a
--- /dev/null
+++ b/mock/role/routes.js
@@ -0,0 +1,525 @@
+// Just a mock data
+
+export const constantRoutes = [
+  {
+    path: '/redirect',
+    component: 'layout/Layout',
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path*',
+        component: 'views/redirect/index'
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: 'views/login/index',
+    hidden: true
+  },
+  {
+    path: '/auth-redirect',
+    component: 'views/login/authredirect',
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: 'views/errorPage/404',
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: 'views/errorPage/401',
+    hidden: true
+  },
+  {
+    path: '',
+    component: 'layout/Layout',
+    redirect: 'dashboard',
+    children: [
+      {
+        path: 'dashboard',
+        component: 'views/dashboard/index',
+        name: 'Dashboard',
+        meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }
+      }
+    ]
+  },
+  {
+    path: '/documentation',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/documentation/index',
+        name: 'Documentation',
+        meta: { title: 'documentation', icon: 'documentation', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/guide',
+    component: 'layout/Layout',
+    redirect: '/guide/index',
+    children: [
+      {
+        path: 'index',
+        component: 'views/guide/index',
+        name: 'Guide',
+        meta: { title: 'guide', icon: 'guide', noCache: true }
+      }
+    ]
+  }
+]
+
+export const asyncRoutes = [
+  {
+    path: '/permission',
+    component: 'layout/Layout',
+    redirect: '/permission/index',
+    alwaysShow: true,
+    meta: {
+      title: 'permission',
+      icon: 'lock',
+      roles: ['admin', 'editor']
+    },
+    children: [
+      {
+        path: 'page',
+        component: 'views/permission/page',
+        name: 'PagePermission',
+        meta: {
+          title: 'pagePermission',
+          roles: ['admin']
+        }
+      },
+      {
+        path: 'directive',
+        component: 'views/permission/directive',
+        name: 'DirectivePermission',
+        meta: {
+          title: 'directivePermission'
+        }
+      },
+      {
+        path: 'role',
+        component: 'views/permission/role',
+        name: 'RolePermission',
+        meta: {
+          title: 'rolePermission',
+          roles: ['admin']
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/icon',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/svg-icons/index',
+        name: 'Icons',
+        meta: { title: 'icons', icon: 'icon', noCache: true }
+      }
+    ]
+  },
+
+  {
+    path: '/components',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    name: 'ComponentDemo',
+    meta: {
+      title: 'components',
+      icon: 'component'
+    },
+    children: [
+      {
+        path: 'tinymce',
+        component: 'views/components-demo/tinymce',
+        name: 'TinymceDemo',
+        meta: { title: 'tinymce' }
+      },
+      {
+        path: 'markdown',
+        component: 'views/components-demo/markdown',
+        name: 'MarkdownDemo',
+        meta: { title: 'markdown' }
+      },
+      {
+        path: 'json-editor',
+        component: 'views/components-demo/jsonEditor',
+        name: 'JsonEditorDemo',
+        meta: { title: 'jsonEditor' }
+      },
+      {
+        path: 'splitpane',
+        component: 'views/components-demo/splitpane',
+        name: 'SplitpaneDemo',
+        meta: { title: 'splitPane' }
+      },
+      {
+        path: 'avatar-upload',
+        component: 'views/components-demo/avatarUpload',
+        name: 'AvatarUploadDemo',
+        meta: { title: 'avatarUpload' }
+      },
+      {
+        path: 'dropzone',
+        component: 'views/components-demo/dropzone',
+        name: 'DropzoneDemo',
+        meta: { title: 'dropzone' }
+      },
+      {
+        path: 'sticky',
+        component: 'views/components-demo/sticky',
+        name: 'StickyDemo',
+        meta: { title: 'sticky' }
+      },
+      {
+        path: 'count-to',
+        component: 'views/components-demo/countTo',
+        name: 'CountToDemo',
+        meta: { title: 'countTo' }
+      },
+      {
+        path: 'mixin',
+        component: 'views/components-demo/mixin',
+        name: 'ComponentMixinDemo',
+        meta: { title: 'componentMixin' }
+      },
+      {
+        path: 'back-to-top',
+        component: 'views/components-demo/backToTop',
+        name: 'BackToTopDemo',
+        meta: { title: 'backToTop' }
+      },
+      {
+        path: 'drag-dialog',
+        component: 'views/components-demo/dragDialog',
+        name: 'DragDialogDemo',
+        meta: { title: 'dragDialog' }
+      },
+      {
+        path: 'drag-select',
+        component: 'views/components-demo/dragSelect',
+        name: 'DragSelectDemo',
+        meta: { title: 'dragSelect' }
+      },
+      {
+        path: 'dnd-list',
+        component: 'views/components-demo/dndList',
+        name: 'DndListDemo',
+        meta: { title: 'dndList' }
+      },
+      {
+        path: 'drag-kanban',
+        component: 'views/components-demo/dragKanban',
+        name: 'DragKanbanDemo',
+        meta: { title: 'dragKanban' }
+      }
+    ]
+  },
+  {
+    path: '/charts',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    name: 'Charts',
+    meta: {
+      title: 'charts',
+      icon: 'chart'
+    },
+    children: [
+      {
+        path: 'keyboard',
+        component: 'views/charts/keyboard',
+        name: 'KeyboardChart',
+        meta: { title: 'keyboardChart', noCache: true }
+      },
+      {
+        path: 'line',
+        component: 'views/charts/line',
+        name: 'LineChart',
+        meta: { title: 'lineChart', noCache: true }
+      },
+      {
+        path: 'mixchart',
+        component: 'views/charts/mixChart',
+        name: 'MixChart',
+        meta: { title: 'mixChart', noCache: true }
+      }
+    ]
+  },
+  {
+    path: '/nested',
+    component: 'layout/Layout',
+    redirect: '/nested/menu1/menu1-1',
+    name: 'Nested',
+    meta: {
+      title: 'nested',
+      icon: 'nested'
+    },
+    children: [
+      {
+        path: 'menu1',
+        component: 'views/nested/menu1/index',
+        name: 'Menu1',
+        meta: { title: 'menu1' },
+        redirect: '/nested/menu1/menu1-1',
+        children: [
+          {
+            path: 'menu1-1',
+            component: 'views/nested/menu1/menu1-1',
+            name: 'Menu1-1',
+            meta: { title: 'menu1-1' }
+          },
+          {
+            path: 'menu1-2',
+            component: 'views/nested/menu1/menu1-2',
+            name: 'Menu1-2',
+            redirect: '/nested/menu1/menu1-2/menu1-2-1',
+            meta: { title: 'menu1-2' },
+            children: [
+              {
+                path: 'menu1-2-1',
+                component: 'views/nested/menu1/menu1-2/menu1-2-1',
+                name: 'Menu1-2-1',
+                meta: { title: 'menu1-2-1' }
+              },
+              {
+                path: 'menu1-2-2',
+                component: 'views/nested/menu1/menu1-2/menu1-2-2',
+                name: 'Menu1-2-2',
+                meta: { title: 'menu1-2-2' }
+              }
+            ]
+          },
+          {
+            path: 'menu1-3',
+            component: 'views/nested/menu1/menu1-3',
+            name: 'Menu1-3',
+            meta: { title: 'menu1-3' }
+          }
+        ]
+      },
+      {
+        path: 'menu2',
+        name: 'Menu2',
+        component: 'views/nested/menu2/index',
+        meta: { title: 'menu2' }
+      }
+    ]
+  },
+
+  {
+    path: '/example',
+    component: 'layout/Layout',
+    redirect: '/example/list',
+    name: 'Example',
+    meta: {
+      title: 'example',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: 'views/example/create',
+        name: 'CreateArticle',
+        meta: { title: 'createArticle', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id(\\d+)',
+        component: 'views/example/edit',
+        name: 'EditArticle',
+        meta: { title: 'editArticle', noCache: true },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: 'views/example/list',
+        name: 'ArticleList',
+        meta: { title: 'articleList', icon: 'list' }
+      }
+    ]
+  },
+
+  {
+    path: '/tab',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/tab/index',
+        name: 'Tab',
+        meta: { title: 'tab', icon: 'tab' }
+      }
+    ]
+  },
+
+  {
+    path: '/error',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    name: 'ErrorPages',
+    meta: {
+      title: 'errorPages',
+      icon: '404'
+    },
+    children: [
+      {
+        path: '401',
+        component: 'views/errorPage/401',
+        name: 'Page401',
+        meta: { title: 'page401', noCache: true }
+      },
+      {
+        path: '404',
+        component: 'views/errorPage/404',
+        name: 'Page404',
+        meta: { title: 'page404', noCache: true }
+      }
+    ]
+  },
+
+  {
+    path: '/error-log',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'log',
+        component: 'views/errorLog/index',
+        name: 'ErrorLog',
+        meta: { title: 'errorLog', icon: 'bug' }
+      }
+    ]
+  },
+
+  {
+    path: '/excel',
+    component: 'layout/Layout',
+    redirect: '/excel/export-excel',
+    name: 'Excel',
+    meta: {
+      title: 'excel',
+      icon: 'excel'
+    },
+    children: [
+      {
+        path: 'export-excel',
+        component: 'views/excel/exportExcel',
+        name: 'ExportExcel',
+        meta: { title: 'exportExcel' }
+      },
+      {
+        path: 'export-selected-excel',
+        component: 'views/excel/selectExcel',
+        name: 'SelectExcel',
+        meta: { title: 'selectExcel' }
+      },
+      {
+        path: 'export-merge-header',
+        component: 'views/excel/mergeHeader',
+        name: 'MergeHeader',
+        meta: { title: 'mergeHeader' }
+      },
+      {
+        path: 'upload-excel',
+        component: 'views/excel/uploadExcel',
+        name: 'UploadExcel',
+        meta: { title: 'uploadExcel' }
+      }
+    ]
+  },
+
+  {
+    path: '/zip',
+    component: 'layout/Layout',
+    redirect: '/zip/download',
+    alwaysShow: true,
+    meta: { title: 'zip', icon: 'zip' },
+    children: [
+      {
+        path: 'download',
+        component: 'views/zip/index',
+        name: 'ExportZip',
+        meta: { title: 'exportZip' }
+      }
+    ]
+  },
+
+  {
+    path: '/pdf',
+    component: 'layout/Layout',
+    redirect: '/pdf/index',
+    children: [
+      {
+        path: 'index',
+        component: 'views/pdf/index',
+        name: 'PDF',
+        meta: { title: 'pdf', icon: 'pdf' }
+      }
+    ]
+  },
+  {
+    path: '/pdf/download',
+    component: 'views/pdf/download',
+    hidden: true
+  },
+
+  {
+    path: '/theme',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'index',
+        component: 'views/theme/index',
+        name: 'Theme',
+        meta: { title: 'theme', icon: 'theme' }
+      }
+    ]
+  },
+
+  {
+    path: '/clipboard',
+    component: 'layout/Layout',
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'index',
+        component: 'views/clipboard/index',
+        name: 'ClipboardDemo',
+        meta: { title: 'clipboardDemo', icon: 'clipboard' }
+      }
+    ]
+  },
+
+  {
+    path: '/i18n',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/i18n-demo/index',
+        name: 'I18n',
+        meta: { title: 'i18n', icon: 'international' }
+      }
+    ]
+  },
+
+  {
+    path: 'external-link',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'https://github.com/PanJiaChen/vue-element-admin',
+        meta: { title: 'externalLink', icon: 'link' }
+      }
+    ]
+  },
+
+  { path: '*', redirect: '/404', hidden: true }
+]
diff --git a/mock/user.js b/mock/user.js
new file mode 100644
index 00000000..43f93a04
--- /dev/null
+++ b/mock/user.js
@@ -0,0 +1,84 @@
+
+const tokens = {
+  admin: {
+    token: 'admin-token'
+  },
+  editor: {
+    token: 'editor-token'
+  }
+}
+
+const users = {
+  'admin-token': {
+    roles: ['admin'],
+    introduction: 'I am a super administrator',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Super Admin'
+  },
+  'editor-token': {
+    roles: ['editor'],
+    introduction: 'I am an editor',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Normal Editor'
+  }
+}
+
+export default [
+  // user login
+  {
+    url: '/user/login',
+    type: 'post',
+    response: config => {
+      const { username } = config.body
+      const token = tokens[username]
+
+      // mock error
+      if (!token) {
+        return {
+          code: 60204,
+          message: 'Account and password are incorrect.'
+        }
+      }
+
+      return {
+        code: 20000,
+        data: token
+      }
+    }
+  },
+
+  // get user info
+  {
+    url: '/user/info\.*',
+    type: 'get',
+    response: config => {
+      const { token } = config.query
+      const info = users[token]
+
+      // mock error
+      if (!info) {
+        return {
+          code: 50008,
+          message: 'Login failed, unable to get user details.'
+        }
+      }
+
+      return {
+        code: 20000,
+        data: info
+      }
+    }
+  },
+
+  // user logout
+  {
+    url: '/user/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]
diff --git a/package.json b/package.json
index 86c334f2..12bf3ffc 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,24 @@
 {
   "name": "vue-element-admin",
-  "version": "3.11.0",
-  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
+  "version": "4.0.0",
+  "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
-    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src",
-    "test": "npm run lint",
-    "precommit": "lint-staged",
-    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+    "test:unit": "vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "new": "plop"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   },
   "lint-staged": {
     "src/**/*.{js,vue}": [
@@ -21,10 +28,12 @@
   },
   "keywords": [
     "vue",
-    "element-ui",
     "admin",
-    "management-system",
-    "admin-template"
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
   ],
   "repository": {
     "type": "git",
@@ -35,93 +44,64 @@
   },
   "dependencies": {
     "axios": "0.18.0",
-    "clipboard": "1.7.1",
-    "codemirror": "5.39.2",
-    "driver.js": "0.8.1",
-    "dropzone": "5.2.0",
-    "echarts": "4.1.0",
-    "element-ui": "2.4.11",
-    "file-saver": "1.3.8",
-    "fuse.js": "3.4.2",
+    "clipboard": "2.0.4",
+    "codemirror": "5.45.0",
+    "driver.js": "0.9.5",
+    "dropzone": "5.5.1",
+    "echarts": "4.2.1",
+    "element-ui": "2.7.0",
+    "file-saver": "2.0.1",
+    "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
-    "jszip": "3.1.5",
-    "mockjs": "1.0.1-beta3",
+    "jszip": "3.2.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "screenfull": "4.0.0",
-    "showdown": "1.8.6",
-    "sortablejs": "1.7.0",
-    "tui-editor": "1.2.7",
-    "vue": "2.5.17",
+    "path-to-regexp": "2.4.0",
+    "screenfull": "4.2.0",
+    "showdown": "1.9.0",
+    "sortablejs": "1.8.4",
+    "tui-editor": "1.3.3",
+    "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.2",
-    "vue-splitpane": "1.0.2",
-    "vuedraggable": "^2.16.0",
-    "vuex": "3.0.1",
-    "xlsx": "^0.11.16"
+    "vue-splitpane": "1.0.4",
+    "vuedraggable": "2.20.0",
+    "vuex": "3.1.0",
+    "xlsx": "0.14.1"
   },
   "devDependencies": {
-    "autoprefixer": "8.5.0",
-    "babel-core": "6.26.3",
-    "babel-eslint": "8.2.6",
-    "babel-helper-vue-jsx-merge-props": "2.0.3",
-    "babel-loader": "7.1.5",
-    "babel-plugin-dynamic-import-node": "2.0.0",
-    "babel-plugin-syntax-jsx": "6.18.0",
-    "babel-plugin-transform-runtime": "6.23.0",
-    "babel-plugin-transform-vue-jsx": "3.7.0",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-stage-2": "6.24.1",
-    "chalk": "2.4.1",
-    "compression-webpack-plugin": "2.0.0",
+    "@babel/core": "7.0.0",
+    "@babel/register": "7.0.0",
+    "@vue/cli-plugin-babel": "3.5.3",
+    "@vue/cli-plugin-unit-jest": "3.5.3",
+    "@vue/cli-service": "3.5.3",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
     "connect": "3.6.6",
-    "copy-webpack-plugin": "4.5.2",
-    "cross-env": "5.2.0",
-    "css-loader": "1.0.0",
-    "eslint": "5.15.2",
-    "eslint-friendly-formatter": "4.0.1",
-    "eslint-loader": "2.1.2",
+    "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
-    "file-loader": "1.1.11",
-    "friendly-errors-webpack-plugin": "1.7.0",
-    "hash-sum": "1.0.2",
-    "html-webpack-plugin": "4.0.0-alpha",
-    "husky": "0.14.3",
-    "lint-staged": "7.2.2",
-    "mini-css-extract-plugin": "0.4.1",
-    "node-notifier": "5.2.1",
-    "node-sass": "^4.7.2",
-    "optimize-css-assets-webpack-plugin": "5.0.0",
-    "ora": "3.0.0",
-    "path-to-regexp": "2.4.0",
-    "portfinder": "1.0.13",
-    "postcss-import": "11.1.0",
-    "postcss-loader": "2.1.6",
-    "postcss-url": "7.3.2",
-    "rimraf": "2.6.2",
-    "sass-loader": "7.0.3",
-    "script-ext-html-webpack-plugin": "2.0.1",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "1.3.1",
+    "lint-staged": "8.1.5",
+    "mockjs": "1.0.1-beta3",
+    "node-sass": "^4.9.0",
+    "plop": "2.3.0",
+    "runjs": "^4.3.2",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
-    "semver": "5.5.0",
-    "serve-static": "1.13.2",
-    "shelljs": "0.8.2",
-    "svg-sprite-loader": "3.8.0",
-    "svgo": "1.0.5",
-    "uglifyjs-webpack-plugin": "1.2.7",
-    "url-loader": "1.0.1",
-    "vue-loader": "15.3.0",
-    "vue-style-loader": "4.1.2",
-    "vue-template-compiler": "2.5.17",
-    "webpack": "4.16.5",
-    "webpack-bundle-analyzer": "2.13.1",
-    "webpack-cli": "3.1.0",
-    "webpack-dev-server": "3.1.14",
-    "webpack-merge": "4.1.4"
+    "serve-static": "^1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.0",
+    "vue-template-compiler": "2.6.10"
   },
   "engines": {
-    "node": ">= 6.0.0",
+    "node": ">=8.9",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
diff --git a/plop-templates/component/index.hbs b/plop-templates/component/index.hbs
new file mode 100644
index 00000000..76610552
--- /dev/null
+++ b/plop-templates/component/index.hbs
@@ -0,0 +1,26 @@
+{{#if template}}
+<template>
+  <div />
+</template>
+{{/if}}
+
+{{#if script}}
+<script>
+export default {
+  name: '{{ properCase name }}',
+  props: {},
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="scss" scoped>
+
+</style>
+{{/if}}
diff --git a/plop-templates/component/prompt.js b/plop-templates/component/prompt.js
new file mode 100644
index 00000000..3723e8e1
--- /dev/null
+++ b/plop-templates/component/prompt.js
@@ -0,0 +1,55 @@
+const { notEmpty } = require('../utils.js')
+
+module.exports = {
+  description: 'generate vue component',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'component name please',
+    validate: notEmpty('name')
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true
+    }
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'Components require at least a <script> or <template> tag.'
+      }
+      return true
+    }
+  }
+  ],
+  actions: data => {
+    const name = '{{properCase name}}'
+    const actions = [{
+      type: 'add',
+      path: `src/components/${name}/index.vue`,
+      templateFile: 'plop-templates/component/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style')
+      }
+    }]
+
+    return actions
+  }
+}
diff --git a/plop-templates/utils.js b/plop-templates/utils.js
new file mode 100644
index 00000000..0310ca02
--- /dev/null
+++ b/plop-templates/utils.js
@@ -0,0 +1,9 @@
+exports.notEmpty = name => {
+  return v => {
+    if (!v || v.trim === '') {
+      return `${name} is required`
+    } else {
+      return true
+    }
+  }
+}
diff --git a/plop-templates/view/index.hbs b/plop-templates/view/index.hbs
new file mode 100644
index 00000000..76610552
--- /dev/null
+++ b/plop-templates/view/index.hbs
@@ -0,0 +1,26 @@
+{{#if template}}
+<template>
+  <div />
+</template>
+{{/if}}
+
+{{#if script}}
+<script>
+export default {
+  name: '{{ properCase name }}',
+  props: {},
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="scss" scoped>
+
+</style>
+{{/if}}
diff --git a/plop-templates/view/prompt.js b/plop-templates/view/prompt.js
new file mode 100644
index 00000000..1d490ee8
--- /dev/null
+++ b/plop-templates/view/prompt.js
@@ -0,0 +1,55 @@
+const { notEmpty } = require('../utils.js')
+
+module.exports = {
+  description: 'generate a view',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'view name please',
+    validate: notEmpty('name')
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true
+    }
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'View require at least a <script> or <template> tag.'
+      }
+      return true
+    }
+  }
+  ],
+  actions: data => {
+    const name = '{{name}}'
+    const actions = [{
+      type: 'add',
+      path: `src/views/${name}/index.vue`,
+      templateFile: 'plop-templates/view/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style')
+      }
+    }]
+
+    return actions
+  }
+}
diff --git a/plopfile.js b/plopfile.js
new file mode 100644
index 00000000..9f3147e2
--- /dev/null
+++ b/plopfile.js
@@ -0,0 +1,7 @@
+const viewGenerator = require('./plop-templates/view/prompt')
+const componentGenerator = require('./plop-templates/component/prompt')
+
+module.exports = function(plop) {
+  plop.setGenerator('view', viewGenerator)
+  plop.setGenerator('component', componentGenerator)
+}
diff --git a/favicon.ico b/public/favicon.ico
similarity index 100%
rename from favicon.ico
rename to public/favicon.ico
diff --git a/index.html b/public/index.html
similarity index 68%
rename from index.html
rename to public/index.html
index 7a7ecacf..a2fac6d6 100644
--- a/index.html
+++ b/public/index.html
@@ -5,10 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>vue-element-admin</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
   </head>
   <body>
-    <script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
+    <script src="<%= BASE_URL %>static/tinymce4.7.5/tinymce.min.js"></script>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
diff --git a/static/tinymce4.7.5/langs/zh_CN.js b/public/static/tinymce4.7.5/langs/zh_CN.js
similarity index 100%
rename from static/tinymce4.7.5/langs/zh_CN.js
rename to public/static/tinymce4.7.5/langs/zh_CN.js
diff --git a/static/tinymce4.7.5/plugins/codesample/css/prism.css b/public/static/tinymce4.7.5/plugins/codesample/css/prism.css
similarity index 100%
rename from static/tinymce4.7.5/plugins/codesample/css/prism.css
rename to public/static/tinymce4.7.5/plugins/codesample/css/prism.css
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-cool.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-cool.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-cool.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-cool.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-cry.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-cry.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-cry.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-cry.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-embarassed.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-embarassed.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-embarassed.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-embarassed.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-foot-in-mouth.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-foot-in-mouth.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-foot-in-mouth.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-foot-in-mouth.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-frown.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-frown.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-frown.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-frown.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-innocent.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-innocent.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-innocent.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-innocent.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-kiss.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-kiss.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-kiss.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-kiss.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-laughing.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-laughing.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-laughing.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-laughing.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-money-mouth.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-money-mouth.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-money-mouth.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-money-mouth.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-sealed.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-sealed.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-sealed.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-sealed.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-smile.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-smile.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-smile.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-smile.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-surprised.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-surprised.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-surprised.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-surprised.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-tongue-out.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-tongue-out.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-tongue-out.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-tongue-out.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-undecided.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-undecided.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-undecided.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-undecided.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-wink.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-wink.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-wink.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-wink.gif
diff --git a/static/tinymce4.7.5/plugins/emoticons/img/smiley-yell.gif b/public/static/tinymce4.7.5/plugins/emoticons/img/smiley-yell.gif
similarity index 100%
rename from static/tinymce4.7.5/plugins/emoticons/img/smiley-yell.gif
rename to public/static/tinymce4.7.5/plugins/emoticons/img/smiley-yell.gif
diff --git a/static/tinymce4.7.5/plugins/visualblocks/css/visualblocks.css b/public/static/tinymce4.7.5/plugins/visualblocks/css/visualblocks.css
similarity index 100%
rename from static/tinymce4.7.5/plugins/visualblocks/css/visualblocks.css
rename to public/static/tinymce4.7.5/plugins/visualblocks/css/visualblocks.css
diff --git a/static/tinymce4.7.5/skins/lightgray/content.inline.min.css b/public/static/tinymce4.7.5/skins/lightgray/content.inline.min.css
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/content.inline.min.css
rename to public/static/tinymce4.7.5/skins/lightgray/content.inline.min.css
diff --git a/static/tinymce4.7.5/skins/lightgray/content.min.css b/public/static/tinymce4.7.5/skins/lightgray/content.min.css
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/content.min.css
rename to public/static/tinymce4.7.5/skins/lightgray/content.min.css
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-mobile.woff b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-mobile.woff
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce-mobile.woff
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-mobile.woff
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.eot b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.eot
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.eot
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.eot
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.svg b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.svg
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.svg
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.svg
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.ttf b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.ttf
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.ttf
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.ttf
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.woff b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.woff
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.woff
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.woff
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.eot b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.eot
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce.eot
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.eot
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.svg b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.svg
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce.svg
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.svg
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.ttf b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.ttf
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce.ttf
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.ttf
diff --git a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.woff b/public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.woff
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/fonts/tinymce.woff
rename to public/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.woff
diff --git a/static/tinymce4.7.5/skins/lightgray/img/anchor.gif b/public/static/tinymce4.7.5/skins/lightgray/img/anchor.gif
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/img/anchor.gif
rename to public/static/tinymce4.7.5/skins/lightgray/img/anchor.gif
diff --git a/static/tinymce4.7.5/skins/lightgray/img/loader.gif b/public/static/tinymce4.7.5/skins/lightgray/img/loader.gif
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/img/loader.gif
rename to public/static/tinymce4.7.5/skins/lightgray/img/loader.gif
diff --git a/static/tinymce4.7.5/skins/lightgray/img/object.gif b/public/static/tinymce4.7.5/skins/lightgray/img/object.gif
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/img/object.gif
rename to public/static/tinymce4.7.5/skins/lightgray/img/object.gif
diff --git a/static/tinymce4.7.5/skins/lightgray/img/trans.gif b/public/static/tinymce4.7.5/skins/lightgray/img/trans.gif
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/img/trans.gif
rename to public/static/tinymce4.7.5/skins/lightgray/img/trans.gif
diff --git a/static/tinymce4.7.5/skins/lightgray/skin.min.css b/public/static/tinymce4.7.5/skins/lightgray/skin.min.css
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/skin.min.css
rename to public/static/tinymce4.7.5/skins/lightgray/skin.min.css
diff --git a/static/tinymce4.7.5/skins/lightgray/skin.min.css.map b/public/static/tinymce4.7.5/skins/lightgray/skin.min.css.map
similarity index 100%
rename from static/tinymce4.7.5/skins/lightgray/skin.min.css.map
rename to public/static/tinymce4.7.5/skins/lightgray/skin.min.css.map
diff --git a/static/tinymce4.7.5/tinymce.min.js b/public/static/tinymce4.7.5/tinymce.min.js
similarity index 100%
rename from static/tinymce4.7.5/tinymce.min.js
rename to public/static/tinymce4.7.5/tinymce.min.js
diff --git a/src/api/remoteSearch.js b/src/api/remoteSearch.js
index f2792789..c7e19117 100644
--- a/src/api/remoteSearch.js
+++ b/src/api/remoteSearch.js
@@ -1,9 +1,17 @@
 import request from '@/utils/request'
 
-export function userSearch(name) {
+export function searchUser(name) {
   return request({
     url: '/search/user',
     method: 'get',
     params: { name }
   })
 }
+
+export function transactionList(query) {
+  return request({
+    url: '/transaction/list',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/role.js b/src/api/role.js
index c81405a8..f6a983f1 100644
--- a/src/api/role.js
+++ b/src/api/role.js
@@ -14,25 +14,25 @@ export function getRoles() {
   })
 }
 
-export function deleteRole(id) {
-  return request({
-    url: `/roles/${id}`,
-    method: 'delete'
-  })
-}
-
 export function addRole(data) {
   return request({
-    url: '/roles',
+    url: '/role',
     method: 'post',
     data
   })
 }
 
-export function updateRole(key, data) {
+export function updateRole(id, data) {
   return request({
-    url: `/roles/${key}`,
+    url: `/role/${id}`,
     method: 'put',
     data
   })
 }
+
+export function deleteRole(id) {
+  return request({
+    url: `/role/${id}`,
+    method: 'delete'
+  })
+}
diff --git a/src/api/transaction.js b/src/api/transaction.js
deleted file mode 100644
index dfe64392..00000000
--- a/src/api/transaction.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-
-export function fetchList(query) {
-  return request({
-    url: '/transaction/list',
-    method: 'get',
-    params: query
-  })
-}
diff --git a/src/api/login.js b/src/api/user.js
similarity index 57%
rename from src/api/login.js
rename to src/api/user.js
index a64935c3..a8052005 100644
--- a/src/api/login.js
+++ b/src/api/user.js
@@ -1,29 +1,25 @@
 import request from '@/utils/request'
 
-export function loginByUsername(username, password) {
-  const data = {
-    username,
-    password
-  }
+export function login(data) {
   return request({
-    url: '/login/login',
+    url: '/user/login',
     method: 'post',
     data
   })
 }
 
-export function logout() {
+export function getInfo(token) {
   return request({
-    url: '/login/logout',
-    method: 'post'
+    url: '/user/info',
+    method: 'get',
+    params: { token }
   })
 }
 
-export function getUserInfo(token) {
+export function logout() {
   return request({
-    url: '/user/info',
-    method: 'get',
-    params: { token }
+    url: '/user/logout',
+    method: 'post'
   })
 }
 
diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
index 0c1ff792..c094037f 100644
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -88,29 +88,29 @@ export default {
 </script>
 
 <style scoped>
-  .back-to-ceiling {
-    position: fixed;
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-  }
+.back-to-ceiling {
+  position: fixed;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+}
 
-  .back-to-ceiling:hover {
-    background: #d5dbe7;
-  }
+.back-to-ceiling:hover {
+  background: #d5dbe7;
+}
 
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity .5s;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .5s;
+}
 
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0
-  }
+.fade-enter,
+.fade-leave-to {
+  opacity: 0
+}
 
-  .back-to-ceiling .Icon {
-    fill: #9aaabf;
-    background: none;
-  }
+.back-to-ceiling .Icon {
+  fill: #9aaabf;
+  background: none;
+}
 </style>
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 9e78b1ec..ff93ff45 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -2,9 +2,8 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">
-          {{ generateTitle(item.meta.title) }}
-        </span>
+        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{
+          generateTitle(item.meta.title) }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -59,15 +58,16 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 8px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
   }
+}
 </style>
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
index 0da113eb..a4643c0a 100644
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -2,9 +2,11 @@
   <div class="dndList">
     <div :style="{width:width1}" class="dndList-list">
       <h3>{{ list1Title }}</h3>
-      <draggable :list="list1" :options="{group:'article'}" class="dragArea">
+      <draggable :list="list1" group="article" class="dragArea">
         <div v-for="element in list1" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle">{{ element.id }}[{{ element.author }}] {{ element.title }}</div>
+          <div class="list-complete-item-handle">
+            {{ element.id }}[{{ element.author }}] {{ element.title }}
+          </div>
           <div style="position:absolute;right:0px;">
             <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
               <i style="color:#ff4949" class="el-icon-delete" />
@@ -15,9 +17,11 @@
     </div>
     <div :style="{width:width2}" class="dndList-list">
       <h3>{{ list2Title }}</h3>
-      <draggable :list="list2" :options="{group:'article'}" class="dragArea">
+      <draggable :list="list2" group="article" class="dragArea">
         <div v-for="element in list2" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div>
+          <div class="list-complete-item-handle2" @click="pushEle(element)">
+            {{ element.id }} [{{ element.author }}] {{ element.title }}
+          </div>
         </div>
       </draggable>
     </div>
@@ -95,7 +99,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .dndList {
   background: #fff;
   padding-bottom: 40px;
diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue
index 081f0067..bad9eb90 100644
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -237,7 +237,7 @@ export default {
 
     .dropzone .dz-preview:hover .dz-image img {
         transform: none;
-        -webkit-filter: none;
+        filter: none;
         width: 100%;
         height: 100%;
     }
diff --git a/src/components/ErrorLog/index.vue b/src/components/ErrorLog/index.vue
index c46cf110..198e4916 100644
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -12,17 +12,23 @@
           <template slot-scope="scope">
             <div>
               <span class="message-title">Msg:</span>
-              <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
+              <el-tag type="danger">
+                {{ scope.row.err.message }}
+              </el-tag>
             </div>
             <br>
             <div>
               <span class="message-title" style="padding-right: 10px;">Info: </span>
-              <el-tag type="warning">{{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}</el-tag>
+              <el-tag type="warning">
+                {{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}
+              </el-tag>
             </div>
             <br>
             <div>
               <span class="message-title" style="padding-right: 16px;">Url: </span>
-              <el-tag type="success">{{ scope.row.url }}</el-tag>
+              <el-tag type="success">
+                {{ scope.row.url }}
+              </el-tag>
             </div>
           </template>
         </el-table-column>
@@ -33,7 +39,6 @@
         </el-table-column>
       </el-table>
     </el-dialog>
-
   </div>
 </template>
 
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index ca7457c1..368b0021 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -20,10 +20,11 @@ export default {
     isActive: {
       type: Boolean,
       default: false
-    },
-    toggleClick: {
-      type: Function,
-      default: null
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
     }
   }
 }
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index c4276d96..6668ad5c 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -18,6 +18,8 @@
 </template>
 
 <script>
+// fuse is a lightweight fuzzy-search module
+// make search results more in line with expectations
 import Fuse from 'fuse.js'
 import path from 'path'
 import i18n from '@/lang'
diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue
index 059e4186..1171b5b8 100644
--- a/src/components/Kanban/index.vue
+++ b/src/components/Kanban/index.vue
@@ -5,7 +5,7 @@
     </div>
     <draggable
       :list="list"
-      :options="options"
+      v-bind="$attrs"
       class="board-column-content"
     >
       <div v-for="element in list" :key="element.id" class="board-item">
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index 9130efc7..7fe30b5d 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -27,7 +27,7 @@ export default {
   methods: {
     handleSetLanguage(lang) {
       this.$i18n.locale = lang
-      this.$store.dispatch('setLanguage', lang)
+      this.$store.dispatch('app/setLanguage', lang)
       this.$message({
         message: 'Switch Language Success',
         type: 'success'
diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue
index c774aa0e..013462fa 100644
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@@ -197,7 +197,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   // Fonts:
   $font-size-base: 16px;
   $font-size-small: 18px;
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 00000000..63408d8b
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @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 {
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: -1;
+}
+
+.rightPanel {
+  background: #fff;
+  z-index: 3000;
+  position: fixed;
+  height: 100vh;
+  width: 100%;
+  max-width: 260px;
+  top: 0px;
+  left: 0px;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  z-index: 40000;
+  left: auto;
+  right: 0px;
+}
+
+.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 {
+  position: absolute;
+  left: -48px;
+  border-radius: 6px 0 0 6px !important;
+  width: 48px;
+  height: 48px;
+  pointer-events: auto;
+  z-index: 0;
+  cursor: pointer;
+  pointer-events: auto;
+  font-size: 24px;
+  text-align: center;
+  color: #fff;
+  line-height: 48px;
+
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 479bf3e3..260c90de 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -17,6 +17,9 @@ export default {
   mounted() {
     this.init()
   },
+  beforeDestroy() {
+    this.destroy()
+  },
   methods: {
     click() {
       if (!screenfull.enabled) {
@@ -28,11 +31,17 @@ export default {
       }
       screenfull.toggle()
     },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen
+    },
     init() {
       if (screenfull.enabled) {
-        screenfull.on('change', () => {
-          this.isFullscreen = screenfull.isFullscreen
-        })
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
       }
     }
   }
diff --git a/src/components/Share/dropdownMenu.vue b/src/components/Share/dropdownMenu.vue
index f7b1dd2c..ac29bde7 100644
--- a/src/components/Share/dropdownMenu.vue
+++ b/src/components/Share/dropdownMenu.vue
@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" >
+<style lang="scss" >
 $n: 8; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index 0fa61706..e88065b4 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -5,7 +5,8 @@
     </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-        {{ item.label }}
+        {{
+          item.label }}
       </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
@@ -31,7 +32,7 @@ export default {
   methods: {
     handleSetSize(size) {
       this.$ELEMENT.size = size
-      this.$store.dispatch('setSize', size)
+      this.$store.dispatch('app/setSize', size)
       this.refreshView()
       this.$message({
         message: 'Switch Size Success',
@@ -40,7 +41,7 @@ export default {
     },
     refreshView() {
       // In order to make the cached page re-rendered
-      this.$store.dispatch('delAllCachedViews', this.$route)
+      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
 
       const { fullPath } = this.$route
 
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index f6784710..0a556248 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-color-picker
     v-model="theme"
-    :predefine="['#409EFF', '#11a983', '#13c2c2', '#6959CD', '#f5222d', '#eb2f96', '#DB7093', '#e6a23c', '#8B8989', '#212121']"
+    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
     class="theme-picker"
     popper-class="theme-picker-dropdown"
   />
@@ -11,21 +11,31 @@
 
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
+import defaultSettings from '@/settings'
 
 export default {
   data() {
     return {
       chalk: '', // content of theme-chalk css
-      theme: ORIGINAL_THEME
+      theme: defaultSettings.theme
     }
   },
   watch: {
-    theme(val) {
-      const oldVal = this.theme
+    async theme(val) {
+      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
       if (typeof val !== 'string') return
       const themeCluster = this.getThemeCluster(val.replace('#', ''))
       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
       console.log(themeCluster, originalCluster)
+
+      const $message = this.$message({
+        message: '  Compiling the theme',
+        customClass: 'theme-message',
+        type: 'success',
+        duration: 0,
+        iconClass: 'el-icon-loading'
+      })
+
       const getHandler = (variable, id) => {
         return () => {
           const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
@@ -41,15 +51,15 @@ export default {
         }
       }
 
-      const chalkHandler = getHandler('chalk', 'chalk-style')
-
       if (!this.chalk) {
         const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
-        this.getCSSString(url, chalkHandler, 'chalk')
-      } else {
-        chalkHandler()
+        await this.getCSSString(url, 'chalk')
       }
 
+      const chalkHandler = getHandler('chalk', 'chalk-style')
+
+      chalkHandler()
+
       const styles = [].slice.call(document.querySelectorAll('style'))
         .filter(style => {
           const text = style.innerText
@@ -60,39 +70,34 @@ export default {
         if (typeof innerText !== 'string') return
         style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
       })
-      this.$message({
-        message: '换肤成功',
-        type: 'success'
-      })
+
+      this.$emit('change', val)
+
+      $message.close()
     }
   },
 
   methods: {
     updateStyle(style, oldCluster, newCluster) {
-      const colorOverrides = [] // only capture color overides
+      let newStyle = style
       oldCluster.forEach((color, index) => {
-        const value = newCluster[index]
-        const color_plain = color.replace(/([()])/g, '\\$1')
-        const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color_plain}\\b([^}]*)(?=})`, 'gi')
-        const nestRepl = new RegExp(color_plain, 'ig') // for greed matching before the 'color'
-        let v
-        while ((v = repl.exec(style))) {
-          colorOverrides.push(v[2].replace(nestRepl, value) + value + v[3] + '}') // '}' not captured in the regexp repl to reserve it as locator-boundary
-        }
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
       })
-      return colorOverrides.join('')
+      return newStyle
     },
 
-    getCSSString(url, callback, variable) {
-      const xhr = new XMLHttpRequest()
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
-          callback()
+    getCSSString(url, variable) {
+      return new Promise(resolve => {
+        const xhr = new XMLHttpRequest()
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
+            resolve()
+          }
         }
-      }
-      xhr.open('GET', url)
-      xhr.send()
+        xhr.open('GET', url)
+        xhr.send()
+      })
     },
 
     getThemeCluster(theme) {
@@ -144,10 +149,14 @@ export default {
 </script>
 
 <style>
+.theme-message,
+.theme-picker-dropdown {
+  z-index: 99999 !important;
+}
+
 .theme-picker .el-color-picker__trigger {
-  margin-top: 12px;
-  height: 26px!important;
-  width: 26px!important;
+  height: 26px !important;
+  width: 26px !important;
   padding: 2px;
 }
 
diff --git a/src/components/Tinymce/components/editorImage.vue b/src/components/Tinymce/components/editorImage.vue
index ea834652..b3a4a2be 100644
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/src/components/Tinymce/components/editorImage.vue
@@ -15,10 +15,16 @@
         action="https://httpbin.org/post"
         list-type="picture-card"
       >
-        <el-button size="small" type="primary">点击上传</el-button>
+        <el-button size="small" type="primary">
+          点击上传
+        </el-button>
       </el-upload>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      <el-button @click="dialogVisible = false">
+        取 消
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        确 定
+      </el-button>
     </el-dialog>
   </div>
 </template>
@@ -95,7 +101,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .editor-slide-upload {
   margin-bottom: 20px;
   /deep/ .el-upload--picture-card {
diff --git a/src/components/TreeTable/README.md b/src/components/TreeTable/README.md
deleted file mode 100644
index 05326dfa..00000000
--- a/src/components/TreeTable/README.md
+++ /dev/null
@@ -1,220 +0,0 @@
-
-- [Enlgish](#Brief)
-
-# 中文
-
-## 写在前面
-
-此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
-
-并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
-
-`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
-
-## Props 说明
-
-|    Attribute     | Description                        |  Type   | Default  |
-| :--------------: | :--------------------------------- | :-----: | :------: |
-|       data       | 原始展示数据                       |  Array  |    []    |
-|     columns      | 列属性                             |  Array  |    []    |
-| defaultExpandAll | 默认是否全部展开                   | Boolean |  false   |
-| defaultChildren  | 指定子树为节点对象的某个属性值     | String  | children |  |
-|      indent      | 相邻级节点间的水平缩进，单位为像素 | Number  |    50    |
-
-> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
-
----
-
-### 代码示例
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**必填**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**必填**)
-
-- label: 显示在表头的文字
-- key: 对应 data 的 key。treeTable 将显示相应的 value
-- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
-- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
-- width: 每列的宽度，为一个数字(可选)。例如`200`
-- align: 对齐方式 `left/center/right`
-- header-align: 表头对齐方式 `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
-
-```js
-this.$refs.TreeTable.addChild(row, data) //添加子元素
-this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
-this.$refs.TreeTable.delete(row) //删除该元素
-```
-
-## 其他
-
-如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
-
-# English
-
-## Brief
-
-This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed.
-
-And this component makes full use of the features of the `vue` slot to make it user-friendly.
-
-In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties.
-
-## Props
-
-|    Attribute     | Description                                                  |  Type   | Default  |
-| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
-|       data       | original display data                                        |  Array  |    []    |
-|     columns      | column attribute                                             |  Array  |    []    |
-| defaultExpandAll | whether to expand all nodes by default                       | Boolean |  false   |
-| defaultChildren  | specify which node object is used as the node's subtree      | String  | children |  |
-|      indent      | horizontal indentation of nodes in adjacent levels in pixels | Number  |    50    |
-
-> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
-
----
-
-### Example
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**Required**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**Required**)
-
-- label: text displayed in the header
-- key: data.key will show in column
-- expand: `true` or `false`
-- checkbox: `true` or `false`
-- width: column width 。such as `200`
-- align: alignment `left/center/right`
-- header-align: alignment of the table header `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-Several methods are currently available, but only the `beta` version, which is likely to be modified later.
-
-```js
-this.$refs.TreeTable.addChild(row, data) //Add child elements
-this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
-this.$refs.TreeTable.delete(row) //Delete the element
-```
-
-## Other
-
-If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue
diff --git a/src/components/TreeTable/eval.js b/src/components/TreeTable/eval.js
deleted file mode 100644
index 8659ead8..00000000
--- a/src/components/TreeTable/eval.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Vue from 'vue'
-
-// Flattened array
-export default function treeToArray(data, children = 'children') {
-  let tmp = []
-  data.forEach((item, index) => {
-    Vue.set(item, '_index', index)
-    tmp.push(item)
-    if (item[children] && item[children].length > 0) {
-      const res = treeToArray(item[children], children)
-      tmp = tmp.concat(res)
-    }
-  })
-  return tmp
-}
-
-export function addAttrs(data, { parent = null, preIndex = false, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
-  data.forEach((item, index) => {
-    const _id = (preIndex ? `${preIndex}-${index}` : index) + ''
-    Vue.set(item, '_id', _id)
-    Vue.set(item, '_level', level)
-    Vue.set(item, '_expand', expand)
-    Vue.set(item, '_parent', parent)
-    Vue.set(item, '_show', show)
-    Vue.set(item, '_select', select)
-    if (item[children] && item[children].length > 0) {
-      addAttrs(item[children], {
-        parent: item,
-        level: level + 1,
-        expand,
-        preIndex: _id,
-        children,
-        status,
-        select
-      })
-    }
-  })
-}
-
-export function cleanParentAttr(data, children = 'children') {
-  data.forEach(item => {
-    item._parent = null
-    if (item[children] && item[children].length > 0) {
-      addAttrs(item[children], children)
-    }
-  })
-  return data
-}
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
deleted file mode 100644
index 92ddc434..00000000
--- a/src/components/TreeTable/index.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-  <el-table :data="tableData" :row-style="showRow" v-bind="$attrs" v-on="$listeners">
-    <slot name="selection" />
-    <slot name="pre-column" />
-    <el-table-column
-      v-for="item in columns"
-      :key="item.key"
-      :label="item.label"
-      :width="item.width"
-      :align="item.align||'center'"
-      :header-align="item.headerAlign"
-    >
-      <template slot-scope="scope">
-        <slot :scope="scope" :name="item.key">
-          <template v-if="item.expand">
-            <span :style="{'padding-left':+scope.row._level*indent + 'px'} " />
-            <span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
-              <i v-if="!scope.row._expand" class="el-icon-plus" />
-              <i v-else class="el-icon-minus" />
-            </span>
-          </template>
-          <template v-if="item.checkbox">
-            <el-checkbox
-              v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
-              v-model="scope.row._select"
-              :style="{'padding-left':+scope.row._level*indent + 'px'} "
-              :indeterminate="scope.row._select"
-              @change="handleCheckAllChange(scope.row)"
-            />
-            <el-checkbox
-              v-else
-              v-model="scope.row._select"
-              :style="{'padding-left':+scope.row._level*indent + 'px'} "
-              @change="handleCheckAllChange(scope.row)"
-            />
-          </template>
-          {{ scope.row[item.key] }}
-        </slot>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import treeToArray, { addAttrs } from './eval.js'
-
-export default {
-  name: 'TreeTable',
-  props: {
-    data: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    defaultExpandAll: {
-      type: Boolean,
-      default: false
-    },
-    defaultChildren: {
-      type: String,
-      default: 'children'
-    },
-    indent: {
-      type: Number,
-      default: 50
-    }
-  },
-  data() {
-    return {
-      guard: 1
-    }
-  },
-  computed: {
-    children() {
-      return this.defaultChildren
-    },
-    tableData() {
-      const data = this.data
-      if (this.data.length === 0) {
-        return []
-      }
-      addAttrs(data, {
-        expand: this.defaultExpandAll,
-        children: this.defaultChildren
-      })
-
-      const retval = treeToArray(data, this.defaultChildren)
-      return retval
-    }
-  },
-  methods: {
-    addBrother(row, data) {
-      if (row._parent) {
-        row._parent.children.push(data)
-      } else {
-        this.data.push(data)
-      }
-    },
-    addChild(row, data) {
-      if (!row.children) {
-        this.$set(row, 'children', [])
-      }
-      row.children.push(data)
-    },
-    delete(row) {
-      const { _index, _parent } = row
-      if (_parent) {
-        _parent.children.splice(_index, 1)
-      } else {
-        this.data.splice(_index, 1)
-      }
-    },
-    getData() {
-      return this.tableData
-    },
-    showRow: function({ row }) {
-      const parent = row._parent
-      const show = parent ? parent._expand && parent._show : true
-      row._show = show
-      return show
-        ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
-        : 'display:none;'
-    },
-    showSperadIcon(record) {
-      return record[this.children] && record[this.children].length > 0
-    },
-    toggleExpanded(trIndex) {
-      const record = this.tableData[trIndex]
-      const expand = !record._expand
-      record._expand = expand
-    },
-    handleCheckAllChange(row) {
-      this.selcetRecursion(row, row._select, this.defaultChildren)
-      this.isIndeterminate = row._select
-    },
-    selcetRecursion(row, select, children = 'children') {
-      if (select) {
-        this.$set(row, '_expand', true)
-        this.$set(row, '_show', true)
-      }
-      const sub_item = row[children]
-      if (sub_item && sub_item.length > 0) {
-        sub_item.map(child => {
-          child._select = select
-          this.selcetRecursion(child, select, children)
-        })
-      }
-    },
-    updateTreeNode(item) {
-      return new Promise(resolve => {
-        const { _id, _parent } = item
-        const index = _id.split('-').slice(-1)[0] // get last index
-        if (_parent) {
-          _parent.children.splice(index, 1, item)
-          resolve(this.data)
-        } else {
-          this.data.splice(index, 1, item)
-          resolve(this.data)
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style>
-@keyframes treeTableShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes treeTableShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.tree-ctrl {
-  position: relative;
-  cursor: pointer;
-  color: #2196f3;
-}
-</style>
diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md
deleted file mode 100644
index 05326dfa..00000000
--- a/src/components/TreeTable/readme.md
+++ /dev/null
@@ -1,220 +0,0 @@
-
-- [Enlgish](#Brief)
-
-# 中文
-
-## 写在前面
-
-此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
-
-并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
-
-`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
-
-## Props 说明
-
-|    Attribute     | Description                        |  Type   | Default  |
-| :--------------: | :--------------------------------- | :-----: | :------: |
-|       data       | 原始展示数据                       |  Array  |    []    |
-|     columns      | 列属性                             |  Array  |    []    |
-| defaultExpandAll | 默认是否全部展开                   | Boolean |  false   |
-| defaultChildren  | 指定子树为节点对象的某个属性值     | String  | children |  |
-|      indent      | 相邻级节点间的水平缩进，单位为像素 | Number  |    50    |
-
-> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
-
----
-
-### 代码示例
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**必填**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**必填**)
-
-- label: 显示在表头的文字
-- key: 对应 data 的 key。treeTable 将显示相应的 value
-- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
-- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
-- width: 每列的宽度，为一个数字(可选)。例如`200`
-- align: 对齐方式 `left/center/right`
-- header-align: 表头对齐方式 `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
-
-```js
-this.$refs.TreeTable.addChild(row, data) //添加子元素
-this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
-this.$refs.TreeTable.delete(row) //删除该元素
-```
-
-## 其他
-
-如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
-
-# English
-
-## Brief
-
-This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed.
-
-And this component makes full use of the features of the `vue` slot to make it user-friendly.
-
-In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties.
-
-## Props
-
-|    Attribute     | Description                                                  |  Type   | Default  |
-| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
-|       data       | original display data                                        |  Array  |    []    |
-|     columns      | column attribute                                             |  Array  |    []    |
-| defaultExpandAll | whether to expand all nodes by default                       | Boolean |  false   |
-| defaultChildren  | specify which node object is used as the node's subtree      | String  | children |  |
-|      indent      | horizontal indentation of nodes in adjacent levels in pixels | Number  |    50    |
-
-> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
-
----
-
-### Example
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**Required**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**Required**)
-
-- label: text displayed in the header
-- key: data.key will show in column
-- expand: `true` or `false`
-- checkbox: `true` or `false`
-- width: column width 。such as `200`
-- align: alignment `left/center/right`
-- header-align: alignment of the table header `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-Several methods are currently available, but only the `beta` version, which is likely to be modified later.
-
-```js
-this.$refs.TreeTable.addChild(row, data) //Add child elements
-this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
-this.$refs.TreeTable.delete(row) //Delete the element
-```
-
-## Other
-
-If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue
diff --git a/src/components/Upload/singleImage.vue b/src/components/Upload/singleImage.vue
index 0609a79d..ecec20a9 100644
--- a/src/components/Upload/singleImage.vue
+++ b/src/components/Upload/singleImage.vue
@@ -10,7 +10,9 @@
       action="https://httpbin.org/post"
     >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
     </el-upload>
     <div class="image-preview">
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
@@ -76,8 +78,8 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-    @import "src/styles/mixin.scss";
+<style lang="scss" scoped>
+    @import "~@/styles/mixin.scss";
     .upload-container {
         width: 100%;
         position: relative;
diff --git a/src/components/Upload/singleImage2.vue b/src/components/Upload/singleImage2.vue
index a14d028f..07637a9e 100644
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@@ -10,7 +10,9 @@
       action="https://httpbin.org/post"
     >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">Drag或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        Drag或<em>点击上传</em>
+      </div>
     </el-upload>
     <div v-show="imageUrl.length>0" class="image-preview">
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
@@ -74,7 +76,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .upload-container {
   width: 100%;
   height: 100%;
diff --git a/src/components/Upload/singleImage3.vue b/src/components/Upload/singleImage3.vue
index 5eef0d1e..6300da4b 100644
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@@ -10,7 +10,9 @@
       action="https://httpbin.org/post"
     >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
     </el-upload>
     <div class="image-preview image-app-preview">
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
@@ -83,7 +85,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 @import "~@/styles/mixin.scss";
 .upload-container {
   width: 100%;
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index a6b8dbce..9e8ba8b6 100644
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -3,7 +3,9 @@
     <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
     <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
       Drop excel file here or
-      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">Browse</el-button>
+      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
+        Browse
+      </el-button>
     </div>
   </div>
 </template>
diff --git a/src/directive/waves/waves.js b/src/directive/waves/waves.js
index 38e07f88..ec2ff439 100644
--- a/src/directive/waves/waves.js
+++ b/src/directive/waves/waves.js
@@ -5,13 +5,12 @@ const context = '@@wavesContext'
 function handleClick(el, binding) {
   function handle(e) {
     const customOpts = Object.assign({}, binding.value)
-    const opts = Object.assign(
-      {
-        ele: el, // 波纹作用元素
-        type: 'hit', // hit 点击位置扩散 center中心点扩展
-        color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-      },
-      customOpts
+    const opts = Object.assign({
+      ele: el, // 波纹作用元素
+      type: 'hit', // hit 点击位置扩散 center中心点扩展
+      color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+    },
+    customOpts
     )
     const target = opts.ele
     if (target) {
diff --git a/src/errorLog.js b/src/errorLog.js
deleted file mode 100644
index 00b18b72..00000000
--- a/src/errorLog.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Vue from 'vue'
-import store from './store'
-
-// you can set only in production env show the error-log
-if (process.env.NODE_ENV === 'production') {
-  Vue.config.errorHandler = function(err, vm, info, a) {
-  // Don't ask me why I use Vue.nextTick, it just a hack.
-  // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
-    Vue.nextTick(() => {
-      store.dispatch('addErrorLog', {
-        err,
-        vm,
-        info,
-        url: window.location.href
-      })
-      console.error(err, info)
-    })
-  }
-}
diff --git a/src/lang/en.js b/src/lang/en.js
index 963c60d3..ef4548e7 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -43,8 +43,6 @@ export default {
     dragTable: 'Drag Table',
     inlineEditTable: 'Inline Edit',
     complexTable: 'Complex Table',
-    treeTable: 'Tree Table',
-    customTreeTable: 'Custom TreeTable',
     tab: 'Tab',
     form: 'Form',
     createArticle: 'Create Article',
@@ -163,5 +161,12 @@ export default {
     close: 'Close',
     closeOthers: 'Close Others',
     closeAll: 'Close All'
+  },
+  settings: {
+    title: 'Page style setting',
+    theme: 'Theme Color',
+    tagsView: 'Open Tags-View',
+    fixedHeader: 'Fixed Header',
+    sidebarLogo: 'Sidebar Logo'
   }
 }
diff --git a/src/lang/es.js b/src/lang/es.js
index 31fa8303..89a9e9d3 100755
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -43,8 +43,6 @@ export default {
     dragTable: 'Arrastrar tabla',
     inlineEditTable: 'Editor',
     complexTable: 'Complex Table',
-    treeTable: 'Tree Table',
-    customTreeTable: 'Custom TreeTable',
     tab: 'Pestaña',
     form: 'Formulario',
     createArticle: 'Crear artículo',
@@ -163,5 +161,12 @@ export default {
     close: 'Cerrar',
     closeOthers: 'Cerrar otros',
     closeAll: 'Cerrar todos'
+  },
+  settings: {
+    title: 'Page style setting',
+    theme: 'Theme Color',
+    tagsView: 'Open Tags-View',
+    fixedHeader: 'Fixed Header',
+    sidebarLogo: 'Sidebar Logo'
   }
 }
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 574cba11..702725cd 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -43,8 +43,6 @@ export default {
     dragTable: '拖拽Table',
     inlineEditTable: 'Table内编辑',
     complexTable: '综合Table',
-    treeTable: '树形表格',
-    customTreeTable: '自定义树表',
     tab: 'Tab',
     form: '表单',
     createArticle: '创建文章',
@@ -163,5 +161,12 @@ export default {
     close: '关闭',
     closeOthers: '关闭其它',
     closeAll: '关闭所有'
+  },
+  settings: {
+    title: '系统布局配置',
+    theme: '主题色',
+    tagsView: '开启 Tags-View',
+    fixedHeader: '固定 Header',
+    sidebarLogo: '侧边栏 Logo'
   }
 }
diff --git a/src/views/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
similarity index 62%
rename from src/views/layout/components/AppMain.vue
rename to src/layout/components/AppMain.vue
index 9ee5bd52..62e6ace5 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -22,13 +22,28 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .app-main {
-  /*84 = navbar + tags-view = 50 +34 */
-  min-height: calc(100vh - 84px);
+  /* 50= navbar  50  */
+  min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
   overflow: hidden;
 }
+
+.fixed-header+.app-main {
+  padding-top: 50px;
+}
+
+.hasTagsView {
+  .app-main {
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 84px);
+  }
+
+  .fixed-header+.app-main {
+    padding-top: 84px;
+  }
+}
 </style>
 
diff --git a/src/views/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
similarity index 85%
rename from src/views/layout/components/Navbar.vue
rename to src/layout/components/Navbar.vue
index e2c095ec..b0ee54c1 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container" />
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb class="breadcrumb-container" />
 
@@ -18,9 +18,6 @@
 
         <lang-select class="right-menu-item hover-effect" />
 
-        <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
-          <theme-picker class="right-menu-item hover-effect" />
-        </el-tooltip>
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
@@ -56,7 +53,6 @@ import ErrorLog from '@/components/ErrorLog'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import LangSelect from '@/components/LangSelect'
-import ThemePicker from '@/components/ThemePicker'
 import Search from '@/components/HeaderSearch'
 
 export default {
@@ -67,7 +63,6 @@ export default {
     Screenfull,
     SizeSelect,
     LangSelect,
-    ThemePicker,
     Search
   },
   computed: {
@@ -80,21 +75,23 @@ export default {
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('toggleSideBar')
+      this.$store.dispatch('app/toggleSideBar')
     },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload()// In order to re-instantiate the vue-router object to avoid bugs
-      })
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .navbar {
   height: 50px;
   overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
     line-height: 46px;
@@ -102,6 +99,7 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 00000000..19e4e68b
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">{{ $t('settings.title') }}</h3>
+
+      <div class="drawer-item">
+        <span>{{ $t('settings.theme') }}</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>{{ $t('settings.tagsView') }}</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>{{ $t('settings.fixedHeader') }}</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>{{ $t('settings.sidebarLogo') }}</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker'
+
+export default {
+  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/views/layout/components/Sidebar/FixiOSBug.js b/src/layout/components/Sidebar/FixiOSBug.js
similarity index 100%
rename from src/views/layout/components/Sidebar/FixiOSBug.js
rename to src/layout/components/Sidebar/FixiOSBug.js
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
similarity index 100%
rename from src/views/layout/components/Sidebar/Item.vue
rename to src/layout/components/Sidebar/Item.vue
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
similarity index 100%
rename from src/views/layout/components/Sidebar/Link.vue
rename to src/layout/components/Sidebar/Link.vue
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
new file mode 100644
index 00000000..ac0c8d8f
--- /dev/null
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: 'Vue Element Admin',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
similarity index 99%
rename from src/views/layout/components/Sidebar/SidebarItem.vue
rename to src/layout/components/Sidebar/SidebarItem.vue
index 42c167fa..8c9c4328 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,6 +1,5 @@
 <template>
   <div v-if="!item.hidden" class="menu-wrapper">
-
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
@@ -22,7 +21,6 @@
         class="nest-menu"
       />
     </el-submenu>
-
   </div>
 </template>
 
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 00000000..f02a4819
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="$route.path"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters([
+      'permission_routes',
+      'sidebar'
+    ]),
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
+    variables() {
+      return variables
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
diff --git a/src/views/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
similarity index 97%
rename from src/views/layout/components/TagsView/ScrollPane.vue
rename to src/layout/components/TagsView/ScrollPane.vue
index 89c72e1c..0ec76e72 100644
--- a/src/views/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -67,7 +67,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .scroll-container {
   white-space: nowrap;
   position: relative;
diff --git a/src/views/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
similarity index 88%
rename from src/views/layout/components/TagsView/index.vue
rename to src/layout/components/TagsView/index.vue
index c793ca1e..bdddaba6 100644
--- a/src/views/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -17,12 +17,19 @@
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
+      <li @click="refreshSelectedTag(selectedTag)">
+        {{ $t('tagsView.refresh') }}
+      </li>
       <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">
-        {{ $t('tagsView.close') }}
+        {{
+          $t('tagsView.close') }}
+      </li>
+      <li @click="closeOthersTags">
+        {{ $t('tagsView.closeOthers') }}
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        {{ $t('tagsView.closeAll') }}
       </li>
-      <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
-      <li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
     </ul>
   </div>
 </template>
@@ -99,14 +106,14 @@ export default {
       for (const tag of affixTags) {
         // Must have tag name
         if (tag.name) {
-          this.$store.dispatch('addVisitedView', tag)
+          this.$store.dispatch('tagsView/addVisitedView', tag)
         }
       }
     },
     addTags() {
       const { name } = this.$route
       if (name) {
-        this.$store.dispatch('addView', this.$route)
+        this.$store.dispatch('tagsView/addView', this.$route)
       }
       return false
     },
@@ -118,7 +125,7 @@ export default {
             this.$refs.scrollPane.moveToTarget(tag)
             // when query is different then update
             if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('updateVisitedView', this.$route)
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
             }
             break
           }
@@ -126,7 +133,7 @@ export default {
       })
     },
     refreshSelectedTag(view) {
-      this.$store.dispatch('delCachedView', view).then(() => {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
         const { fullPath } = view
         this.$nextTick(() => {
           this.$router.replace({
@@ -136,7 +143,7 @@ export default {
       })
     },
     closeSelectedTag(view) {
-      this.$store.dispatch('delView', view).then(({ visitedViews }) => {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
         if (this.isActive(view)) {
           this.toLastView(visitedViews)
         }
@@ -144,12 +151,12 @@ export default {
     },
     closeOthersTags() {
       this.$router.push(this.selectedTag)
-      this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
         this.moveToCurrentTag()
       })
     },
     closeAllTags(view) {
-      this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
         if (this.affixTags.some(tag => tag.path === view.path)) {
           return
         }
@@ -189,7 +196,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .tags-view-container {
   height: 34px;
   width: 100%;
@@ -257,7 +264,7 @@ export default {
 }
 </style>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss">
 //reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {
diff --git a/src/views/layout/components/index.js b/src/layout/components/index.js
similarity index 80%
rename from src/views/layout/components/index.js
rename to src/layout/components/index.js
index 5262e113..e9f79ddd 100644
--- a/src/views/layout/components/index.js
+++ b/src/layout/components/index.js
@@ -2,3 +2,4 @@ export { default as Navbar } from './Navbar'
 export { default as Sidebar } from './Sidebar/index.vue'
 export { default as TagsView } from './TagsView/index.vue'
 export { default as AppMain } from './AppMain'
+export { default as Settings } from './Settings'
diff --git a/src/layout/index.vue b/src/layout/index.vue
new file mode 100644
index 00000000..ec6df90c
--- /dev/null
+++ b/src/layout/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container" />
+    <div :class="{hasTagsView:needTagsView}" class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <navbar />
+        <tags-view v-if="needTagsView" />
+      </div>
+      <app-main />
+      <right-panel v-if="showSettings">
+        <settings />
+      </right-panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel'
+import { Navbar, Sidebar, AppMain, TagsView, Settings } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    RightPanel,
+    Navbar,
+    Sidebar,
+    AppMain,
+    TagsView,
+    Settings
+  },
+  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('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/variables.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;
+  }
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: calc(100% - #{$sideBarWidth});
+    transition: width 0.28s;
+  }
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px)
+  }
+
+  .mobile .fixed-header {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
similarity index 61%
rename from src/views/layout/mixin/ResizeHandler.js
rename to src/layout/mixin/ResizeHandler.js
index 352ab133..65879d16 100644
--- a/src/views/layout/mixin/ResizeHandler.js
+++ b/src/layout/mixin/ResizeHandler.js
@@ -7,18 +7,21 @@ export default {
   watch: {
     $route(route) {
       if (this.device === 'mobile' && this.sidebar.opened) {
-        store.dispatch('closeSideBar', { withoutAnimation: false })
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
       }
     }
   },
   beforeMount() {
     window.addEventListener('resize', this.resizeHandler)
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+  },
   mounted() {
     const isMobile = this.isMobile()
     if (isMobile) {
-      store.dispatch('toggleDevice', 'mobile')
-      store.dispatch('closeSideBar', { withoutAnimation: true })
+      store.dispatch('app/toggleDevice', 'mobile')
+      store.dispatch('app/closeSideBar', { withoutAnimation: true })
     }
   },
   methods: {
@@ -29,10 +32,10 @@ export default {
     resizeHandler() {
       if (!document.hidden) {
         const isMobile = this.isMobile()
-        store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
 
         if (isMobile) {
-          store.dispatch('closeSideBar', { withoutAnimation: true })
+          store.dispatch('app/closeSideBar', { withoutAnimation: true })
         }
       }
     }
diff --git a/src/main.js b/src/main.js
index 7739639d..375a6b6e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,7 @@ import Cookies from 'js-cookie'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import Element from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+import './styles/element-variables.scss'
 
 import '@/styles/index.scss' // global css
 
@@ -15,12 +15,16 @@ import router from './router'
 
 import i18n from './lang' // Internationalization
 import './icons' // icon
-import './errorLog' // error log
 import './permission' // permission control
-import './mock' // simulation data
+import './utils/errorLog' // error log
 
 import * as filters from './filters' // global filters
 
+import { mockXHR } from '../mock' // simulation data
+
+// mock api in github pages site build
+if (process.env.NODE_ENV === 'production') { mockXHR() }
+
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)
diff --git a/src/mock/article.js b/src/mock/article.js
deleted file mode 100644
index 45923ddd..00000000
--- a/src/mock/article.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import Mock from 'mockjs'
-import { param2Obj } from '@/utils'
-
-const List = []
-const count = 100
-
-const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
-const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
-
-for (let i = 0; i < count; i++) {
-  List.push(Mock.mock({
-    id: '@increment',
-    timestamp: +Mock.Random.date('T'),
-    author: '@first',
-    reviewer: '@first',
-    title: '@title(5, 10)',
-    content_short: '我是测试数据',
-    content: baseContent,
-    forecast: '@float(0, 100, 2, 2)',
-    importance: '@integer(1, 3)',
-    'type|1': ['CN', 'US', 'JP', 'EU'],
-    'status|1': ['published', 'draft', 'deleted'],
-    display_time: '@datetime',
-    comment_disabled: true,
-    pageviews: '@integer(300, 5000)',
-    image_uri,
-    platforms: ['a-platform']
-  }))
-}
-
-export default {
-  getList: config => {
-    const { importance, type, title, page = 1, limit = 20, sort } = param2Obj(config.url)
-
-    let mockList = List.filter(item => {
-      if (importance && item.importance !== +importance) return false
-      if (type && item.type !== type) return false
-      if (title && item.title.indexOf(title) < 0) return false
-      return true
-    })
-
-    if (sort === '-id') {
-      mockList = mockList.reverse()
-    }
-
-    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
-
-    return {
-      total: mockList.length,
-      items: pageList
-    }
-  },
-  getPv: () => ({
-    pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
-  }),
-  getArticle: (config) => {
-    const { id } = param2Obj(config.url)
-    for (const article of List) {
-      if (article.id === +id) {
-        return article
-      }
-    }
-  },
-  createArticle: () => ({
-    data: 'success'
-  }),
-  updateArticle: () => ({
-    data: 'success'
-  })
-}
diff --git a/src/mock/index.js b/src/mock/index.js
deleted file mode 100644
index a6ab5f14..00000000
--- a/src/mock/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Mock from 'mockjs'
-import loginAPI from './login'
-import articleAPI from './article'
-import remoteSearchAPI from './remoteSearch'
-import transactionAPI from './transaction'
-import roleAPI from './role'
-
-// 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
-// https://github.com/nuysoft/Mock/issues/300
-Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
-Mock.XHR.prototype.send = function() {
-  if (this.custom.xhr) {
-    this.custom.xhr.withCredentials = this.withCredentials || false
-    this.custom.xhr.responseType = this.responseType
-  }
-  this.proxy_send(...arguments)
-}
-
-// Mock.setup({
-//   timeout: '350-600'
-// })
-
-// 登录相关
-Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
-Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
-Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
-
-// 角色相关
-Mock.mock(/\/routes/, 'get', roleAPI.getRoutes)
-Mock.mock(/\/roles/, 'get', roleAPI.getRoles)
-Mock.mock(/\/roles$/, 'post', roleAPI.addRole)
-Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'put', roleAPI.updateRole)
-Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'delete', roleAPI.deleteRole)
-
-// 文章相关
-Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
-Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
-Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
-Mock.mock(/\/article\/create/, 'post', articleAPI.createArticle)
-Mock.mock(/\/article\/update/, 'post', articleAPI.updateArticle)
-
-// 搜索相关
-Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
-
-// 账单相关
-Mock.mock(/\/transaction\/list/, 'get', transactionAPI.getList)
-
-export default Mock
diff --git a/src/mock/login.js b/src/mock/login.js
deleted file mode 100644
index b9694f09..00000000
--- a/src/mock/login.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { param2Obj } from '@/utils'
-
-const userMap = {
-  admin: {
-    roles: ['admin'],
-    token: 'admin',
-    introduction: '我是超级管理员',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Super Admin'
-  },
-  editor: {
-    roles: ['editor'],
-    token: 'editor',
-    introduction: '我是编辑',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Normal Editor'
-  }
-}
-
-export default {
-  loginByUsername: config => {
-    const { username } = JSON.parse(config.body)
-    return userMap[username]
-  },
-  getUserInfo: config => {
-    const { token } = param2Obj(config.url)
-    if (userMap[token]) {
-      return userMap[token]
-    } else {
-      return false
-    }
-  },
-  logout: () => 'success'
-}
diff --git a/src/mock/remoteSearch.js b/src/mock/remoteSearch.js
deleted file mode 100644
index b70f6f7d..00000000
--- a/src/mock/remoteSearch.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Mock from 'mockjs'
-import { param2Obj } from '@/utils'
-
-const NameList = []
-const count = 100
-
-for (let i = 0; i < count; i++) {
-  NameList.push(Mock.mock({
-    name: '@first'
-  }))
-}
-NameList.push({ name: 'mockPan' })
-
-export default {
-  searchUser: config => {
-    const { name } = param2Obj(config.url)
-    const mockNameList = NameList.filter(item => {
-      const lowerCaseName = item.name.toLowerCase()
-      if (name && lowerCaseName.indexOf(name.toLowerCase()) < 0) return false
-      return true
-    })
-    return { items: mockNameList }
-  }
-}
diff --git a/src/mock/role.js b/src/mock/role.js
deleted file mode 100644
index ae4afeb8..00000000
--- a/src/mock/role.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import Mock from 'mockjs'
-import { deepClone } from '@/utils'
-import { filterAsyncRoutes } from '@/store/modules/permission'
-import { asyncRoutes, constantRoutes } from '@/router'
-
-const routes = deepClone([...constantRoutes, ...asyncRoutes])
-
-const roles = [
-  {
-    key: 'admin',
-    name: 'admin',
-    description: 'Super Administrator. Have access to view all pages.',
-    routes: routes
-  },
-  {
-    key: 'editor',
-    name: 'editor',
-    description: 'Normal Editor. Can see all pages except permission page',
-    routes: filterAsyncRoutes(routes, ['editor'])
-  },
-  {
-    key: 'visitor',
-    name: 'visitor',
-    description: 'Just a visitor. Can only see the home page and the document page',
-    routes: [{
-      path: '',
-      redirect: 'dashboard',
-      children: [
-        {
-          path: 'dashboard',
-          name: 'Dashboard',
-          meta: { title: 'dashboard', icon: 'dashboard' }
-        }
-      ]
-    }]
-  }
-]
-
-export default {
-  getRoutes() {
-    return routes
-  },
-  getRoles() {
-    return roles
-  },
-  addRole() {
-    return Mock.mock('@integer(300, 5000)')
-  },
-  updateRole() {
-    const res = {
-      data: 'success'
-    }
-    return res
-  },
-  deleteRole() {
-    const res = {
-      data: 'success'
-    }
-    return res
-  }
-}
diff --git a/src/mock/transaction.js b/src/mock/transaction.js
deleted file mode 100644
index a17517e4..00000000
--- a/src/mock/transaction.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Mock from 'mockjs'
-
-const List = []
-const count = 20
-
-for (let i = 0; i < count; i++) {
-  List.push(Mock.mock({
-    order_no: '@guid()',
-    timestamp: +Mock.Random.date('T'),
-    username: '@name()',
-    price: '@float(1000, 15000, 0, 2)',
-    'status|1': ['success', 'pending']
-  }))
-}
-
-export default {
-  getList: () => {
-    return {
-      total: List.length,
-      items: List
-    }
-  }
-}
diff --git a/src/permission.js b/src/permission.js
index 25b6812f..7cc2a5cf 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -7,66 +7,64 @@ import { getToken } from '@/utils/auth' // get token from cookie
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-// permission judge function
-function hasPermission(roles, permissionRoles) {
-  if (roles.includes('admin')) return true // admin permission passed directly
-  if (!permissionRoles) return true
-  return roles.some(role => permissionRoles.indexOf(role) >= 0)
-}
-
 const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
 
-router.beforeEach((to, from, next) => {
-  NProgress.start() // start progress bar
-  if (getToken()) {
-    // determine if there has token
+router.beforeEach(async(to, from, next) => {
+  // start progress bar
+  NProgress.start()
+
+  // determine whether the user has logged in
+  const hasToken = getToken()
 
-    /* has token*/
+  if (hasToken) {
     if (to.path === '/login') {
+      // if is logged in, redirect to the home page
       next({ path: '/' })
-      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
+      NProgress.done()
     } else {
-      if (store.getters.roles.length === 0) {
-        // 判断当前用户是否已拉取完user_info信息
-        store
-          .dispatch('GetUserInfo')
-          .then(res => {
-            // 拉取user_info
-            const roles = res.data.roles // note: roles must be a object array! such as: [{id: '1', name: 'editor'}, {id: '2', name: 'developer'}]
-            store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
-              // 根据roles权限生成可访问的路由表
-              router.addRoutes(accessRoutes) // 动态添加可访问路由表
-              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
-            })
-          })
-          .catch(err => {
-            store.dispatch('FedLogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
-          })
+      // determine whether the user has obtained his permission roles through getInfo
+      const hasRoles = store.getters.roles && store.getters.roles.length > 0
+      if (hasRoles) {
+        next()
       } else {
-        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
-        if (hasPermission(store.getters.roles, to.meta.roles)) {
-          next()
-        } else {
-          next({ path: '/401', replace: true, query: { noGoBack: true }})
+        try {
+          // get user info
+          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+          const { roles } = await store.dispatch('user/getInfo')
+
+          // generate accessible routes map based on roles
+          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+
+          // dynamically add accessible routes
+          router.addRoutes(accessRoutes)
+
+          // hack method to ensure that addRoutes is complete
+          // set the replace: true, so the navigation will not leave a history record
+          next({ ...to, replace: true })
+        } catch (error) {
+          // remove token and go to login page to re-login
+          await store.dispatch('user/resetToken')
+          Message.error(error || 'Has Error')
+          next(`/login?redirect=${to.path}`)
+          NProgress.done()
         }
-        // 可删 ↑
       }
     }
   } else {
     /* has no token*/
+
     if (whiteList.indexOf(to.path) !== -1) {
-      // 在免登录白名单，直接进入
+      // in the free login whitelist, go directly
       next()
     } else {
-      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
-      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
+      // other pages that do not have permission to access are redirected to the login page.
+      next(`/login?redirect=${to.path}`)
+      NProgress.done()
     }
   }
 })
 
 router.afterEach(() => {
-  NProgress.done() // finish progress bar
+  // finish progress bar
+  NProgress.done()
 })
diff --git a/src/router/index.js b/src/router/index.js
index bc1d2a64..a883d398 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,13 +4,12 @@ import Router from 'vue-router'
 Vue.use(Router)
 
 /* Layout */
-import Layout from '@/views/layout/Layout'
+import Layout from '@/layout'
 
 /* Router Modules */
 import componentsRouter from './modules/components'
 import chartsRouter from './modules/charts'
 import tableRouter from './modules/table'
-import treeTableRouter from './modules/tree-table'
 import nestedRouter from './modules/nested'
 
 /** note: sub-menu only appear when children.length>=1
@@ -33,6 +32,12 @@ import nestedRouter from './modules/nested'
     affix: true                  if true, the tag will affix in the tags-view
   }
 **/
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ * */
 export const constantRoutes = [
   {
     path: '/redirect',
@@ -105,12 +110,10 @@ export const constantRoutes = [
   }
 ]
 
-export default new Router({
-  // mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
-
+/**
+ * asyncRoutes
+ * the routes that need to be dynamically loaded based on user roles
+*/
 export const asyncRoutes = [
   {
     path: '/permission',
@@ -166,12 +169,11 @@ export const asyncRoutes = [
     ]
   },
 
-  /** When your routing table is too long, you can split it into small modules**/
+  /** when your routing map is too long, you can split it into small modules **/
   componentsRouter,
   chartsRouter,
   nestedRouter,
   tableRouter,
-  treeTableRouter,
 
   {
     path: '/example',
@@ -383,3 +385,19 @@ export const asyncRoutes = [
 
   { path: '*', redirect: '/404', hidden: true }
 ]
+
+const createRouter = () => new Router({
+  // mode: 'history', // require service support
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRoutes
+})
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router
diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
index d11f6efd..7293490e 100644
--- a/src/router/modules/charts.js
+++ b/src/router/modules/charts.js
@@ -1,6 +1,6 @@
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from '@/views/layout/Layout'
+import Layout from '@/layout'
 
 const chartsRouter = {
   path: '/charts',
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 5fd9bd29..889c371d 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -1,6 +1,6 @@
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from '@/views/layout/Layout'
+import Layout from '@/layout'
 
 const componentsRouter = {
   path: '/components',
diff --git a/src/router/modules/nested.js b/src/router/modules/nested.js
index ad8e31f9..ee165c8c 100644
--- a/src/router/modules/nested.js
+++ b/src/router/modules/nested.js
@@ -1,6 +1,6 @@
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from '@/views/layout/Layout'
+import Layout from '@/layout'
 
 const nestedRouter = {
   path: '/nested',
diff --git a/src/router/modules/table.js b/src/router/modules/table.js
index 4d7f55ef..b54fb42d 100644
--- a/src/router/modules/table.js
+++ b/src/router/modules/table.js
@@ -1,6 +1,6 @@
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from '@/views/layout/Layout'
+import Layout from '@/layout'
 
 const tableRouter = {
   path: '/table',
diff --git a/src/router/modules/tree-table.js b/src/router/modules/tree-table.js
deleted file mode 100644
index 5ee26828..00000000
--- a/src/router/modules/tree-table.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/** When your routing table is too long, you can split it into small modules**/
-
-import Layout from '@/views/layout/Layout'
-
-const treeTableRouter = {
-  path: '/tree-table',
-  component: Layout,
-  redirect: '/table/complex-table',
-  name: 'TreeTable',
-  meta: {
-    title: 'treeTable',
-    icon: 'tree-table'
-  },
-  children: [
-    {
-      path: 'index',
-      component: () => import('@/views/tree-table/index'),
-      name: 'TreeTableDemo',
-      meta: { title: 'treeTable' }
-    },
-    {
-      path: 'custom',
-      component: () => import('@/views/tree-table/custom'),
-      name: 'CustomTreeTableDemo',
-      meta: { title: 'customTreeTable' }
-    }
-  ]
-}
-export default treeTableRouter
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 00000000..d6300efc
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,37 @@
+import variables from '@/styles/element-variables.scss'
+
+export default {
+  theme: variables.theme,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the settings right-panel
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether need tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether fix the header
+   */
+  fixedHeader: false,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  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/getters.js b/src/store/getters.js
index 797573f7..3fb5b068 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -9,9 +9,7 @@ const getters = {
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   introduction: state => state.user.introduction,
-  status: state => state.user.status,
   roles: state => state.user.roles,
-  setting: state => state.user.setting,
   permission_routes: state => state.permission.routes,
   addRoutes: state => state.permission.addRoutes,
   errorLogs: state => state.errorLog.logs
diff --git a/src/store/index.js b/src/store/index.js
index 24778fad..4842ea7e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ import app from './modules/app'
 import errorLog from './modules/errorLog'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import user from './modules/user'
 import getters from './getters'
 
@@ -15,6 +16,7 @@ const store = new Vuex.Store({
     errorLog,
     permission,
     tagsView,
+    settings,
     user
   },
   getters
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index fba4b05c..84875dd6 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,59 +1,64 @@
 import Cookies from 'js-cookie'
 
-const app = {
-  state: {
-    sidebar: {
-      opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
-      withoutAnimation: false
-    },
-    device: 'desktop',
-    language: Cookies.get('language') || 'en',
-    size: Cookies.get('size') || 'medium'
-  },
-  mutations: {
-    TOGGLE_SIDEBAR: state => {
-      state.sidebar.opened = !state.sidebar.opened
-      state.sidebar.withoutAnimation = false
-      if (state.sidebar.opened) {
-        Cookies.set('sidebarStatus', 1)
-      } else {
-        Cookies.set('sidebarStatus', 0)
-      }
-    },
-    CLOSE_SIDEBAR: (state, withoutAnimation) => {
+const state = {
+  sidebar: {
+    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    withoutAnimation: false
+  },
+  device: 'desktop',
+  language: Cookies.get('language') || 'en',
+  size: Cookies.get('size') || 'medium'
+}
+
+const mutations = {
+  TOGGLE_SIDEBAR: state => {
+    state.sidebar.opened = !state.sidebar.opened
+    state.sidebar.withoutAnimation = false
+    if (state.sidebar.opened) {
+      Cookies.set('sidebarStatus', 1)
+    } else {
       Cookies.set('sidebarStatus', 0)
-      state.sidebar.opened = false
-      state.sidebar.withoutAnimation = withoutAnimation
-    },
-    TOGGLE_DEVICE: (state, device) => {
-      state.device = device
-    },
-    SET_LANGUAGE: (state, language) => {
-      state.language = language
-      Cookies.set('language', language)
-    },
-    SET_SIZE: (state, size) => {
-      state.size = size
-      Cookies.set('size', size)
     }
   },
-  actions: {
-    toggleSideBar({ commit }) {
-      commit('TOGGLE_SIDEBAR')
-    },
-    closeSideBar({ commit }, { withoutAnimation }) {
-      commit('CLOSE_SIDEBAR', withoutAnimation)
-    },
-    toggleDevice({ commit }, device) {
-      commit('TOGGLE_DEVICE', device)
-    },
-    setLanguage({ commit }, language) {
-      commit('SET_LANGUAGE', language)
-    },
-    setSize({ commit }, size) {
-      commit('SET_SIZE', size)
-    }
+  CLOSE_SIDEBAR: (state, withoutAnimation) => {
+    Cookies.set('sidebarStatus', 0)
+    state.sidebar.opened = false
+    state.sidebar.withoutAnimation = withoutAnimation
+  },
+  TOGGLE_DEVICE: (state, device) => {
+    state.device = device
+  },
+  SET_LANGUAGE: (state, language) => {
+    state.language = language
+    Cookies.set('language', language)
+  },
+  SET_SIZE: (state, size) => {
+    state.size = size
+    Cookies.set('size', size)
   }
 }
 
-export default app
+const actions = {
+  toggleSideBar({ commit }) {
+    commit('TOGGLE_SIDEBAR')
+  },
+  closeSideBar({ commit }, { withoutAnimation }) {
+    commit('CLOSE_SIDEBAR', withoutAnimation)
+  },
+  toggleDevice({ commit }, device) {
+    commit('TOGGLE_DEVICE', device)
+  },
+  setLanguage({ commit }, language) {
+    commit('SET_LANGUAGE', language)
+  },
+  setSize({ commit }, size) {
+    commit('SET_SIZE', size)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
diff --git a/src/store/modules/errorLog.js b/src/store/modules/errorLog.js
index 50fc1b1a..c97d452a 100644
--- a/src/store/modules/errorLog.js
+++ b/src/store/modules/errorLog.js
@@ -1,17 +1,23 @@
-const errorLog = {
-  state: {
-    logs: []
-  },
-  mutations: {
-    ADD_ERROR_LOG: (state, log) => {
-      state.logs.push(log)
-    }
-  },
-  actions: {
-    addErrorLog({ commit }, log) {
-      commit('ADD_ERROR_LOG', log)
-    }
+
+const state = {
+  logs: []
+}
+
+const mutations = {
+  ADD_ERROR_LOG: (state, log) => {
+    state.logs.push(log)
   }
 }
 
-export default errorLog
+const actions = {
+  addErrorLog({ commit }, log) {
+    commit('ADD_ERROR_LOG', log)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index fba03bc3..820ca46b 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -34,32 +34,36 @@ export function filterAsyncRoutes(routes, roles) {
   return res
 }
 
-const permission = {
-  state: {
-    routes: [],
-    addRoutes: []
-  },
-  mutations: {
-    SET_ROUTES: (state, routes) => {
-      state.addRoutes = routes
-      state.routes = constantRoutes.concat(routes)
-    }
-  },
-  actions: {
-    GenerateRoutes({ commit }, data) {
-      return new Promise(resolve => {
-        const { roles } = data
-        let accessedRoutes
-        if (roles.includes('admin')) {
-          accessedRoutes = asyncRoutes
-        } else {
-          accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-        }
-        commit('SET_ROUTES', accessedRoutes)
-        resolve(accessedRoutes)
-      })
-    }
+const state = {
+  routes: [],
+  addRoutes: []
+}
+
+const mutations = {
+  SET_ROUTES: (state, routes) => {
+    state.addRoutes = routes
+    state.routes = constantRoutes.concat(routes)
   }
 }
 
-export default permission
+const actions = {
+  generateRoutes({ commit }, roles) {
+    return new Promise(resolve => {
+      let accessedRoutes
+      if (roles.includes('admin')) {
+        accessedRoutes = asyncRoutes
+      } else {
+        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+      }
+      commit('SET_ROUTES', accessedRoutes)
+      resolve(accessedRoutes)
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 00000000..8522a5aa
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,32 @@
+import defaultSettings from '@/settings'
+const { showSettings, tagsView, fixedHeader, sidebarLogo, theme } = defaultSettings
+
+const state = {
+  theme: theme,
+  showSettings: showSettings,
+  tagsView: tagsView,
+  fixedHeader: fixedHeader,
+  sidebarLogo: sidebarLogo
+}
+
+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/store/modules/tagsView.js b/src/store/modules/tagsView.js
index 378cbcd3..5cbe32f3 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -1,161 +1,166 @@
-const tagsView = {
-  state: {
-    visitedViews: [],
-    cachedViews: []
-  },
-  mutations: {
-    ADD_VISITED_VIEW: (state, view) => {
-      if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push(
-        Object.assign({}, view, {
-          title: view.meta.title || 'no-name'
-        })
-      )
-    },
-    ADD_CACHED_VIEW: (state, view) => {
-      if (state.cachedViews.includes(view.name)) return
-      if (!view.meta.noCache) {
-        state.cachedViews.push(view.name)
-      }
-    },
 
-    DEL_VISITED_VIEW: (state, view) => {
-      for (const [i, v] of state.visitedViews.entries()) {
-        if (v.path === view.path) {
-          state.visitedViews.splice(i, 1)
-          break
-        }
+const state = {
+  visitedViews: [],
+  cachedViews: []
+}
+
+const mutations = {
+  ADD_VISITED_VIEW: (state, view) => {
+    if (state.visitedViews.some(v => v.path === view.path)) return
+    state.visitedViews.push(
+      Object.assign({}, view, {
+        title: view.meta.title || 'no-name'
+      })
+    )
+  },
+  ADD_CACHED_VIEW: (state, view) => {
+    if (state.cachedViews.includes(view.name)) return
+    if (!view.meta.noCache) {
+      state.cachedViews.push(view.name)
+    }
+  },
+
+  DEL_VISITED_VIEW: (state, view) => {
+    for (const [i, v] of state.visitedViews.entries()) {
+      if (v.path === view.path) {
+        state.visitedViews.splice(i, 1)
+        break
       }
-    },
-    DEL_CACHED_VIEW: (state, view) => {
-      for (const i of state.cachedViews) {
-        if (i === view.name) {
-          const index = state.cachedViews.indexOf(i)
-          state.cachedViews.splice(index, 1)
-          break
-        }
+    }
+  },
+  DEL_CACHED_VIEW: (state, view) => {
+    for (const i of state.cachedViews) {
+      if (i === view.name) {
+        const index = state.cachedViews.indexOf(i)
+        state.cachedViews.splice(index, 1)
+        break
       }
-    },
+    }
+  },
 
-    DEL_OTHERS_VISITED_VIEWS: (state, view) => {
-      state.visitedViews = state.visitedViews.filter(v => {
-        return v.meta.affix || v.path === view.path
-      })
-    },
-    DEL_OTHERS_CACHED_VIEWS: (state, view) => {
-      for (const i of state.cachedViews) {
-        if (i === view.name) {
-          const index = state.cachedViews.indexOf(i)
-          state.cachedViews = state.cachedViews.slice(index, index + 1)
-          break
-        }
+  DEL_OTHERS_VISITED_VIEWS: (state, view) => {
+    state.visitedViews = state.visitedViews.filter(v => {
+      return v.meta.affix || v.path === view.path
+    })
+  },
+  DEL_OTHERS_CACHED_VIEWS: (state, view) => {
+    for (const i of state.cachedViews) {
+      if (i === view.name) {
+        const index = state.cachedViews.indexOf(i)
+        state.cachedViews = state.cachedViews.slice(index, index + 1)
+        break
       }
-    },
+    }
+  },
 
-    DEL_ALL_VISITED_VIEWS: state => {
-      // keep affix tags
-      const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
-      state.visitedViews = affixTags
-    },
-    DEL_ALL_CACHED_VIEWS: state => {
-      state.cachedViews = []
-    },
+  DEL_ALL_VISITED_VIEWS: state => {
+    // keep affix tags
+    const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
+    state.visitedViews = affixTags
+  },
+  DEL_ALL_CACHED_VIEWS: state => {
+    state.cachedViews = []
+  },
 
-    UPDATE_VISITED_VIEW: (state, view) => {
-      for (let v of state.visitedViews) {
-        if (v.path === view.path) {
-          v = Object.assign(v, view)
-          break
-        }
+  UPDATE_VISITED_VIEW: (state, view) => {
+    for (let v of state.visitedViews) {
+      if (v.path === view.path) {
+        v = Object.assign(v, view)
+        break
       }
     }
+  }
+}
 
+const actions = {
+  addView({ dispatch }, view) {
+    dispatch('addVisitedView', view)
+    dispatch('addCachedView', view)
+  },
+  addVisitedView({ commit }, view) {
+    commit('ADD_VISITED_VIEW', view)
+  },
+  addCachedView({ commit }, view) {
+    commit('ADD_CACHED_VIEW', view)
   },
-  actions: {
-    addView({ dispatch }, view) {
-      dispatch('addVisitedView', view)
-      dispatch('addCachedView', view)
-    },
-    addVisitedView({ commit }, view) {
-      commit('ADD_VISITED_VIEW', view)
-    },
-    addCachedView({ commit }, view) {
-      commit('ADD_CACHED_VIEW', view)
-    },
 
-    delView({ dispatch, state }, view) {
-      return new Promise(resolve => {
-        dispatch('delVisitedView', view)
-        dispatch('delCachedView', view)
-        resolve({
-          visitedViews: [...state.visitedViews],
-          cachedViews: [...state.cachedViews]
-        })
-      })
-    },
-    delVisitedView({ commit, state }, view) {
-      return new Promise(resolve => {
-        commit('DEL_VISITED_VIEW', view)
-        resolve([...state.visitedViews])
+  delView({ dispatch, state }, view) {
+    return new Promise(resolve => {
+      dispatch('delVisitedView', view)
+      dispatch('delCachedView', view)
+      resolve({
+        visitedViews: [...state.visitedViews],
+        cachedViews: [...state.cachedViews]
       })
-    },
-    delCachedView({ commit, state }, view) {
-      return new Promise(resolve => {
-        commit('DEL_CACHED_VIEW', view)
-        resolve([...state.cachedViews])
-      })
-    },
+    })
+  },
+  delVisitedView({ commit, state }, view) {
+    return new Promise(resolve => {
+      commit('DEL_VISITED_VIEW', view)
+      resolve([...state.visitedViews])
+    })
+  },
+  delCachedView({ commit, state }, view) {
+    return new Promise(resolve => {
+      commit('DEL_CACHED_VIEW', view)
+      resolve([...state.cachedViews])
+    })
+  },
 
-    delOthersViews({ dispatch, state }, view) {
-      return new Promise(resolve => {
-        dispatch('delOthersVisitedViews', view)
-        dispatch('delOthersCachedViews', view)
-        resolve({
-          visitedViews: [...state.visitedViews],
-          cachedViews: [...state.cachedViews]
-        })
-      })
-    },
-    delOthersVisitedViews({ commit, state }, view) {
-      return new Promise(resolve => {
-        commit('DEL_OTHERS_VISITED_VIEWS', view)
-        resolve([...state.visitedViews])
+  delOthersViews({ dispatch, state }, view) {
+    return new Promise(resolve => {
+      dispatch('delOthersVisitedViews', view)
+      dispatch('delOthersCachedViews', view)
+      resolve({
+        visitedViews: [...state.visitedViews],
+        cachedViews: [...state.cachedViews]
       })
-    },
-    delOthersCachedViews({ commit, state }, view) {
-      return new Promise(resolve => {
-        commit('DEL_OTHERS_CACHED_VIEWS', view)
-        resolve([...state.cachedViews])
-      })
-    },
+    })
+  },
+  delOthersVisitedViews({ commit, state }, view) {
+    return new Promise(resolve => {
+      commit('DEL_OTHERS_VISITED_VIEWS', view)
+      resolve([...state.visitedViews])
+    })
+  },
+  delOthersCachedViews({ commit, state }, view) {
+    return new Promise(resolve => {
+      commit('DEL_OTHERS_CACHED_VIEWS', view)
+      resolve([...state.cachedViews])
+    })
+  },
 
-    delAllViews({ dispatch, state }, view) {
-      return new Promise(resolve => {
-        dispatch('delAllVisitedViews', view)
-        dispatch('delAllCachedViews', view)
-        resolve({
-          visitedViews: [...state.visitedViews],
-          cachedViews: [...state.cachedViews]
-        })
-      })
-    },
-    delAllVisitedViews({ commit, state }) {
-      return new Promise(resolve => {
-        commit('DEL_ALL_VISITED_VIEWS')
-        resolve([...state.visitedViews])
+  delAllViews({ dispatch, state }, view) {
+    return new Promise(resolve => {
+      dispatch('delAllVisitedViews', view)
+      dispatch('delAllCachedViews', view)
+      resolve({
+        visitedViews: [...state.visitedViews],
+        cachedViews: [...state.cachedViews]
       })
-    },
-    delAllCachedViews({ commit, state }) {
-      return new Promise(resolve => {
-        commit('DEL_ALL_CACHED_VIEWS')
-        resolve([...state.cachedViews])
-      })
-    },
+    })
+  },
+  delAllVisitedViews({ commit, state }) {
+    return new Promise(resolve => {
+      commit('DEL_ALL_VISITED_VIEWS')
+      resolve([...state.visitedViews])
+    })
+  },
+  delAllCachedViews({ commit, state }) {
+    return new Promise(resolve => {
+      commit('DEL_ALL_CACHED_VIEWS')
+      resolve([...state.cachedViews])
+    })
+  },
 
-    updateVisitedView({ commit }, view) {
-      commit('UPDATE_VISITED_VIEW', view)
-    }
+  updateVisitedView({ commit }, view) {
+    commit('UPDATE_VISITED_VIEW', view)
   }
 }
 
-export default tagsView
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 38e81a36..f27615b0 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,144 +1,128 @@
-import { loginByUsername, logout, getUserInfo } from '@/api/login'
+import { login, logout, getInfo } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import router, { resetRouter } from '@/router'
 
-const user = {
-  state: {
-    user: '',
-    status: '',
-    code: '',
-    token: getToken(),
-    name: '',
-    avatar: '',
-    introduction: '',
-    roles: [],
-    setting: {
-      articlePlatform: []
-    }
-  },
+const state = {
+  token: getToken(),
+  name: '',
+  avatar: '',
+  introduction: '',
+  roles: []
+}
 
-  mutations: {
-    SET_CODE: (state, code) => {
-      state.code = code
-    },
-    SET_TOKEN: (state, token) => {
-      state.token = token
-    },
-    SET_INTRODUCTION: (state, introduction) => {
-      state.introduction = introduction
-    },
-    SET_SETTING: (state, setting) => {
-      state.setting = setting
-    },
-    SET_STATUS: (state, status) => {
-      state.status = status
-    },
-    SET_NAME: (state, name) => {
-      state.name = name
-    },
-    SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
-    },
-    SET_ROLES: (state, roles) => {
-      state.roles = roles
-    }
+const mutations = {
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  },
+  SET_INTRODUCTION: (state, introduction) => {
+    state.introduction = introduction
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
   },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  },
+  SET_ROLES: (state, roles) => {
+    state.roles = roles
+  }
+}
 
-  actions: {
-    // 用户名登录
-    LoginByUsername({ commit }, userInfo) {
-      const username = userInfo.username.trim()
-      return new Promise((resolve, reject) => {
-        loginByUsername(username, userInfo.password).then(response => {
-          const data = response.data
-          commit('SET_TOKEN', data.token)
-          setToken(response.data.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 获取用户信息
-    GetUserInfo({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        getUserInfo(state.token).then(response => {
-          // 由于mockjs 不支持自定义状态码只能这样hack
-          if (!response.data) {
-            reject('Verification failed, please login again.')
-          }
-          const data = response.data
-
-          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', data.roles)
-          } else {
-            reject('getInfo: roles must be a non-null array!')
-          }
-
-          commit('SET_NAME', data.name)
-          commit('SET_AVATAR', data.avatar)
-          commit('SET_INTRODUCTION', data.introduction)
-          resolve(response)
-        }).catch(error => {
-          reject(error)
-        })
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { username, password } = userInfo
+    return new Promise((resolve, reject) => {
+      login({ username: username.trim(), password: password }).then(response => {
+        const { data } = response
+        commit('SET_TOKEN', data.token)
+        setToken(data.token)
+        resolve()
+      }).catch(error => {
+        reject(error)
       })
-    },
-
-    // 第三方验证登录
-    // LoginByThirdparty({ commit, state }, code) {
-    //   return new Promise((resolve, reject) => {
-    //     commit('SET_CODE', code)
-    //     loginByThirdparty(state.status, state.email, state.code).then(response => {
-    //       commit('SET_TOKEN', response.data.token)
-    //       setToken(response.data.token)
-    //       resolve()
-    //     }).catch(error => {
-    //       reject(error)
-    //     })
-    //   })
-    // },
-
-    // 登出
-    LogOut({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          removeToken()
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
+    })
+  },
+
+  // get user info
+  getInfo({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getInfo(state.token).then(response => {
+        const { data } = response
+
+        if (!data) {
+          reject('Verification failed, please Login again.')
+        }
+
+        const { roles, name, avatar, introduction } = data
+
+        // roles must be a non-empty array
+        if (!roles || roles.length <= 0) {
+          reject('getInfo: roles must be a non-null array!')
+        }
+
+        commit('SET_ROLES', roles)
+        commit('SET_NAME', name)
+        commit('SET_AVATAR', avatar)
+        commit('SET_INTRODUCTION', introduction)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
       })
-    },
+    })
+  },
 
-    // 前端 登出
-    FedLogOut({ commit }) {
-      return new Promise(resolve => {
+  // user logout
+  logout({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      logout(state.token).then(() => {
         commit('SET_TOKEN', '')
+        commit('SET_ROLES', [])
         removeToken()
+        resetRouter()
         resolve()
+      }).catch(error => {
+        reject(error)
       })
-    },
-
-    // 动态修改权限
-    ChangeRoles({ commit, dispatch }, role) {
-      return new Promise(resolve => {
-        commit('SET_TOKEN', role)
-        setToken(role)
-        getUserInfo(role).then(response => {
-          const data = response.data
-          commit('SET_ROLES', data.roles)
-          commit('SET_NAME', data.name)
-          commit('SET_AVATAR', data.avatar)
-          commit('SET_INTRODUCTION', data.introduction)
-          dispatch('GenerateRoutes', data) // 动态修改权限后 重绘侧边菜单
-          resolve()
-        })
-      })
-    }
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      commit('SET_TOKEN', '')
+      commit('SET_ROLES', [])
+      removeToken()
+      resolve()
+    })
+  },
+
+  // Dynamically modify permissions
+  changeRoles({ commit, dispatch }, role) {
+    return new Promise(async resolve => {
+      const token = role + '-token'
+
+      commit('SET_TOKEN', token)
+      setToken(token)
+
+      const { roles } = await dispatch('getInfo')
+
+      resetRouter()
+
+      // generate accessible routes map based on roles
+      const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
+
+      // dynamically add accessible routes
+      router.addRoutes(accessRoutes)
+
+      resolve()
+    })
   }
 }
 
-export default user
+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 00000000..30a0e6bc
--- /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: #1890ff;
+$--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/sidebar.scss b/src/styles/sidebar.scss
index 03449706..5911eb85 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -38,6 +38,16 @@
       right: 0px;
     }
 
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
     .is-horizontal {
       display: none;
     }
@@ -100,6 +110,7 @@
 
       .el-tooltip {
         padding: 0 !important;
+
         .svg-icon {
           margin-left: 20px;
         }
@@ -111,6 +122,7 @@
 
       &>.el-submenu__title {
         padding: 0 !important;
+
         .svg-icon {
           margin-left: 20px;
         }
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index ab68317d..7b5e4bfd 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -1,4 +1,4 @@
-//globl transition css
+//global transition css
 
 /*fade*/
 .fade-enter-active,
diff --git a/src/utils/errorLog.js b/src/utils/errorLog.js
new file mode 100644
index 00000000..c508c789
--- /dev/null
+++ b/src/utils/errorLog.js
@@ -0,0 +1,35 @@
+import Vue from 'vue'
+import store from '@/store'
+import { isString, isArray } from '@/utils/validate'
+import settings from '@/settings'
+
+// you can set in settings.js
+// errorLog:'production' | ['production','development']
+const { errorLog: needErrorLog } = settings
+
+function checkNeed(arg) {
+  const env = process.env.NODE_ENV
+  if (isString(needErrorLog)) {
+    return env === needErrorLog
+  }
+  if (isArray(needErrorLog)) {
+    return needErrorLog.includes(env)
+  }
+  return false
+}
+
+if (checkNeed()) {
+  Vue.config.errorHandler = function(err, vm, info, a) {
+  // Don't ask me why I use Vue.nextTick, it just a hack.
+  // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
+    Vue.nextTick(() => {
+      store.dispatch('errorLog/addErrorLog', {
+        err,
+        vm,
+        info,
+        url: window.location.href
+      })
+      console.error(err, info)
+    })
+  }
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 1df0f45d..bfff4dda 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -41,7 +41,11 @@ export function parseTime(time, cFormat) {
 }
 
 export function formatTime(time, option) {
-  time = +time * 1000
+  if (('' + time).length === 10) {
+    time = parseInt(time) * 1000
+  } else {
+    time = +time
+  }
   const d = new Date(time)
   const now = Date.now()
 
@@ -296,3 +300,16 @@ export function createUniqueString() {
   const randomNum = parseInt((1 + Math.random()) * 65536) + ''
   return (+(randomNum + timestamp)).toString(32)
 }
+
+export function hasClass(ele, cls) {
+  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+}
+export function addClass(ele, cls) {
+  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+}
+export function removeClass(ele, cls) {
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
+    ele.className = ele.className.replace(reg, ' ')
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 50f9ecec..a9b8c18f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,11 +1,12 @@
 import axios from 'axios'
-import { Message } from 'element-ui'
+import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.BASE_API, // api 的 base_url
+  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
+  withCredentials: true, // 跨域请求时发送 cookies
   timeout: 5000 // request timeout
 })
 
@@ -28,40 +29,43 @@ service.interceptors.request.use(
 
 // response interceptor
 service.interceptors.response.use(
-  response => response,
+  /**
+   * If you want to get information such as headers or status
+   * Please return  response => response
+  */
   /**
    * 下面的注释为通过在response里，自定义code来标示请求状态
    * 当code返回如下情况则说明权限有问题，登出并返回到登录页
-   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
+   * 如想通过 XMLHttpRequest 来状态码标识 逻辑可写在下面error中
    * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
    */
-  // response => {
-  //   const res = response.data
-  //   if (res.code !== 20000) {
-  //     Message({
-  //       message: res.message,
-  //       type: 'error',
-  //       duration: 5 * 1000
-  //     })
-  //     // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
-  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-  //       // 请自行在引入 MessageBox
-  //       // import { Message, MessageBox } from 'element-ui'
-  //       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
-  //         confirmButtonText: '重新登录',
-  //         cancelButtonText: '取消',
-  //         type: 'warning'
-  //       }).then(() => {
-  //         store.dispatch('FedLogOut').then(() => {
-  //           location.reload() // 为了重新实例化vue-router对象 避免bug
-  //         })
-  //       })
-  //     }
-  //     return Promise.reject('error')
-  //   } else {
-  //     return response.data
-  //   }
-  // },
+  response => {
+    const res = response.data
+    if (res.code !== 20000) {
+      Message({
+        message: res.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        // 请自行在引入 MessageBox
+        // import { Message, MessageBox } from 'element-ui'
+        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload() // 为了重新实例化vue-router对象 避免bug
+          })
+        })
+      }
+      return Promise.reject('error')
+    } else {
+      return res
+    }
+  },
   error => {
     console.log('err' + error) // for debug
     Message({
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 5e4056f5..ba93d1c3 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -11,36 +11,41 @@ export function validUsername(str) {
   return valid_map.indexOf(str.trim()) >= 0
 }
 
-/* 合法uri*/
 export function validURL(url) {
   const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
   return reg.test(url)
 }
 
-/* 小写字母*/
 export function validLowerCase(str) {
   const reg = /^[a-z]+$/
   return reg.test(str)
 }
 
-/* 大写字母*/
 export function validUpperCase(str) {
   const reg = /^[A-Z]+$/
   return reg.test(str)
 }
 
-/* 大小写字母*/
 export function validAlphabets(str) {
   const reg = /^[A-Za-z]+$/
   return reg.test(str)
 }
 
-/**
- * validate email
- * @param email
- * @returns {boolean}
- */
 export function validEmail(email) {
-  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-  return re.test(email)
+  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return reg.test(email)
+}
+
+export function isString(str) {
+  if (typeof str === 'string' || str instanceof String) {
+    return true
+  }
+  return false
+}
+
+export function isArray(arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
 }
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index 54fbf946..e78c6359 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -3,11 +3,15 @@
     <el-tabs v-model="activeName">
       <el-tab-pane label="use clipboard  directly" name="directly">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">copy</el-button>
+        <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">
+          copy
+        </el-button>
       </el-tab-pane>
       <el-tab-pane label="use clipboard by v-directive" name="v-directive">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
+        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">
+          copy
+        </el-button>
       </el-tab-pane>
     </el-tabs>
   </div>
diff --git a/src/views/components-demo/countTo.vue b/src/views/components-demo/countTo.vue
index de9339bc..9fae2694 100644
--- a/src/views/components-demo/countTo.vue
+++ b/src/views/components-demo/countTo.vue
@@ -25,8 +25,12 @@
       <label class="label" for="durationInput">duration:
         <input v-model.number="setDuration" type="number" name="durationInput">
       </label>
-      <div class="startBtn example-btn" @click="start">开始</div>
-      <div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
+      <div class="startBtn example-btn" @click="start">
+        Start
+      </div>
+      <div class="pause-resume-btn example-btn" @click="pauseResume">
+        pause/resume
+      </div>
       <br>
       <label class="label" for="decimalsInput">decimals:
         <input v-model.number="setDecimals" type="number" name="decimalsInput">
@@ -41,11 +45,9 @@
         <input v-model="setSuffix" name="suffixInput">
       </label>
     </div>
-    <code>
-      &lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
+    <code>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
       :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
-      :autoplay=false&gt;
-    </code>
+      :autoplay=false&gt;</code>
   </div>
 </template>
 
diff --git a/src/views/components-demo/dragDialog.vue b/src/views/components-demo/dragDialog.vue
index ae4b4900..3c985552 100644
--- a/src/views/components-demo/dragDialog.vue
+++ b/src/views/components-demo/dragDialog.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="components-container">
-    <el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
+    <el-button type="primary" @click="dialogTableVisible = true">
+      open a Drag Dialog
+    </el-button>
     <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
       <el-select ref="select" v-model="value" placeholder="请选择">
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
diff --git a/src/views/components-demo/dragKanban.vue b/src/views/components-demo/dragKanban.vue
index bbbfe3df..943be455 100644
--- a/src/views/components-demo/dragKanban.vue
+++ b/src/views/components-demo/dragKanban.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="components-container board">
-    <Kanban :key="1" :list="list1" :options="options" class="kanban todo" header-text="Todo" />
-    <Kanban :key="2" :list="list2" :options="options" class="kanban working" header-text="Working" />
-    <Kanban :key="3" :list="list3" :options="options" class="kanban done" header-text="Done" />
+    <Kanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="Todo" />
+    <Kanban :key="2" :list="list2" :group="group" class="kanban working" header-text="Working" />
+    <Kanban :key="3" :list="list3" :group="group" class="kanban done" header-text="Done" />
   </div>
 </template>
 <script>
@@ -15,9 +15,7 @@ export default {
   },
   data() {
     return {
-      options: {
-        group: 'mission'
-      },
+      group: 'mission',
       list1: [
         { name: 'Mission', id: 1 },
         { name: 'Mission', id: 2 },
diff --git a/src/views/components-demo/dragSelect.vue b/src/views/components-demo/dragSelect.vue
index c2ac4b9b..905ecb94 100644
--- a/src/views/components-demo/dragSelect.vue
+++ b/src/views/components-demo/dragSelect.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="components-container">
-
     <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
       <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
     </el-drag-select>
 
     <div style="margin-top:30px;">
-      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">{{ item }}</el-tag>
+      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">
+        {{ item }}
+      </el-tag>
     </div>
-
   </div>
 </template>
 
diff --git a/src/views/components-demo/jsonEditor.vue b/src/views/components-demo/jsonEditor.vue
index 06e60114..01fed710 100644
--- a/src/views/components-demo/jsonEditor.vue
+++ b/src/views/components-demo/jsonEditor.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="components-container">
-    <code>JsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
+    <code>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
+      base on <a
+        href="https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
+        target="_blank"
+      >json-lint</a>.</code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value" />
     </div>
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index fb6b503b..8483a470 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -1,41 +1,51 @@
 <template>
   <div class="components-container">
-
     <code>Markdown is based on
-      <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，Simply encapsulated in Vue.
-      <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html">
+      <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
+      <a
+        target="_blank"
+        href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
+      >
         Documentation </a>
     </code>
 
     <div class="editor-container">
-      <el-tag class="tag-title">Basic:</el-tag>
-      <markdown-editor v-model="content" height="300px" />
+      <el-tag class="tag-title">
+        Basic:
+      </el-tag>
+      <markdown-editor v-model="content1" height="300px" />
     </div>
 
     <div class="editor-container">
-      <el-tag class="tag-title">Markdown Mode:</el-tag>
-      <markdown-editor ref="markdownEditor" v-model="content" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
+      <el-tag class="tag-title">
+        Markdown Mode:
+      </el-tag>
+      <markdown-editor ref="markdownEditor" v-model="content2" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
     </div>
 
     <div class="editor-container">
-      <el-tag class="tag-title">Customize Toolbar:</el-tag>
-      <markdown-editor
-        ref="markdownEditor"
-        v-model="content"
-        :options="{ toolbarItems: ['heading','bold','italic']}"
-      />
+      <el-tag class="tag-title">
+        Customize Toolbar:
+      </el-tag>
+      <markdown-editor v-model="content3" :options="{ toolbarItems: ['heading','bold','italic']}" />
     </div>
 
     <div class="editor-container">
-      <el-tag class="tag-title">I18n:</el-tag>
-      <el-alert :closable="false" title="You can change the language of the admin system to see the effect" type="success" />
-      <markdown-editor v-model="content" :language="language" height="300px" />
+      <el-tag class="tag-title">
+        I18n:
+      </el-tag>
+      <el-alert
+        :closable="false"
+        title="You can change the language of the admin system to see the effect"
+        type="success"
+      />
+      <markdown-editor ref="markdownEditor" v-model="content4" :language="language" height="300px" />
     </div>
 
-    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">Get HTML</el-button>
-    <!-- eslint-disable-next-line -->
+    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
+      Get HTML
+    </el-button>
     <div v-html="html" />
-
   </div>
 </template>
 
@@ -55,7 +65,10 @@ export default {
   components: { MarkdownEditor },
   data() {
     return {
-      content: content,
+      content1: content,
+      content2: content,
+      content3: content,
+      content4: content,
       html: '',
       languageTypeList: {
         'en': 'en_US',
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 08bca0a2..18e9ef88 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -7,22 +7,34 @@
         </div>
         <div style="margin-bottom:50px;">
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn blue-btn" to="/documentation/index">Documentation</router-link>
+            <router-link class="pan-btn blue-btn" to="/documentation/index">
+              Documentation
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn light-blue-btn" to="/icon/index">Icons</router-link>
+            <router-link class="pan-btn light-blue-btn" to="/icon/index">
+              Icons
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn pink-btn" to="/excel/export-excel">Excel</router-link>
+            <router-link class="pan-btn pink-btn" to="/excel/export-excel">
+              Excel
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn green-btn" to="/table/complex-table">Table</router-link>
+            <router-link class="pan-btn green-btn" to="/table/complex-table">
+              Table
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn tiffany-btn" to="/example/create">Form</router-link>
+            <router-link class="pan-btn tiffany-btn" to="/example/create">
+              Form
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
+            <router-link class="pan-btn yellow-btn" to="/theme/index">
+              Theme
+            </router-link>
           </el-col>
         </div>
       </el-card>
@@ -37,7 +49,9 @@
           <div style="height:100px;">
             <el-form :model="demo" :rules="demoRules">
               <el-form-item prop="title">
-                <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">标题</md-input>
+                <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">
+                  标题
+                </md-input>
               </el-form-item>
             </el-form>
           </div>
@@ -63,7 +77,9 @@
             <span>水波纹 waves v-directive</span>
           </div>
           <div class="component-item">
-            <el-button v-waves type="primary">水波纹效果</el-button>
+            <el-button v-waves type="primary">
+              水波纹效果
+            </el-button>
           </div>
         </el-card>
       </el-col>
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index c49b089d..b1e6c89e 100644
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <sticky class-name="sub-navbar">
+    <sticky :z-index="10" class-name="sub-navbar">
       <el-dropdown trigger="click">
         <el-button plain>
           Platform<i class="el-icon-caret-bottom el-icon--right" />
@@ -20,7 +20,9 @@
         </el-button>
         <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
           <el-input v-model="url" placeholder="Please enter the content">
-            <template slot="prepend">Url</template>
+            <template slot="prepend">
+              Url
+            </template>
           </el-input>
         </el-dropdown-menu>
       </el-dropdown>
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index 22e72647..e1d72d1f 100644
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -7,7 +7,6 @@
     <div>
       <tinymce v-model="content" :height="300" />
     </div>
-    <!-- eslint-disable-next-line -->
     <div class="editor-content" v-html="content" />
   </div>
 </template>
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
index 0ab38b1b..dff8462a 100644
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -61,14 +61,14 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" >
+<style lang="scss" >
 .box-card-component{
   .el-card__header {
     padding: 0px!important;
   }
 }
 </style>
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .box-card-component {
   .box-card-header {
     position: relative;
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 61c237cb..34a6709b 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -6,7 +6,9 @@
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">New Visits</div>
+          <div class="card-panel-text">
+            New Visits
+          </div>
           <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
         </div>
       </div>
@@ -17,7 +19,9 @@
           <svg-icon icon-class="message" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Messages</div>
+          <div class="card-panel-text">
+            Messages
+          </div>
           <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
         </div>
       </div>
@@ -28,7 +32,9 @@
           <svg-icon icon-class="money" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Purchases</div>
+          <div class="card-panel-text">
+            Purchases
+          </div>
           <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
         </div>
       </div>
@@ -39,7 +45,9 @@
           <svg-icon icon-class="shopping" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Shoppings</div>
+          <div class="card-panel-text">
+            Shoppings
+          </div>
           <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
         </div>
       </div>
@@ -62,7 +70,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .panel-group {
   margin-top: 18px;
   .card-panel-col{
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
index f2b217d9..3eb8cb6c 100644
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/transaction'
+import { transactionList } from '@/api/remoteSearch'
 
 export default {
   filters: {
@@ -46,7 +46,7 @@ export default {
   },
   methods: {
     fetchData() {
-      fetchList().then(response => {
+      transactionList().then(response => {
         this.list = response.data.items.slice(0, 8)
       })
     }
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 85dcc186..f06689ae 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="dashboard-editor-container">
-
     <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
 
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
@@ -38,7 +37,6 @@
         <box-card />
       </el-col>
     </el-row>
-
   </div>
 </template>
 
@@ -98,7 +96,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .dashboard-editor-container {
   padding: 32px;
   background-color: rgb(240, 242, 245);
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index 7775ce39..9723bcce 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -40,7 +40,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   .emptyGif {
     display: block;
     width: 45%;
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index 5004e82b..2fed7398 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -29,7 +29,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .documentation-container {
   margin: 50px;
   .document-btn {
diff --git a/src/views/errorPage/401.vue b/src/views/errorPage/401.vue
index 24420126..032e808f 100644
--- a/src/views/errorPage/401.vue
+++ b/src/views/errorPage/401.vue
@@ -1,18 +1,26 @@
 <template>
   <div class="errPage-container">
-    <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+      返回
+    </el-button>
     <el-row>
       <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">Oops!</h1>
+        <h1 class="text-jumbo text-ginormous">
+          Oops!
+        </h1>
         gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
         <h2>你没有权限去该页面</h2>
         <h6>如有不满请联系你领导</h6>
         <ul class="list-unstyled">
           <li>或者你可以去:</li>
           <li class="link-type">
-            <router-link to="/dashboard">回首页</router-link>
+            <router-link to="/dashboard">
+              回首页
+            </router-link>
+          </li>
+          <li class="link-type">
+            <a href="https://www.taobao.com/">随便看看</a>
           </li>
-          <li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li>
           <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
         </ul>
       </el-col>
@@ -50,7 +58,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   .errPage-container {
     width: 800px;
     max-width: 100%;
diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue
index 94a2b07b..66cb3eae 100644
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -8,14 +8,22 @@
         <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
       </div>
       <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__oops">
+          OOPS!
+        </div>
         <div class="bullshit__info">
           版权所有
           <a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
         </div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
-        <router-link to="/" class="bullshit__return-home">返回首页</router-link>
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">
+          请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
+        </div>
+        <router-link to="/" class="bullshit__return-home">
+          返回首页
+        </router-link>
       </div>
     </div>
   </div>
@@ -33,7 +41,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .wscn-http404-container{
   transform: translate(-50%,-50%);
   position: absolute;
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index 27d42ccc..55d825fe 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="createPost-container">
     <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
-
-      <sticky :class-name="'sub-navbar '+postForm.status">
+      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
         <CommentDropdown v-model="postForm.comment_disabled" />
         <PlatformDropdown v-model="postForm.platforms" />
         <SourceUrlDropdown v-model="postForm.source_uri" />
         <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
           发布
         </el-button>
-        <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
+        <el-button v-loading="loading" type="warning" @click="draftForm">
+          草稿
+        </el-button>
       </sticky>
 
       <div class="createPost-main-container">
         <el-row>
-
           <Warning />
 
           <el-col :span="24">
@@ -71,7 +71,6 @@
         </el-form-item>
       </div>
     </el-form>
-
   </div>
 </template>
 
@@ -82,7 +81,7 @@ import MDinput from '@/components/MDinput'
 import Sticky from '@/components/Sticky' // 粘性header组件
 import { validURL } from '@/utils/validate'
 import { fetchArticle } from '@/api/article'
-import { userSearch } from '@/api/remoteSearch'
+import { searchUser } from '@/api/remoteSearch'
 import Warning from './Warning'
 import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
 
@@ -187,7 +186,7 @@ export default {
     setTagsViewTitle() {
       const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
       const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
-      this.$store.dispatch('updateVisitedView', route)
+      this.$store.dispatch('tagsView/updateVisitedView', route)
     },
     submitForm() {
       this.postForm.display_time = parseInt(this.display_time / 1000)
@@ -226,7 +225,7 @@ export default {
       this.postForm.status = 'draft'
     },
     getRemoteUserList(query) {
-      userSearch(query).then(response => {
+      searchUser(query).then(response => {
         if (!response.data.items) return
         this.userListOptions = response.data.items.map(v => v.name)
       })
@@ -235,7 +234,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 @import "~@/styles/mixin.scss";
 .createPost-container {
   position: relative;
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
index e90d3443..2e7cc6c6 100644
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-
     <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
       <el-table-column align="center" label="ID" width="80">
         <template slot-scope="scope">
@@ -28,13 +27,14 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
         </template>
       </el-table-column>
 
       <el-table-column min-width="300px" label="Title">
         <template slot-scope="scope">
-
           <router-link :to="'/example/edit/'+scope.row.id" class="link-type">
             <span>{{ scope.row.title }}</span>
           </router-link>
@@ -44,14 +44,15 @@
       <el-table-column align="center" label="Actions" width="120">
         <template slot-scope="scope">
           <router-link :to="'/example/edit/'+scope.row.id">
-            <el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
+            <el-button type="primary" size="small" icon="el-icon-edit">
+              Edit
+            </el-button>
           </router-link>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-
   </div>
 </template>
 
diff --git a/src/views/excel/components/AutoWidthOption.vue b/src/views/excel/components/AutoWidthOption.vue
index 06aad430..9050e659 100644
--- a/src/views/excel/components/AutoWidthOption.vue
+++ b/src/views/excel/components/AutoWidthOption.vue
@@ -2,8 +2,12 @@
   <div style="display:inline-block;">
     <label class="radio-label">Cell Auto-Width: </label>
     <el-radio-group v-model="autoWidth">
-      <el-radio :label="true" border>True</el-radio>
-      <el-radio :label="false" border>False</el-radio>
+      <el-radio :label="true" border>
+        True
+      </el-radio>
+      <el-radio :label="false" border>
+        False
+      </el-radio>
     </el-radio-group>
   </div>
 </template>
diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue
index 413b8822..253f1641 100644
--- a/src/views/excel/exportExcel.vue
+++ b/src/views/excel/exportExcel.vue
@@ -1,12 +1,13 @@
 <template>
   <!-- $t is vue-i18n global function to translate lang -->
   <div class="app-container">
-
     <div>
       <FilenameOption v-model="filename" />
       <AutoWidthOption v-model="autoWidth" />
       <BookTypeOption v-model="bookType" />
-      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
+      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">
+        {{ $t('excel.export') }} Excel
+      </el-button>
       <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
         <el-tag type="info">Documentation</el-tag>
       </a>
diff --git a/src/views/excel/selectExcel.vue b/src/views/excel/selectExcel.vue
index 7ee99c37..05c52f5f 100644
--- a/src/views/excel/selectExcel.vue
+++ b/src/views/excel/selectExcel.vue
@@ -2,7 +2,9 @@
   <div class="app-container">
     <!-- $t is vue-i18n global function to translate lang -->
     <el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:340px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">{{ $t('excel.selectedExport') }}</el-button>
+    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">
+      {{ $t('excel.selectedExport') }}
+    </el-button>
     <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
       <el-tag type="info">Documentation</el-tag>
     </a>
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index 49502aef..31ca3177 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -5,7 +5,9 @@
       <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
       </a>
     </p>
-    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">{{ $t('guide.button') }}</el-button>
+    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
+      {{ $t('guide.button') }}
+    </el-button>
   </div>
 </template>
 
diff --git a/src/views/i18n-demo/index.vue b/src/views/i18n-demo/index.vue
index fad364af..60c9a80e 100644
--- a/src/views/i18n-demo/index.vue
+++ b/src/views/i18n-demo/index.vue
@@ -7,11 +7,19 @@
       </div>
       <div>
         <el-radio-group v-model="lang" size="small">
-          <el-radio label="zh" border>简体中文</el-radio>
-          <el-radio label="en" border>English</el-radio>
-          <el-radio label="es" border>Español</el-radio>
+          <el-radio label="zh" border>
+            简体中文
+          </el-radio>
+          <el-radio label="en" border>
+            English
+          </el-radio>
+          <el-radio label="es" border>
+            Español
+          </el-radio>
         </el-radio-group>
-        <el-tag style="margin-top:15px;display:block;" type="info">{{ $t('i18nView.note') }}</el-tag>
+        <el-tag style="margin-top:15px;display:block;" type="info">
+          {{ $t('i18nView.note') }}
+        </el-tag>
       </div>
     </el-card>
 
@@ -31,12 +39,24 @@
           </el-select>
         </div>
         <div class="block">
-          <el-button class="item-btn" size="small">{{ $t('i18nView.default') }}</el-button>
-          <el-button class="item-btn" size="small" type="primary">{{ $t('i18nView.primary') }}</el-button>
-          <el-button class="item-btn" size="small" type="success">{{ $t('i18nView.success') }}</el-button>
-          <el-button class="item-btn" size="small" type="info">{{ $t('i18nView.info') }}</el-button>
-          <el-button class="item-btn" size="small" type="warning">{{ $t('i18nView.warning') }}</el-button>
-          <el-button class="item-btn" size="small" type="danger">{{ $t('i18nView.danger') }}</el-button>
+          <el-button class="item-btn" size="small">
+            {{ $t('i18nView.default') }}
+          </el-button>
+          <el-button class="item-btn" size="small" type="primary">
+            {{ $t('i18nView.primary') }}
+          </el-button>
+          <el-button class="item-btn" size="small" type="success">
+            {{ $t('i18nView.success') }}
+          </el-button>
+          <el-button class="item-btn" size="small" type="info">
+            {{ $t('i18nView.info') }}
+          </el-button>
+          <el-button class="item-btn" size="small" type="warning">
+            {{ $t('i18nView.warning') }}
+          </el-button>
+          <el-button class="item-btn" size="small" type="danger">
+            {{ $t('i18nView.danger') }}
+          </el-button>
         </div>
       </el-col>
       <el-col :span="12" :xs="24">
@@ -90,7 +110,7 @@ export default {
       },
       set(lang) {
         this.$i18n.locale = lang
-        this.$store.dispatch('setLanguage', lang)
+        this.$store.dispatch('app/setLanguage', lang)
       }
     }
   },
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 4d0eaa2b..00000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar class="sidebar-container" />
-    <div class="main-container">
-      <navbar />
-      <tags-view />
-      <app-main />
-    </div>
-  </div>
-</template>
-
-<script>
-import { Navbar, Sidebar, AppMain, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-
-export default {
-  name: 'Layout',
-  components: {
-    Navbar,
-    Sidebar,
-    AppMain,
-    TagsView
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    sidebar() {
-      return this.$store.state.app.sidebar
-    },
-    device() {
-      return this.$store.state.app.device
-    },
-    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 "~@/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;
-  }
-</style>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
deleted file mode 100644
index 4c4d6db4..00000000
--- a/src/views/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :default-active="$route.path"
-      :collapse="isCollapse"
-      :background-color="variables.menuBg"
-      :text-color="variables.menuText"
-      :active-text-color="variables.menuActiveText"
-      :collapse-transition="false"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import SidebarItem from './SidebarItem'
-import variables from '@/styles/variables.scss'
-
-export default {
-  components: { SidebarItem },
-  computed: {
-    ...mapGetters([
-      'permission_routes',
-      'sidebar'
-    ]),
-    variables() {
-      return variables
-    },
-    isCollapse() {
-      return !this.sidebar.opened
-    }
-  }
-}
-</script>
diff --git a/src/views/login/authredirect.vue b/src/views/login/authredirect.vue
index e749412b..69e15397 100644
--- a/src/views/login/authredirect.vue
+++ b/src/views/login/authredirect.vue
@@ -1,10 +1,15 @@
 <script>
 export default {
-  name: 'AuthRedirect',
+  name: 'Authredirect',
   created() {
     const hash = window.location.search.slice(1)
-    window.opener.location.href = window.location.origin + '/login#' + hash
-    window.close()
+    if (window.localStorage) {
+      window.localStorage.setItem('x-admin-oauth-code', hash)
+      window.close()
+    }
+  },
+  render: function(h) {
+    return h() // avoid warning message
   }
 }
 </script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 1d43a2ab..ac467584 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="login-container">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+
       <div class="title-container">
         <h3 class="title">
           {{ $t('login.title') }}
@@ -27,6 +28,7 @@
           <svg-icon icon-class="password" />
         </span>
         <el-input
+          :key="passwordType"
           ref="password"
           v-model="loginForm.password"
           :type="passwordType"
@@ -119,7 +121,7 @@ export default {
     }
   },
   created() {
-    // window.addEventListener('hashchange', this.afterQRScan)
+    // window.addEventListener('storage', this.afterQRScan)
   },
   mounted() {
     if (this.loginForm.username === '') {
@@ -129,7 +131,7 @@ export default {
     }
   },
   destroyed() {
-    // window.removeEventListener('hashchange', this.afterQRScan)
+    // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
     showPwd() {
@@ -146,88 +148,90 @@ export default {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true
-          this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
-            this.loading = false
-            this.$router.push({ path: this.redirect || '/' })
-          }).catch(() => {
-            this.loading = false
-          })
+          this.$store.dispatch('user/login', this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || '/' })
+              this.loading = false
+            })
+            .catch(() => {
+              this.loading = false
+            })
         } else {
           console.log('error submit!!')
           return false
         }
       })
-    },
-    afterQRScan() {
-      // const hash = window.location.hash.slice(1)
-      // const hashObj = getQueryObject(hash)
-      // const originUrl = window.location.origin
-      // history.replaceState({}, '', originUrl)
-      // const codeMap = {
-      //   wechat: 'code',
-      //   tencent: 'code'
-      // }
-      // const codeName = hashObj[codeMap[this.auth_type]]
-      // if (!codeName) {
-      //   alert('第三方登录失败')
-      // } else {
-      //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
-      //     this.$router.push({ path: '/' })
-      //   })
-      // }
     }
+    // afterQRScan() {
+    //   if (e.key === 'x-admin-oauth-code') {
+    //     const code = getQueryObject(e.newValue)
+    //     const codeMap = {
+    //       wechat: 'code',
+    //       tencent: 'code'
+    //     }
+    //     const type = codeMap[this.auth_type]
+    //     const codeName = code[type]
+    //     if (codeName) {
+    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
+    //         this.$router.push({ path: this.redirect || '/' })
+    //       })
+    //     } else {
+    //       alert('第三方登录失败')
+    //     }
+    //   }
+    // }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
-  /* 修复input 背景不协调 和光标变色 */
-  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-  $bg:#283443;
-  $light_gray:#eee;
-  $cursor: #fff;
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
 
-  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-    .login-container .el-input input{
-      color: $cursor;
-      &::first-line {
-        color: $light_gray;
-      }
-    }
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
   }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
 
-  /* reset element-ui css */
-  .login-container {
-    .el-input {
-      display: inline-block;
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
       height: 47px;
-      width: 85%;
-      input {
-        background: transparent;
-        border: 0px;
-        -webkit-appearance: none;
-        border-radius: 0px;
-        padding: 12px 5px 12px 15px;
-        color: $light_gray;
-        height: 47px;
-        caret-color: $cursor;
-        &:-webkit-autofill {
-          box-shadow: 0 0 0px 1000px $bg inset !important;
-          -webkit-text-fill-color: $cursor !important;
-        }
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
       }
     }
-    .el-form-item {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: 5px;
-      color: #454545;
-    }
   }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
 </style>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 $bg:#2d3a4b;
 $dark_gray:#889aa4;
 $light_gray:#eee;
@@ -237,6 +241,7 @@ $light_gray:#eee;
   width: 100%;
   background-color: $bg;
   overflow: hidden;
+
   .login-form {
     position: relative;
     width: 520px;
@@ -245,16 +250,19 @@ $light_gray:#eee;
     margin: 0 auto;
     overflow: hidden;
   }
+
   .tips {
     font-size: 14px;
     color: #fff;
     margin-bottom: 10px;
+
     span {
       &:first-of-type {
         margin-right: 16px;
       }
     }
   }
+
   .svg-container {
     padding: 6px 5px 6px 15px;
     color: $dark_gray;
@@ -262,8 +270,10 @@ $light_gray:#eee;
     width: 30px;
     display: inline-block;
   }
+
   .title-container {
     position: relative;
+
     .title {
       font-size: 26px;
       color: $light_gray;
@@ -271,15 +281,17 @@ $light_gray:#eee;
       text-align: center;
       font-weight: bold;
     }
+
     .set-language {
       color: #fff;
       position: absolute;
       top: 3px;
-      font-size:18px;
+      font-size: 18px;
       right: 0px;
       cursor: pointer;
     }
   }
+
   .show-pwd {
     position: absolute;
     right: 10px;
@@ -289,10 +301,17 @@ $light_gray:#eee;
     cursor: pointer;
     user-select: none;
   }
+
   .thirdparty-button {
     position: absolute;
     right: 0;
     bottom: 6px;
   }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
 }
 </style>
diff --git a/src/views/login/socialsignin.vue b/src/views/login/socialsignin.vue
index 567ac553..d047b068 100644
--- a/src/views/login/socialsignin.vue
+++ b/src/views/login/socialsignin.vue
@@ -35,7 +35,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   .social-signup-container {
     margin: 20px 0;
     .sign-btn {
diff --git a/src/views/pdf/download.vue b/src/views/pdf/download.vue
index b87b882d..bd0b3be2 100644
--- a/src/views/pdf/download.vue
+++ b/src/views/pdf/download.vue
@@ -1,12 +1,13 @@
 <template>
   <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
     <div class="article__heading">
-      <div class="article__heading__title"> {{ article.title }}</div>
+      <div class="article__heading__title">
+        {{ article.title }}
+      </div>
     </div>
     <div style="color: #ccc;">
       This article is from Evan You on <a target="_blank" href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf">medium</a>
     </div>
-    <!-- eslint-disable-next-line -->
     <div ref="content" class="node-article-content" v-html="article.content" />
   </div>
 </template>
@@ -41,7 +42,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss">
 @mixin clearfix {
   &:before {
     display: table;
diff --git a/src/views/pdf/index.vue b/src/views/pdf/index.vue
index b7728152..238d4958 100644
--- a/src/views/pdf/index.vue
+++ b/src/views/pdf/index.vue
@@ -2,7 +2,9 @@
   <div class="app-container">
     <code style="margin-top:15px;">{{ $t('pdf.tips') }}</code>
     <router-link target="_blank" to="/pdf/download">
-      <el-button type="primary">Click to download PDF</el-button>
+      <el-button type="primary">
+        Click to download PDF
+      </el-button>
     </router-link>
   </div>
 </template>
diff --git a/src/views/permission/components/SwitchRoles.vue b/src/views/permission/components/SwitchRoles.vue
index c69de5a5..55297d09 100644
--- a/src/views/permission/components/SwitchRoles.vue
+++ b/src/views/permission/components/SwitchRoles.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div style="margin-bottom:15px;">{{ $t('permission.roles') }}： {{ roles }}</div>
+    <div style="margin-bottom:15px;">
+      {{ $t('permission.roles') }}： {{ roles }}
+    </div>
     {{ $t('permission.switchRoles') }}：
     <el-radio-group v-model="switchRoles">
       <el-radio-button label="editor" />
@@ -20,7 +22,7 @@ export default {
         return this.roles[0]
       },
       set(val) {
-        this.$store.dispatch('ChangeRoles', val).then(() => {
+        this.$store.dispatch('user/changeRoles', val).then(() => {
           this.$emit('change')
         })
       }
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 6019fae3..013c97a3 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -7,7 +7,9 @@
           Only
           <el-tag class="permission-tag" size="small">admin</el-tag> can see this
         </span>
-        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">v-permission="['admin']"</el-tag>
+        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
+          v-permission="['admin']"
+        </el-tag>
       </div>
 
       <div>
@@ -15,7 +17,9 @@
           Only
           <el-tag class="permission-tag" size="small">editor</el-tag> can see this
         </span>
-        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">v-permission="['editor']"</el-tag>
+        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
+          v-permission="['editor']"
+        </el-tag>
       </div>
 
       <div>
@@ -24,7 +28,9 @@
           <el-tag class="permission-tag" size="small">admin</el-tag> and
           <el-tag class="permission-tag" size="small">editor</el-tag> can see this
         </span>
-        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">v-permission="['admin','editor']"</el-tag>
+        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
+          v-permission="['admin','editor']"
+        </el-tag>
       </div>
     </div>
 
@@ -37,17 +43,23 @@
       <el-tabs type="border-card" style="width:550px;">
         <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
           Admin can see this
-          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['admin'])"</el-tag>
+          <el-tag class="permission-sourceCode" type="info">
+            v-if="checkPermission(['admin'])"
+          </el-tag>
         </el-tab-pane>
 
         <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
           Editor can see this
-          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['editor'])"</el-tag>
+          <el-tag class="permission-sourceCode" type="info">
+            v-if="checkPermission(['editor'])"
+          </el-tag>
         </el-tab-pane>
 
         <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
           Both admin or editor can see this
-          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['admin','editor'])"</el-tag>
+          <el-tag class="permission-sourceCode" type="info">
+            v-if="checkPermission(['admin','editor'])"
+          </el-tag>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -77,7 +89,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .app-container {
   /deep/ .permission-alert {
     width: 320px;
diff --git a/src/views/permission/role.vue b/src/views/permission/role.vue
index 4e22e50f..3789e516 100644
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@@ -1,21 +1,33 @@
 <template>
   <div class="app-container">
-    <el-button type="primary" @click="handleAddRole">{{ $t('permission.addRole') }}</el-button>
+    <el-button type="primary" @click="handleAddRole">
+      {{ $t('permission.addRole') }}
+    </el-button>
 
     <el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
       <el-table-column align="center" label="Role Key" width="220">
-        <template slot-scope="scope">{{ scope.row.key }}</template>
+        <template slot-scope="scope">
+          {{ scope.row.key }}
+        </template>
       </el-table-column>
       <el-table-column align="center" label="Role Name" width="220">
-        <template slot-scope="scope">{{ scope.row.name }}</template>
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
       </el-table-column>
       <el-table-column align="header-center" label="Description">
-        <template slot-scope="scope">{{ scope.row.description }}</template>
+        <template slot-scope="scope">
+          {{ scope.row.description }}
+        </template>
       </el-table-column>
       <el-table-column align="center" label="Operations">
         <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleEdit(scope)">{{ $t('permission.editPermission') }}</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope)">{{ $t('permission.delete') }}</el-button>
+          <el-button type="primary" size="small" @click="handleEdit(scope)">
+            {{ $t('permission.editPermission') }}
+          </el-button>
+          <el-button type="danger" size="small" @click="handleDelete(scope)">
+            {{ $t('permission.delete') }}
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -38,12 +50,15 @@
         </el-form-item>
       </el-form>
       <div style="text-align:right;">
-        <el-button type="danger" @click="dialogVisible=false">{{ $t('permission.cancel') }}</el-button>
-        <el-button type="primary" @click="confirmRole">{{ $t('permission.confirm') }}</el-button>
+        <el-button type="danger" @click="dialogVisible=false">
+          {{ $t('permission.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="confirmRole">
+          {{ $t('permission.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
   </div>
-
 </template>
 
 <script>
@@ -173,7 +188,7 @@ export default {
         type: 'warning'
       })
         .then(async() => {
-          await deleteRole(row.id)
+          await deleteRole(row.key)
           this.rolesList.splice($index, 1)
           this.$message({
             type: 'success',
@@ -215,7 +230,7 @@ export default {
         }
       } else {
         const { data } = await addRole(this.role)
-        this.role.key = data
+        this.role.key = data.key
         this.rolesList.push(this.role)
       }
 
diff --git a/src/views/qiniu/upload.vue b/src/views/qiniu/upload.vue
index 5766c669..9dc9aeda 100644
--- a/src/views/qiniu/upload.vue
+++ b/src/views/qiniu/upload.vue
@@ -1,7 +1,9 @@
 <template>
   <el-upload :data="dataObj" :multiple="true" :before-upload="beforeUpload" action="https://upload.qbox.me" drag>
     <i class="el-icon-upload" />
-    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    <div class="el-upload__text">
+      将文件拖到此处，或<em>点击上传</em>
+    </div>
   </el-upload>
 </template>
 
diff --git a/src/views/svg-icons/index.vue b/src/views/svg-icons/index.vue
index 89037e13..b14d4be6 100644
--- a/src/views/svg-icons/index.vue
+++ b/src/views/svg-icons/index.vue
@@ -42,7 +42,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .icons-container {
   margin: 10px 20px 0;
   overflow: hidden;
diff --git a/src/views/tab/components/tabPane.vue b/src/views/tab/components/tabPane.vue
index 1b6030c6..fa3076d0 100644
--- a/src/views/tab/components/tabPane.vue
+++ b/src/views/tab/components/tabPane.vue
@@ -1,6 +1,5 @@
 <template>
   <el-table :data="list" border fit highlight-current-row style="width: 100%">
-
     <el-table-column
       v-loading="loading"
       align="center"
@@ -51,7 +50,6 @@
         </el-tag>
       </template>
     </el-table-column>
-
   </el-table>
 </template>
 
diff --git a/src/views/table/complexTable.vue b/src/views/table/complexTable.vue
index a276df1a..0398c9d2 100644
--- a/src/views/table/complexTable.vue
+++ b/src/views/table/complexTable.vue
@@ -11,10 +11,18 @@
       <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
         <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
       </el-select>
-      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">{{ $t('table.add') }}</el-button>
-      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">{{ $t('table.export') }}</el-button>
-      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">{{ $t('table.reviewer') }}</el-checkbox>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        {{ $t('table.search') }}
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        {{ $t('table.add') }}
+      </el-button>
+      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
+        {{ $t('table.export') }}
+      </el-button>
+      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+        {{ $t('table.reviewer') }}
+      </el-checkbox>
     </div>
 
     <el-table
@@ -27,7 +35,7 @@
       style="width: 100%;"
       @sort-change="sortChange"
     >
-      <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="65">
+      <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
@@ -66,12 +74,16 @@
       </el-table-column>
       <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
+            {{ $t('table.edit') }}
+          </el-button>
           <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">
             {{ $t('table.publish') }}
           </el-button>
@@ -113,8 +125,12 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
-        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button>
+        <el-button @click="dialogFormVisible = false">
+          {{ $t('table.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+          {{ $t('table.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -127,7 +143,6 @@
         <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
       </span>
     </el-dialog>
-
   </div>
 </template>
 
diff --git a/src/views/table/dragTable.vue b/src/views/table/dragTable.vue
index 97c1e815..a5fa71cd 100644
--- a/src/views/table/dragTable.vue
+++ b/src/views/table/dragTable.vue
@@ -2,7 +2,6 @@
   <div class="app-container">
     <!-- Note that row-key is necessary to get a correct row order. -->
     <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
-
       <el-table-column align="center" label="ID" width="65">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
@@ -41,7 +40,9 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
         </template>
       </el-table-column>
 
@@ -50,12 +51,14 @@
           <svg-icon class="drag-handler" icon-class="drag" />
         </template>
       </el-table-column>
-
     </el-table>
     <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
-    <div class="show-d">{{ $t('table.dragTips1') }} : &nbsp; {{ oldList }}</div>
-    <div class="show-d">{{ $t('table.dragTips2') }} : {{ newList }}</div>
-
+    <div class="show-d">
+      {{ $t('table.dragTips1') }} : &nbsp; {{ oldList }}
+    </div>
+    <div class="show-d">
+      {{ $t('table.dragTips2') }} : {{ newList }}
+    </div>
   </div>
 </template>
 
@@ -93,17 +96,16 @@ export default {
     this.getList()
   },
   methods: {
-    getList() {
+    async getList() {
       this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
-        this.listLoading = false
-        this.oldList = this.list.map(v => v.id)
-        this.newList = this.oldList.slice()
-        this.$nextTick(() => {
-          this.setSort()
-        })
+      const { data } = await fetchList(this.listQuery)
+      this.list = data.items
+      this.total = data.total
+      this.listLoading = false
+      this.oldList = this.list.map(v => v.id)
+      this.newList = this.oldList.slice()
+      this.$nextTick(() => {
+        this.setSort()
       })
     },
     setSort() {
diff --git a/src/views/table/dynamicTable/fixedThead.vue b/src/views/table/dynamicTable/fixedThead.vue
index e4887a06..c3deb925 100644
--- a/src/views/table/dynamicTable/fixedThead.vue
+++ b/src/views/table/dynamicTable/fixedThead.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="app-container">
-
     <div class="filter-container">
       <el-checkbox-group v-model="checkboxVal">
-        <el-checkbox label="apple">apple</el-checkbox>
-        <el-checkbox label="banana">banana</el-checkbox>
-        <el-checkbox label="orange">orange</el-checkbox>
+        <el-checkbox label="apple">
+          apple
+        </el-checkbox>
+        <el-checkbox label="banana">
+          banana
+        </el-checkbox>
+        <el-checkbox label="orange">
+          orange
+        </el-checkbox>
       </el-checkbox-group>
     </div>
 
@@ -17,7 +22,6 @@
         </template>
       </el-table-column>
     </el-table>
-
   </div>
 </template>
 
diff --git a/src/views/table/dynamicTable/index.vue b/src/views/table/dynamicTable/index.vue
index 56eac980..4947b4b9 100644
--- a/src/views/table/dynamicTable/index.vue
+++ b/src/views/table/dynamicTable/index.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="app-container">
-    <div style="margin:0 0 5px 20px">{{ $t('table.dynamicTips1') }}</div>
+    <div style="margin:0 0 5px 20px">
+      {{ $t('table.dynamicTips1') }}
+    </div>
     <fixed-thead />
 
-    <div style="margin:30px 0 5px 20px">{{ $t('table.dynamicTips2') }}</div>
+    <div style="margin:30px 0 5px 20px">
+      {{ $t('table.dynamicTips2') }}
+    </div>
     <unfixed-thead />
   </div>
 </template>
diff --git a/src/views/table/dynamicTable/unfixedThead.vue b/src/views/table/dynamicTable/unfixedThead.vue
index d7f1bbcf..831b070a 100644
--- a/src/views/table/dynamicTable/unfixedThead.vue
+++ b/src/views/table/dynamicTable/unfixedThead.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="app-container">
-
     <div class="filter-container">
       <el-checkbox-group v-model="formThead">
-        <el-checkbox label="apple">apple</el-checkbox>
-        <el-checkbox label="banana">banana</el-checkbox>
-        <el-checkbox label="orange">orange</el-checkbox>
+        <el-checkbox label="apple">
+          apple
+        </el-checkbox>
+        <el-checkbox label="banana">
+          banana
+        </el-checkbox>
+        <el-checkbox label="orange">
+          orange
+        </el-checkbox>
       </el-checkbox-group>
     </div>
 
@@ -17,7 +22,6 @@
         </template>
       </el-table-column>
     </el-table>
-
   </div>
 </template>
 
diff --git a/src/views/table/inlineEditTable.vue b/src/views/table/inlineEditTable.vue
index 3f1e1611..fb19d037 100644
--- a/src/views/table/inlineEditTable.vue
+++ b/src/views/table/inlineEditTable.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="app-container">
-
     <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
-
       <el-table-column align="center" label="ID" width="80">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
@@ -29,7 +27,9 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
         </template>
       </el-table-column>
 
@@ -37,7 +37,9 @@
         <template slot-scope="scope">
           <template v-if="scope.row.edit">
             <el-input v-model="scope.row.title" class="edit-input" size="small" />
-            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
+            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">
+              cancel
+            </el-button>
           </template>
           <span v-else>{{ scope.row.title }}</span>
         </template>
@@ -45,11 +47,14 @@
 
       <el-table-column align="center" label="Actions" width="120">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">Ok</el-button>
-          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">Edit</el-button>
+          <el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">
+            Ok
+          </el-button>
+          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">
+            Edit
+          </el-button>
         </template>
       </el-table-column>
-
     </el-table>
   </div>
 </template>
@@ -83,17 +88,16 @@ export default {
     this.getList()
   },
   methods: {
-    getList() {
+    async getList() {
       this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        const items = response.data.items
-        this.list = items.map(v => {
-          this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
-          v.originalTitle = v.title //  will be used when user click the cancel botton
-          return v
-        })
-        this.listLoading = false
+      const { data } = await fetchList(this.listQuery)
+      const items = data.items
+      this.list = items.map(v => {
+        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
+        v.originalTitle = v.title //  will be used when user click the cancel botton
+        return v
       })
+      this.listLoading = false
     },
     cancelEdit(row) {
       row.title = row.originalTitle
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index 906b0b18..b67c2c67 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -14,18 +14,30 @@
     </el-card>
 
     <div class="block">
-      <el-button type="primary">Primary</el-button>
-      <el-button type="success">Success</el-button>
-      <el-button type="info">Info</el-button>
-      <el-button type="warning">Warning</el-button>
-      <el-button type="danger">Danger</el-button>
+      <el-button type="primary">
+        Primary
+      </el-button>
+      <el-button type="success">
+        Success
+      </el-button>
+      <el-button type="info">
+        Info
+      </el-button>
+      <el-button type="warning">
+        Warning
+      </el-button>
+      <el-button type="danger">
+        Danger
+      </el-button>
     </div>
 
     <div class="block">
       <el-button type="primary" icon="el-icon-edit" />
       <el-button type="primary" icon="el-icon-share" />
       <el-button type="primary" icon="el-icon-delete" />
-      <el-button type="primary" icon="el-icon-search">Search</el-button>
+      <el-button type="primary" icon="el-icon-search">
+        Search
+      </el-button>
       <el-button type="primary">
         Upload
         <i class="el-icon-upload el-icon-right" />
@@ -40,16 +52,21 @@
 
     <div class="block">
       <el-radio-group v-model="radio">
-        <el-radio :label="3">Option A</el-radio>
-        <el-radio :label="6">Option B</el-radio>
-        <el-radio :label="9">Option C</el-radio>
+        <el-radio :label="3">
+          Option A
+        </el-radio>
+        <el-radio :label="6">
+          Option B
+        </el-radio>
+        <el-radio :label="9">
+          Option C
+        </el-radio>
       </el-radio-group>
     </div>
 
     <div class="block">
       <el-slider v-model="slideValue" />
     </div>
-
   </div>
 </template>
 
diff --git a/src/views/tree-table/custom/data.js b/src/views/tree-table/custom/data.js
deleted file mode 100644
index 020f6247..00000000
--- a/src/views/tree-table/custom/data.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const data = [
-  {
-    name: '1',
-    timeLine: 100,
-    children: [
-      {
-        name: '1-1',
-        timeLine: 20
-      },
-      {
-        name: '1-2',
-        timeLine: 60,
-        children: [
-          {
-            name: '1-2-1',
-            timeLine: 35
-          },
-          {
-            name: '1-2-2',
-            timeLine: 25
-          }
-        ]
-      }
-    ]
-  },
-  {
-    name: '2',
-    timeLine: 80,
-    children: [
-      {
-        name: '2-1',
-        timeLine: 30
-      },
-      {
-        name: '2-2',
-        timeLine: 50
-      },
-      {
-        name: '2-3',
-        timeLine: 60
-      }
-    ]
-  },
-  {
-    name: '3',
-    timeLine: 40
-  }
-]
-
-export default data
-
diff --git a/src/views/tree-table/custom/index.vue b/src/views/tree-table/custom/index.vue
deleted file mode 100644
index 9c4930a2..00000000
--- a/src/views/tree-table/custom/index.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <div>
-    <div class="app-container">
-
-      <el-button type="primary" size="small" style="margin:0 0 20px 0;">
-        <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
-      </el-button>
-
-      <tree-table
-        ref="TreeTable"
-        :data="tableData"
-        :default-expand-all="true"
-        :columns="columns"
-        border
-        default-children="children"
-        @selection-change="selectChange"
-      >
-
-        <template slot="selection">
-          <el-table-column type="selection" align="center" width="55" />
-        </template>
-
-        <template slot="pre-column">
-          <el-table-column type="expand" width="55">
-            <template>
-              <el-tag type="info">
-                Here is just a placeholder slot, you can display anything.
-              </el-tag>
-            </template>
-          </el-table-column>
-        </template>
-
-        <template slot="timeline" slot-scope="{scope}">
-
-          <el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
-            <div class="processContainer">
-              <div
-                :style="{ width:(scope.row.timeLine||0) * 3+'px',
-                          background:scope.row.timeLine>50?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
-                          marginLeft:scope.row._level * 50+'px' }"
-                class="process"
-              >
-                <span style="display:inline-block" />
-              </div>
-            </div>
-          </el-tooltip>
-
-        </template>
-
-        <template slot="append" slot-scope="{scope}">
-          <el-button
-            size="mini"
-            type="primary"
-            @click="addMenuItem(scope.row,'brother')"
-          >Append Brother
-          </el-button>
-          <el-button
-            size="mini"
-            type="primary"
-            @click="addMenuItem(scope.row,'children')"
-          >Append Child
-          </el-button>
-        </template>
-        <template slot="operation" slot-scope="{scope}">
-          <el-button size="mini" type="success" @click="editItem(scope.row)">Edit</el-button>
-          <el-button size="mini" type="danger" @click="deleteItem(scope.row)">Delete</el-button>
-        </template>
-      </tree-table>
-    </div>
-
-    <el-dialog :visible.sync="dialogFormVisible" title="Edit">
-      <el-form :model="tempItem" label-width="100px" style="width:600px">
-        <el-form-item label="Name">
-          <el-input v-model.trim="tempItem.name" placeholder="Name" />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="updateItem">Confirm</el-button>
-      </span>
-    </el-dialog>
-
-  </div>
-</template>
-
-<script>
-import TreeTable from '@/components/TreeTable'
-import data from './data.js'
-
-export default {
-  components: { TreeTable },
-  data() {
-    return {
-      tableData: [],
-      tempItem: {},
-      dialogFormVisible: false,
-      columns: [
-        {
-          label: 'Name',
-          key: 'name',
-          expand: true
-        },
-        {
-          label: 'Timeline',
-          key: 'timeline'
-        },
-        {
-          label: 'Append',
-          key: 'append',
-          width: 300
-        },
-        {
-          label: 'Operation',
-          key: 'operation',
-          width: 160
-        }
-      ]
-    }
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.tableData = data
-    },
-    editItem(row) {
-      this.tempItem = Object.assign({}, row)
-      this.dialogFormVisible = true
-    },
-    async updateItem() {
-      await this.$refs.TreeTable.updateTreeNode(this.tempItem)
-      this.dialogFormVisible = false
-    },
-    addMenuItem(row, type) {
-      if (type === 'children') {
-        this.$refs.TreeTable.addChild(row, { name: 'child', timeLine: this.randomNum() })
-      }
-
-      if (type === 'brother') {
-        this.$refs.TreeTable.addBrother(row, { name: 'brother', timeLine: this.randomNum() })
-      }
-    },
-    deleteItem(row) {
-      this.$refs.TreeTable.delete(row)
-    },
-    selectChange(val) {
-      console.log(val)
-    },
-    randomNum() {
-      // return 1~100
-      const max = 100
-      const min = 1
-      return Math.floor(Math.random() * (max - min + 1) + min)
-    }
-  }
-}
-</script>
diff --git a/src/views/tree-table/data.js b/src/views/tree-table/data.js
deleted file mode 100644
index 67b0137a..00000000
--- a/src/views/tree-table/data.js
+++ /dev/null
@@ -1,80 +0,0 @@
-
-const data = [
-  {
-    id: 0,
-    event: 'Event-0',
-    timeLine: 50
-  },
-  {
-    id: 1,
-    event: 'Event-1',
-    timeLine: 100,
-    children: [
-      {
-        id: 2,
-        event: 'Event-2',
-        timeLine: 10
-
-      },
-      {
-        id: 3,
-        event: 'Event-3',
-        timeLine: 90,
-        children: [
-          {
-            id: 4,
-            event: 'Event-4',
-            timeLine: 5
-
-          },
-          {
-            id: 5,
-            event: 'Event-5',
-            timeLine: 10
-
-          },
-          {
-            id: 6,
-            event: 'Event-6',
-            timeLine: 75,
-
-            children: [
-              {
-                id: 7,
-                event: 'Event-7',
-                timeLine: 50,
-
-                children: [
-                  {
-                    id: 71,
-                    event: 'Event-7-1',
-                    timeLine: 25
-
-                  },
-                  {
-                    id: 72,
-                    event: 'Event-7-2',
-                    timeLine: 5
-
-                  },
-                  {
-                    id: 73,
-                    event: 'Event-7-3',
-                    timeLine: 20
-                  }
-                ]
-              },
-              {
-                id: 8,
-                event: 'Event-8',
-                timeLine: 25
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  }
-]
-
-export default data
diff --git a/src/views/tree-table/index.vue b/src/views/tree-table/index.vue
deleted file mode 100644
index ade9f4f3..00000000
--- a/src/views/tree-table/index.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div class="app-container">
-
-    <div style="margin-bottom:20px;">
-
-      <el-button type="primary" size="small" class="option-item">
-        <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
-      </el-button>
-
-      <div class="option-item">
-        <el-tag>Expand All</el-tag>
-        <el-switch
-          v-model="defaultExpandAll"
-          active-color="#13ce66"
-          inactive-color="#ff4949"
-          @change="reset"
-        />
-      </div>
-
-      <div class="option-item">
-        <el-tag>Show Checkbox</el-tag>
-        <el-switch
-          v-model="showCheckbox"
-          active-color="#13ce66"
-          inactive-color="#ff4949"
-        />
-      </div>
-
-    </div>
-
-    <tree-table :key="key" :default-expand-all="defaultExpandAll" :data="data" :columns="columns" border>
-      <template slot="scope" slot-scope="{scope}">
-        <el-tag>level: {{ scope.row._level }}</el-tag>
-        <el-tag>expand: {{ scope.row._expand }}</el-tag>
-        <el-tag>select: {{ scope.row._select }}</el-tag>
-      </template>
-      <template slot="operation" slot-scope="{scope}">
-        <el-button type="primary" size="" @click="click(scope)">Click</el-button>
-      </template>
-    </tree-table>
-
-  </div>
-</template>
-
-<script>
-import treeTable from '@/components/TreeTable'
-import data from './data'
-
-export default {
-  name: 'TreeTableDemo',
-  components: { treeTable },
-  data() {
-    return {
-      defaultExpandAll: false,
-      showCheckbox: true,
-      key: 1,
-      columns: [
-        {
-          label: 'Checkbox',
-          checkbox: true
-        },
-        {
-          label: '',
-          key: 'id',
-          expand: true
-        },
-        {
-          label: 'Event',
-          key: 'event',
-          width: 200,
-          align: 'left'
-        },
-        {
-          label: 'Scope',
-          key: 'scope'
-        },
-        {
-          label: 'Operation',
-          key: 'operation'
-        }
-      ],
-      data: data
-    }
-  },
-  watch: {
-    showCheckbox(val) {
-      if (val) {
-        this.columns.unshift({
-          label: 'Checkbox',
-          checkbox: true
-        })
-      } else {
-        this.columns.shift()
-      }
-      this.reset()
-    }
-  },
-  methods: {
-    reset() {
-      ++this.key
-    },
-    click(scope) {
-      console.log(scope)
-
-      const row = scope.row
-      const message = Object.keys(row)
-        .map(i => {
-          return `<p>${i}: ${row[i]}</p>`
-        })
-        .join('')
-
-      this.$notify({
-        title: 'Success',
-        dangerouslyUseHTMLString: true,
-        message: message,
-        type: 'success'
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.option-item{
-  display: inline-block;
-  margin-right: 15px;
-}
-</style>
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index 11ce77b7..ed7e8af2 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -2,7 +2,9 @@
   <div class="app-container">
     <!-- $t is vue-i18n global function to translate lang -->
     <el-input v-model="filename" :placeholder="$t('zip.placeholder')" style="width:300px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">{{ $t('zip.export') }} zip</el-button>
+    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">
+      {{ $t('zip.export') }} zip
+    </el-button>
     <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label="ID" width="95">
         <template slot-scope="scope">
@@ -51,12 +53,11 @@ export default {
     this.fetchData()
   },
   methods: {
-    fetchData() {
+    async fetchData() {
       this.listLoading = true
-      fetchList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
+      const { data } = await fetchList()
+      this.list = data.items
+      this.listLoading = false
     },
     handleDownload() {
       this.downloadLoading = true
diff --git a/tests/unit/.eslintrc.js b/tests/unit/.eslintrc.js
new file mode 100644
index 00000000..958d51ba
--- /dev/null
+++ b/tests/unit/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}
diff --git a/tests/unit/components/Hamburger.spec.js b/tests/unit/components/Hamburger.spec.js
new file mode 100644
index 00000000..01ea303a
--- /dev/null
+++ b/tests/unit/components/Hamburger.spec.js
@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Hamburger from '@/components/Hamburger/index.vue'
+describe('Hamburger.vue', () => {
+  it('toggle click', () => {
+    const wrapper = shallowMount(Hamburger)
+    const mockFn = jest.fn()
+    wrapper.vm.$on('toggleClick', mockFn)
+    wrapper.find('.hamburger').trigger('click')
+    expect(mockFn).toBeCalled()
+  })
+  it('prop isActive', () => {
+    const wrapper = shallowMount(Hamburger)
+    wrapper.setProps({ isActive: true })
+    expect(wrapper.contains('.is-active')).toBe(true)
+    wrapper.setProps({ isActive: false })
+    expect(wrapper.contains('.is-active')).toBe(false)
+  })
+})
diff --git a/tests/unit/components/SvgIcon.spec.js b/tests/unit/components/SvgIcon.spec.js
new file mode 100644
index 00000000..31467a9f
--- /dev/null
+++ b/tests/unit/components/SvgIcon.spec.js
@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+describe('SvgIcon.vue', () => {
+  it('iconClass', () => {
+    const wrapper = shallowMount(SvgIcon, {
+      propsData: {
+        iconClass: 'test'
+      }
+    })
+    expect(wrapper.find('use').attributes().href).toBe('#icon-test')
+  })
+  it('className', () => {
+    const wrapper = shallowMount(SvgIcon, {
+      propsData: {
+        iconClass: 'test'
+      }
+    })
+    expect(wrapper.classes().length).toBe(1)
+    wrapper.setProps({ className: 'test' })
+    expect(wrapper.classes().includes('test')).toBe(true)
+  })
+})
diff --git a/tests/unit/utils/formatTime.spec.js b/tests/unit/utils/formatTime.spec.js
new file mode 100644
index 00000000..d07e414f
--- /dev/null
+++ b/tests/unit/utils/formatTime.spec.js
@@ -0,0 +1,29 @@
+import { formatTime } from '@/utils/index.js'
+describe('Utils:formatTime', () => {
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
+  const retrofit = 5 * 1000
+
+  it('ten digits timestamp', () => {
+    expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分')
+  })
+  it('test now', () => {
+    expect(formatTime(+new Date() - 1)).toBe('刚刚')
+  })
+  it('less two minute', () => {
+    expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前')
+  })
+  it('less two hour', () => {
+    expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前')
+  })
+  it('less one day', () => {
+    expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前')
+  })
+  it('more than one day', () => {
+    expect(formatTime(d)).toBe('7月13日17时54分')
+  })
+  it('format', () => {
+    expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
+    expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
+    expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
+  })
+})
diff --git a/tests/unit/utils/parseTime.spec.js b/tests/unit/utils/parseTime.spec.js
new file mode 100644
index 00000000..77ecb9d5
--- /dev/null
+++ b/tests/unit/utils/parseTime.spec.js
@@ -0,0 +1,27 @@
+import { parseTime } from '@/utils/index.js'
+describe('Utils:parseTime', () => {
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
+  it('timestamp', () => {
+    expect(parseTime(d)).toBe('2018-07-13 17:54:01')
+  })
+  it('ten digits timestamp', () => {
+    expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
+  })
+  it('new Date', () => {
+    expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
+  })
+  it('format', () => {
+    expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
+    expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
+    expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
+  })
+  it('get the day of the week', () => {
+    expect(parseTime(d, '{a}')).toBe('五') // 星期五
+  })
+  it('get the day of the week', () => {
+    expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日
+  })
+  it('empty argument', () => {
+    expect(parseTime()).toBeNull()
+  })
+})
diff --git a/tests/unit/utils/validate.spec.js b/tests/unit/utils/validate.spec.js
new file mode 100644
index 00000000..ef2efe61
--- /dev/null
+++ b/tests/unit/utils/validate.spec.js
@@ -0,0 +1,28 @@
+import { validUsername, validURL, validLowerCase, validUpperCase, validAlphabets } from '@/utils/validate.js'
+describe('Utils:validate', () => {
+  it('validUsername', () => {
+    expect(validUsername('admin')).toBe(true)
+    expect(validUsername('editor')).toBe(true)
+    expect(validUsername('xxxx')).toBe(false)
+  })
+  it('validURL', () => {
+    expect(validURL('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
+    expect(validURL('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
+    expect(validURL('github.com/PanJiaChen/vue-element-admin')).toBe(false)
+  })
+  it('validLowerCase', () => {
+    expect(validLowerCase('abc')).toBe(true)
+    expect(validLowerCase('Abc')).toBe(false)
+    expect(validLowerCase('123abc')).toBe(false)
+  })
+  it('validUpperCase', () => {
+    expect(validUpperCase('ABC')).toBe(true)
+    expect(validUpperCase('Abc')).toBe(false)
+    expect(validUpperCase('123ABC')).toBe(false)
+  })
+  it('validAlphabets', () => {
+    expect(validAlphabets('ABC')).toBe(true)
+    expect(validAlphabets('Abc')).toBe(true)
+    expect(validAlphabets('123aBC')).toBe(false)
+  })
+})
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 00000000..7b9d2dbb
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,147 @@
+'use strict'
+const path = require('path')
+const pkg = require('./package.json')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+const name = pkg.name || 'vue-element-admin' // page title
+const port = 9527 // dev port
+
+// All configuration item explanations can be find in https://cli.vuejs.org/config/
+module.exports = {
+  /**
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail: https://cli.vuejs.org/config/#publicpath
+   */
+  publicPath: '/',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: process.env.NODE_ENV === 'development' ? 'error' : false,
+  productionSourceMap: false,
+  devServer: {
+    port: port,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    proxy: {
+      // change xxx-api/login => mock/login
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_API]: {
+        target: `http://localhost:${port}/mock`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    },
+    after(app) {
+      require('@babel/register')
+      const bodyParser = require('body-parser')
+
+      // parse app.body
+      // http://expressjs.com/en/4x/api.html#req.body
+      app.use(bodyParser.json())
+      app.use(bodyParser.urlencoded({
+        extended: true
+      }))
+
+      const { default: mocks } = require('./mock')
+      for (const mock of mocks) {
+        app[mock.type](mock.url, mock.response)
+      }
+    }
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    }
+  },
+  chainWebpack(config) {
+    config.plugins.delete('preload') // TODO: need test
+    config.plugins.delete('prefetch') // TODO: need test
+
+    // set svg-sprite-loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/icons'))
+      .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
+
+    // set preserveWhitespace
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .loader('vue-loader')
+      .tap(options => {
+        options.compilerOptions.preserveWhitespace = true
+        return options
+      })
+      .end()
+
+    config
+      .when(process.env.NODE_ENV === 'development',
+        config => config.devtool('cheap-source-map')
+      )
+
+    config
+      .when(process.env.NODE_ENV !== 'development',
+        config => {
+          config
+            .plugin('ScriptExtHtmlWebpackPlugin')
+            .after('html')
+            .use('script-ext-html-webpack-plugin', [{
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+              inline: /runtime\..*\.js$/
+            }])
+            .end()
+          config
+            .optimization.splitChunks({
+              chunks: 'all',
+              cacheGroups: {
+                libs: {
+                  name: 'chunk-libs',
+                  test: /[\\/]node_modules[\\/]/,
+                  priority: 10,
+                  chunks: 'initial' // only package third parties that are initially dependent
+                },
+                elementUI: {
+                  name: 'chunk-elementUI', // split elementUI into a single package
+                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                  test: /[\\/]node_modules[\\/]element-ui[\\/]/
+                },
+                commons: {
+                  name: 'chunk-commons',
+                  test: resolve('src/components'), // can customize your rules
+                  minChunks: 3, //  minimum common number
+                  priority: 5,
+                  reuseExistingChunk: true
+                }
+              }
+            })
+          config.optimization.runtimeChunk('single')
+        }
+      )
+  }
+}