[release] 4.0.1

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

.env.development

@@ -1,9 +1,14 @@
-VUE_APP_BASE_API = '/api'
+# just a flag
 ENV = 'development'
 
-// With this configuration, vue-cli uses babel-plugin-dynamic-import-node
+# base api
-// It only does one thing by converting all import() to require()
+VUE_APP_BASE_API = '/dev-api'
-// So that all asynchronous components can be import synchronously using this plugin
+
-// This configuration can significantly increase the speed of hot updates when you have a large number of pages
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
-// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+# 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

.env.production

@@ -1,2 +1,6 @@
-VUE_APP_BASE_API = '/api'
+# just a flag
 ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+

.env.staging

@@ -1,3 +1,8 @@
-NODE_ENV=production
+NODE_ENV = production
-VUE_APP_BASE_API = '/api'
+
+# just a flag
 ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+

.eslintignore

@@ -1,3 +1,4 @@
 build/*.js
-config/*.js
 src/assets
+public
+dist

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,33 @@
+---
+name: Bug report（报告问题）
+about: Create a report to help us improve
+---
+<!--
+    注意：为更好的解决你的问题，请参考模板提供完整信息，准确描述问题，信息不全的 issue 将被关闭。
+
+    Note: In order to better solve your problem, please refer to the template to provide complete information, accurately describe the problem, and the incomplete information issue will be closed.
+-->
+
+
+## Bug report（问题描述）
+
+#### Steps to reproduce（问题复现步骤）
+<!--
+1. [xxx]
+2. [xxx]
+3. [xxxx]
+-->
+
+#### Screenshot or Gif（截图或动态图）
+
+
+#### Link to minimal reproduction（最小可在线还原demo）
+
+<!--
+Please only use Codepen, JSFiddle, CodeSandbox or a github repo
+-->
+
+#### Other relevant information（格外信息）
+- Your OS:
+- Node.js version:
+- vue-element-admin version:

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,7 @@
+---
+name: Feature Request（新功能建议）
+about: Suggest an idea for this project
+---
+
+## Feature request（新功能建议）
+

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,14 @@
+---
+name: Question（提问）
+about: Asking questions about use
+---
+
+## Question（提问）
+
+<!--
+    提问之前，请确定你已经过自己的努力，尝试解决过这个问题。
+    若是代码相关问题，请不要只截图，请提供在线 demo，以便节约彼此的时间。
+
+    Before asking a question, please make sure that you have tried your best to solve this problem.
+    If it's a code-related issue, please don't just take screenshots. Please provide an online demo to save each other's time.
+-->

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,7 +30,7 @@ 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.
 
@@ -40,36 +40,31 @@ It is a magical vue admin based on the newest development stack of vue, built-in
 
 - [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.**
+**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)**
 
-**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
+**This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.**
-
-**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)**
 
 ## 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>
@@ -82,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
@@ -105,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
@@ -146,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
 
@@ -153,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
@@ -168,19 +166,16 @@ npm run build:prod
 ## Advanced
 
 ```bash
-# --report to build with bundle size analytics
+# preview the release environment effect
-npm run build:prod --report
+npm run preview
 
-# --generate a bundle size analytics. default: bundle-report.html
+# preview the release environment effect + static resource analysis
-npm run build:prod --generate_report
+npm run preview -- --report
 
-# --preview to start a server in local to preview
+# code format check
-npm run build:prod --preview
-
-# lint code
 npm run lint
 
-# auto fix
+# code format check and auto fix
 npm run lint -- --fix
 ```
 

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,41 +30,37 @@
 
 ## 简介
 
-[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
+[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
 
-- [在线访问](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)
+**目前版本为 `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)**
-
-**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
-
-**从`v3.8.0`开始使用`webpack4`。所以若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
 
 **该项目不支持低版本浏览器(如 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)
@@ -82,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>
@@ -94,6 +91,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
 - 权限验证
   - 页面权限
   - 指令权限
+  - 权限配置
   - 二步登录
 
 - 多环境发布
@@ -106,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全屏
   - 自适应收缩侧边栏
 
@@ -117,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
 
 - 表格
   - 动态表格
   - 拖拽表格
-  - 树形表格
   - 内联编辑
 
 - 错误页面
@@ -158,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
 
@@ -174,7 +174,7 @@ npm run dev
 
 ```bash
 # 构建测试环境
-npm run build:sit
+npm run build:stage
 
 # 构建生产环境
 npm run build:prod
@@ -183,19 +183,16 @@ npm run build:prod
 ## 其它
 
 ```bash
-# --report to build with bundle size analytics
+# 预览发布环境效果
-npm run build:prod
+npm run preview
 
-# --generate a bundle size analytics. default: bundle-report.html
+# 预览发布环境效果 + 静态资源分析
-npm run build:prod --generate_report
+npm run preview -- --report
 
-# --preview to start a server in local to preview
+# 代码格式检查
-npm run build:prod --preview
-
-# lint code
 npm run lint
 
-# auto fix
+# 代码格式检查并自动修复
 npm run lint -- --fix
 ```
 
@@ -218,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+.

build/index.js

@@ -5,7 +5,9 @@ const rawArgv = process.argv.slice(2)
 const args = rawArgv.join(' ')
 
 if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
-  run(`vue-cli-service build ${args} --report`)
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
 
   const port = 9526
   const publicPath = config.publicPath
@@ -21,13 +23,12 @@ if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
     })
   )
 
-  app.listen(port, function() {
+  app.listen(port, function () {
-    console.log(
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
-      chalk.green(`> Preview at  http://localhost:${port}${publicPath}`)
+    if (report) {
-    )
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
-    console.log(
+    }
-      chalk.green(`> Report at  http://localhost:${port}${publicPath}/report.html`)
+
-    )
   })
 } else {
   run(`vue-cli-service build ${args}`)

jest.config.js

@@ -1,9 +1,9 @@
 module.exports = {
   verbose: true,
   moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
-  // transformIgnorePatterns: [
+  transformIgnorePatterns: [
-  //   'node_modules/(?!(babel-jest|jest-vue-preprocessor)/)'
+    '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',

mock/index.js

@@ -1,16 +1,32 @@
 import Mock from 'mockjs'
-import mocks from './mocks'
 import { param2Obj } from '../src/utils'
 
-const MOCK_API_BASE = '/mock'
+import user from './user'
+import role from './role'
+import article from './article'
+import search from './remoteSearch'
 
+const mocks = [
+  ...user,
+  ...role,
+  ...article,
+  ...search
+]
+
+// for front mock
+// please use it cautiously, it will redefine XMLHttpRequest,
+// which will cause many of your third-party libraries to be invalidated(like progress event).
 export function mockXHR() {
-  // 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
+  // mock patch
   // 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
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
     }
     this.proxy_send(...arguments)
   }
@@ -38,9 +54,10 @@ export function mockXHR() {
   }
 }
 
+// for mock server
 const responseFake = (url, type, respond) => {
   return {
-    url: new RegExp(`${MOCK_API_BASE}${url}`),
+    url: new RegExp(`/mock${url}`),
     type: type || 'get',
     response(req, res) {
       res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))

mock/mock-server.js

@@ -0,0 +1,62 @@
+const chokidar = require('chokidar')
+const bodyParser = require('body-parser')
+const chalk = require('chalk')
+
+function registerRoutes(app) {
+  let mockStartIndex
+  const { default: mocks } = require('./index.js')
+  for (const mock of mocks) {
+    app[mock.type](mock.url, mock.response)
+    mockStartIndex = app._router.stack.length
+  }
+  const mockRoutesLength = Object.keys(mocks).length
+  return {
+    mockRoutesLength: mockRoutesLength,
+    mockStartIndex: mockStartIndex - mockRoutesLength
+  }
+}
+
+function unregisterRoutes() {
+  Object.keys(require.cache).forEach(i => {
+    if (i.includes('/mock')) {
+      delete require.cache[require.resolve(i)]
+    }
+  })
+}
+
+module.exports = app => {
+  // es6 polyfill
+  require('@babel/register')
+
+  // parse app.body
+  // http://expressjs.com/en/4x/api.html#req.body
+  app.use(bodyParser.json())
+  app.use(bodyParser.urlencoded({
+    extended: true
+  }))
+
+  const mockRoutes = registerRoutes(app)
+  var mockRoutesLength = mockRoutes.mockRoutesLength
+  var mockStartIndex = mockRoutes.mockStartIndex
+
+  // watch files, hot reload mock server
+  chokidar.watch(('./mock'), {
+    ignored: 'mock/mock-server.js',
+    persistent: true,
+    ignoreInitial: true
+  }).on('all', (event, path) => {
+    if (event === 'change' || event === 'add') {
+      // remove mock routes stack
+      app._router.stack.splice(mockStartIndex, mockRoutesLength)
+
+      // clear routes cache
+      unregisterRoutes()
+
+      const mockRoutes = registerRoutes(app)
+      mockRoutesLength = mockRoutes.mockRoutesLength
+      mockStartIndex = mockRoutes.mockStartIndex
+
+      console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+    }
+  })
+}

mock/mocks.js

@@ -1,12 +0,0 @@
-import user from './user'
-import role from './role'
-import article from './article'
-import search from './remoteSearch'
-
-export default [
-  ...user,
-  ...role,
-  ...article,
-  ...search
-]
-

mock/role/routes.js

@@ -19,7 +19,7 @@ export const constantRoutes = [
   },
   {
     path: '/auth-redirect',
-    component: 'views/login/authredirect',
+    component: 'views/login/authRedirect',
     hidden: true
   },
   {

mock/user.js

@@ -30,9 +30,19 @@ export default [
     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: tokens[username]
+        data: token
       }
     }
   },
@@ -43,9 +53,19 @@ export default [
     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: users[token]
+        data: info
       }
     }
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-element-admin",
-  "version": "4.0.0",
+  "version": "4.0.1",
-  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
+  "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": {
@@ -10,8 +10,8 @@
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src",
-    "test": "npm run lint",
     "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"
   },
@@ -28,10 +28,12 @@
   },
   "keywords": [
     "vue",
-    "element-ui",
     "admin",
-    "management-system",
+    "dashboard",
-    "admin-template"
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
   ],
   "repository": {
     "type": "git",
@@ -42,12 +44,12 @@
   },
   "dependencies": {
     "axios": "0.18.0",
-    "clipboard": "1.7.1",
+    "clipboard": "2.0.4",
     "codemirror": "5.45.0",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
-    "element-ui": "2.6.3",
+    "element-ui": "2.7.0",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",
@@ -56,7 +58,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
-    "screenfull": "4.1.0",
+    "screenfull": "4.2.0",
     "showdown": "1.9.0",
     "sortablejs": "1.8.4",
     "tui-editor": "1.3.3",
@@ -72,14 +74,16 @@
   "devDependencies": {
     "@babel/core": "7.0.0",
     "@babel/register": "7.0.0",
-    "@vue/cli-plugin-babel": "3.5.1",
+    "@vue/cli-plugin-babel": "3.5.3",
-    "@vue/cli-plugin-unit-jest": "3.5.1",
+    "@vue/cli-plugin-eslint": "3.5.1",
-    "@vue/cli-service": "3.5.1",
+    "@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",
+    "chokidar": "2.1.5",
     "connect": "3.6.6",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",

src/api/remoteSearch.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-export function userSearch(name) {
+export function searchUser(name) {
   return request({
     url: '/search/user',
     method: 'get',

src/components/BackToTop/index.vue

@@ -88,29 +88,29 @@ export default {
 </script>
 
 <style scoped>
-  .back-to-ceiling {
+.back-to-ceiling {
-    position: fixed;
+  position: fixed;
-    display: inline-block;
+  display: inline-block;
-    text-align: center;
+  text-align: center;
-    cursor: pointer;
+  cursor: pointer;
-  }
+}
 
-  .back-to-ceiling:hover {
+.back-to-ceiling:hover {
-    background: #d5dbe7;
+  background: #d5dbe7;
-  }
+}
 
-  .fade-enter-active,
+.fade-enter-active,
-  .fade-leave-active {
+.fade-leave-active {
-    transition: opacity .5s;
+  transition: opacity .5s;
-  }
+}
 
-  .fade-enter,
+.fade-enter,
-  .fade-leave-to {
+.fade-leave-to {
-    opacity: 0
+  opacity: 0
-  }
+}
 
-  .back-to-ceiling .Icon {
+.back-to-ceiling .Icon {
-    fill: #9aaabf;
+  fill: #9aaabf;
-    background: none;
+  background: none;
-  }
+}
 </style>

src/components/Breadcrumb/index.vue

@@ -59,14 +59,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
+.app-breadcrumb.el-breadcrumb {
-    display: inline-block;
+  display: inline-block;
-    font-size: 14px;
+  font-size: 14px;
-    line-height: 50px;
+  line-height: 50px;
-    margin-left: 8px;
+  margin-left: 8px;
-    .no-redirect {
+
-      color: #97a8be;
+  .no-redirect {
-      cursor: text;
+    color: #97a8be;
-    }
+    cursor: text;
   }
+}
 </style>

src/components/DndList/index.vue

@@ -2,7 +2,7 @@
   <div class="dndList">
     <div :style="{width:width1}" class="dndList-list">
       <h3>{{ list1Title }}</h3>
-      <draggable :list="list1" group="article" class="dragArea">
+      <draggable :set-data="setData" :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 }}
@@ -94,6 +94,11 @@ export default {
       if (this.isNotInList1(ele)) {
         this.list1.push(ele)
       }
+    },
+    setData(dataTransfer) {
+      // to avoid Firefox bug
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+      dataTransfer.setData('Text', '')
     }
   }
 }

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%;
     }

src/components/ErrorLog/index.vue

@@ -6,28 +6,28 @@
       </el-button>
     </el-badge>
 
-    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
+    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%" append-to-body>
       <el-table :data="errorLogs" border>
         <el-table-column label="Message">
-          <template slot-scope="scope">
+          <template slot-scope="{row}">
             <div>
               <span class="message-title">Msg:</span>
               <el-tag type="danger">
-                {{ scope.row.err.message }}
+                {{ 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 }}
+                {{ row.vm.$vnode.tag }} error in {{ row.info }}
               </el-tag>
             </div>
             <br>
             <div>
               <span class="message-title" style="padding-right: 16px;">Url: </span>
               <el-tag type="success">
-                {{ scope.row.url }}
+                {{ row.url }}
               </el-tag>
             </div>
           </template>

src/components/Kanban/index.vue

@@ -7,6 +7,7 @@
       :list="list"
       v-bind="$attrs"
       class="board-column-content"
+      :set-data="setData"
     >
       <div v-for="element in list" :key="element.id" class="board-item">
         {{ element.name }} {{ element.id }}
@@ -39,6 +40,13 @@ export default {
         return []
       }
     }
+  },
+  methods: {
+    setData(dataTransfer) {
+      // to avoid Firefox bug
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+      dataTransfer.setData('Text', '')
+    }
   }
 }
 </script>

src/components/RightPanel/index.vue

@@ -2,7 +2,9 @@
   <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
     <div class="rightPanel-background" />
     <div class="rightPanel">
-      <el-button class="handle-button" :style="{'top':buttonTop+'px'}" type="primary" circle :icon="show?'el-icon-close':'el-icon-setting'" @click="show=!show" />
+      <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>
@@ -30,6 +32,11 @@ export default {
       show: false
     }
   },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
   watch: {
     show(value) {
       if (value && !this.clickNotClose) {
@@ -130,7 +137,16 @@ export default {
   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>

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', () => {
+        screenfull.on('change', this.change)
-          this.isFullscreen = screenfull.isFullscreen
+      }
-        })
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
       }
     }
   }

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,17 +11,18 @@
 
 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: {
     async theme(val) {
-      const oldVal = this.theme
+      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('#', ''))
@@ -70,6 +71,8 @@ export default {
         style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
       })
 
+      this.$emit('change', val)
+
       $message.close()
     }
   },

src/components/TreeTable/README.md

@@ -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

src/components/TreeTable/eval.js

@@ -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
-}

src/components/TreeTable/index.vue

@@ -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>

src/lang/en.js

@@ -1,7 +1,6 @@
 export default {
   route: {
     dashboard: 'Dashboard',
-    introduction: 'Introduction',
     documentation: 'Documentation',
     guide: 'Guide',
     permission: 'Permission',
@@ -10,7 +9,6 @@ export default {
     directivePermission: 'Directive Permission',
     icons: 'Icons',
     components: 'Components',
-    componentIndex: 'Introduction',
     tinymce: 'Tinymce',
     markdown: 'Markdown',
     jsonEditor: 'JSON Editor',
@@ -19,9 +17,9 @@ export default {
     avatarUpload: 'Avatar Upload',
     dropzone: 'Dropzone',
     sticky: 'Sticky',
-    countTo: 'CountTo',
+    countTo: 'Count To',
     componentMixin: 'Mixin',
-    backToTop: 'BackToTop',
+    backToTop: 'Back To Top',
     dragDialog: 'Drag Dialog',
     dragSelect: 'Drag Select',
     dragKanban: 'Drag Kanban',
@@ -43,8 +41,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',
@@ -76,7 +72,7 @@ export default {
   },
   login: {
     title: 'Login Form',
-    logIn: 'Log in',
+    logIn: 'Login',
     username: 'Username',
     password: 'Password',
     any: 'any',
@@ -89,10 +85,10 @@ export default {
   },
   permission: {
     addRole: 'New Role',
-    editPermission: 'Edit Permission',
+    editPermission: 'Edit',
     roles: 'Your roles',
     switchRoles: 'Switch roles',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    tips: 'In some cases, using v-permission will have no effect. For example: Element-UI  el-tab or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.',
     delete: 'Delete',
     confirm: 'Confirm',
     cancel: 'Cancel'
@@ -103,7 +99,7 @@ export default {
   },
   components: {
     documentation: 'Documentation',
-    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
+    tinymceTips: 'Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.',
     dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
     stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
     backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
@@ -144,14 +140,14 @@ export default {
   excel: {
     export: 'Export',
     selectedExport: 'Export Selected Items',
-    placeholder: 'Please enter the file name(default excel-list)'
+    placeholder: 'Please enter the file name (default excel-list)'
   },
   zip: {
     export: 'Export',
-    placeholder: 'Please enter the file name(default file)'
+    placeholder: 'Please enter the file name (default file)'
   },
   pdf: {
-    tips: 'Here we use window.print() to implement the feature of downloading pdf.'
+    tips: 'Here we use window.print() to implement the feature of downloading PDF.'
   },
   theme: {
     change: 'Change Theme',

src/lang/es.js

@@ -1,7 +1,6 @@
 export default {
   route: {
     dashboard: 'Panel de control',
-    introduction: 'Introducción',
     documentation: 'Documentación',
     guide: 'Guía',
     permission: 'Permisos',
@@ -10,7 +9,6 @@ export default {
     directivePermission: 'Permisos de la directiva',
     icons: 'Iconos',
     components: 'Componentes',
-    componentIndex: 'Introducción',
     tinymce: 'Tinymce',
     markdown: 'Markdown',
     jsonEditor: 'Editor JSON',
@@ -43,8 +41,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',

src/lang/index.js

@@ -24,11 +24,24 @@ const messages = {
     ...elementEsLocale
   }
 }
+export function getLanguage() {
+  const chooseLanguage = Cookies.get('language')
+  if (chooseLanguage) return chooseLanguage
 
+  // if has not choose language
+  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
+  const locales = Object.keys(messages)
+  for (const locale of locales) {
+    if (language.indexOf(locale) > -1) {
+      return locale
+    }
+  }
+  return 'en'
+}
 const i18n = new VueI18n({
   // set locale
   // options: en | zh | es
-  locale: Cookies.get('language') || 'en',
+  locale: getLanguage(),
   // set locale messages
   messages
 })

src/lang/zh.js

@@ -1,7 +1,6 @@
 export default {
   route: {
     dashboard: '首页',
-    introduction: '简述',
     documentation: '文档',
     guide: '引导页',
     permission: '权限测试页',
@@ -10,16 +9,15 @@ export default {
     directivePermission: '指令权限',
     icons: '图标',
     components: '组件',
-    componentIndex: '介绍',
     tinymce: '富文本编辑器',
     markdown: 'Markdown',
-    jsonEditor: 'JSON编辑器',
+    jsonEditor: 'JSON 编辑器',
     dndList: '列表拖拽',
     splitPane: 'Splitpane',
     avatarUpload: '头像上传',
     dropzone: 'Dropzone',
     sticky: 'Sticky',
-    countTo: 'CountTo',
+    countTo: 'Count To',
     componentMixin: '小组件',
     backToTop: '返回顶部',
     dragDialog: '拖拽 Dialog',
@@ -32,19 +30,17 @@ export default {
     example: '综合实例',
     nested: '路由嵌套',
     menu1: '菜单1',
-    'menu1-1': '菜单1-1',
+    'menu1-1': '菜单 1-1',
-    'menu1-2': '菜单1-2',
+    'menu1-2': '菜单 1-2',
-    'menu1-2-1': '菜单1-2-1',
+    'menu1-2-1': '菜单 1-2-1',
-    'menu1-2-2': '菜单1-2-2',
+    'menu1-2-2': '菜单 1-2-2',
-    'menu1-3': '菜单1-3',
+    'menu1-3': '菜单 1-3',
-    menu2: '菜单2',
+    menu2: '菜单 2',
     Table: 'Table',
-    dynamicTable: '动态Table',
+    dynamicTable: '动态 Table',
-    dragTable: '拖拽Table',
+    dragTable: '拖拽 Table',
-    inlineEditTable: 'Table内编辑',
+    inlineEditTable: 'Table 内编辑',
-    complexTable: '综合Table',
+    complexTable: '综合 Table',
-    treeTable: '树形表格',
-    customTreeTable: '自定义树表',
     tab: 'Tab',
     form: '表单',
     createArticle: '创建文章',
@@ -92,7 +88,7 @@ export default {
     editPermission: '编辑权限',
     roles: '你的权限',
     switchRoles: '切换权限',
-    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
+    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
     delete: '删除',
     confirm: '确定',
     cancel: '取消'

src/layout/components/Navbar.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <breadcrumb class="breadcrumb-container" />
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-        <search class="right-menu-item" />
+        <search id="header-search" class="right-menu-item" />
 
         <error-log class="errLog-container right-menu-item hover-effect" />
 
-        <screenfull class="right-menu-item hover-effect" />
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
-          <size-select class="right-menu-item hover-effect" />
+          <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
         <lang-select class="right-menu-item hover-effect" />
@@ -86,12 +86,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.hasTagsView {
-  .navbar {
-    border-bottom: none;
-  }
-}
-
 .navbar {
   height: 50px;
   overflow: hidden;

src/layout/components/Settings/index.vue

@@ -5,7 +5,7 @@
 
       <div class="drawer-item">
         <span>{{ $t('settings.theme') }}</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" />
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
       </div>
 
       <div class="drawer-item">
@@ -69,6 +69,14 @@ export default {
         })
       }
     }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
   }
 }
 </script>

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="!item.hidden" class="menu-wrapper">
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <app-link :to="resolvePath(onlyOneChild.path)">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" />
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" />
         </el-menu-item>
       </app-link>
     </template>
@@ -86,6 +86,9 @@ export default {
       if (isExternal(routePath)) {
         return routePath
       }
+      if (isExternal(this.basePath)) {
+        return this.basePath
+      }
       return path.resolve(this.basePath, routePath)
     },
 

src/layout/components/Sidebar/index.vue

@@ -3,7 +3,7 @@
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
-        :default-active="$route.path"
+        :default-active="activeMenu"
         :collapse="isCollapse"
         :background-color="variables.menuBg"
         :text-color="variables.menuText"
@@ -30,6 +30,15 @@ export default {
       'permission_routes',
       'sidebar'
     ]),
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
     showLogo() {
       return this.$store.state.settings.sidebarLogo
     },

src/layout/components/TagsView/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tags-view-container">
+  <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper">
       <router-link
         v-for="tag in visitedViews"
@@ -145,7 +145,7 @@ export default {
     closeSelectedTag(view) {
       this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
         if (this.isActive(view)) {
-          this.toLastView(visitedViews)
+          this.toLastView(visitedViews, view)
         }
       })
     },
@@ -160,16 +160,22 @@ export default {
         if (this.affixTags.some(tag => tag.path === view.path)) {
           return
         }
-        this.toLastView(visitedViews)
+        this.toLastView(visitedViews, view)
       })
     },
-    toLastView(visitedViews) {
+    toLastView(visitedViews, view) {
       const latestView = visitedViews.slice(-1)[0]
       if (latestView) {
         this.$router.push(latestView)
       } else {
-        // You can set another route
+        // now the default is to redirect to the home page if there is no tags-view,
-        this.$router.push('/')
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
       }
     },
     openMenu(tag, e) {
@@ -243,7 +249,7 @@ export default {
   .contextmenu {
     margin: 0;
     background: #fff;
-    z-index: 100;
+    z-index: 3000;
     position: absolute;
     list-style-type: none;
     padding: 5px 0;

src/layout/mixin/ResizeHandler.js

@@ -14,6 +14,9 @@ export default {
   beforeMount() {
     window.addEventListener('resize', this.resizeHandler)
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+  },
   mounted() {
     const isMobile = this.isMobile()
     if (isMobile) {

src/router/index.js

@@ -4,41 +4,40 @@ import Router from 'vue-router'
 Vue.use(Router)
 
 /* Layout */
-import Layout from '@/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
- *  detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
- **/
-
 /**
-* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
+ * Note: sub-menu only appear when route children.length >= 1
-* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
-*                                if not set alwaysShow, only more than one route under the children
+ *
-*                                it will becomes nested mode, otherwise not show the root menu
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
-* redirect: noredirect           if `redirect:noredirect` will no redirect in the breadcrumb
+ * alwaysShow: true               if set true, will always show the root menu
-* name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ *                                if not set alwaysShow, when item has more than one children route,
-* meta : {
+ *                                it will becomes nested mode, otherwise not show the root menu
-    roles: ['admin','editor']    will control the page roles (you can set multiple roles)
+ * redirect: noredirect           if `redirect:noredirect` will no redirect in the breadcrumb
-    title: 'title'               the name show in sub-menu and breadcrumb (recommend set)
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * meta : {
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
     icon: 'svg-name'             the icon show in the sidebar
-    noCache: true                if true, the page will no be cached(default is false)
+    noCache: true                if set true, the page will no be cached(default is false)
-    breadcrumb: false            if false, the item will hidden in breadcrumb(default is true)
+    affix: true                  if set true, the tag will affix in the tags-view
-    affix: true                  if true, the tag will affix in the tags-view
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
   }
-**/
+ */
 
 /**
  * constantRoutes
  * a base page that does not have permission requirements
  * all roles can be accessed
- * */
+ */
 export const constantRoutes = [
   {
     path: '/redirect',
@@ -58,7 +57,7 @@ export const constantRoutes = [
   },
   {
     path: '/auth-redirect',
-    component: () => import('@/views/login/authredirect'),
+    component: () => import('@/views/login/authRedirect'),
     hidden: true
   },
   {
@@ -114,7 +113,7 @@ export const constantRoutes = [
 /**
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
-*/
+ */
 export const asyncRoutes = [
   {
     path: '/permission',
@@ -175,7 +174,6 @@ export const asyncRoutes = [
   chartsRouter,
   nestedRouter,
   tableRouter,
-  treeTableRouter,
 
   {
     path: '/example',
@@ -197,7 +195,7 @@ export const asyncRoutes = [
         path: 'edit/:id(\\d+)',
         component: () => import('@/views/example/edit'),
         name: 'EditArticle',
-        meta: { title: 'editArticle', noCache: true },
+        meta: { title: 'editArticle', noCache: true, activeMenu: '/example/list' },
         hidden: true
       },
       {

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 '@/layout/Layout'
+import Layout from '@/layout'
 
 const chartsRouter = {
   path: '/charts',

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 '@/layout/Layout'
+import Layout from '@/layout'
 
 const componentsRouter = {
   path: '/components',

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 '@/layout/Layout'
+import Layout from '@/layout'
 
 const nestedRouter = {
   path: '/nested',

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 '@/layout/Layout'
+import Layout from '@/layout'
 
 const tableRouter = {
   path: '/table',

src/router/modules/tree-table.js

@@ -1,29 +0,0 @@
-/** When your routing table is too long, you can split it into small modules**/
-
-import Layout from '@/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

src/settings.js

@@ -1,4 +1,8 @@
+import variables from '@/styles/element-variables.scss'
+
 export default {
+  theme: variables.theme,
+
   /**
    * @type {boolean} true | false
    * @description Whether show the settings right-panel
@@ -24,10 +28,10 @@ export default {
   sidebarLogo: false,
 
   /**
-   * @type {string | array} 'production' | ['production','development']
+   * @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']
+   * If you want to also use it in dev, you can pass ['production', 'development']
    */
   errorLog: 'production'
 }

src/store/index.js

@@ -1,24 +1,24 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-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'
 
 Vue.use(Vuex)
 
+// https://webpack.js.org/guides/dependency-management/#requirecontext
+const modulesFiles = require.context('./modules', false, /\.js$/)
+
+// you do not need `import app from './modules/app'`
+// it will auto require all vuex module from modules file
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+  // set './app.js' => 'app'
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = modulesFiles(modulePath)
+  modules[moduleName] = value.default
+  return modules
+}, {})
+
 const store = new Vuex.Store({
-  modules: {
+  modules,
-    app,
-    errorLog,
-    permission,
-    tagsView,
-    settings,
-    user
-  },
   getters
 })
 

src/store/modules/app.js

@@ -1,4 +1,5 @@
 import Cookies from 'js-cookie'
+import { getLanguage } from '@/lang/index'
 
 const state = {
   sidebar: {
@@ -6,7 +7,7 @@ const state = {
     withoutAnimation: false
   },
   device: 'desktop',
-  language: Cookies.get('language') || 'en',
+  language: getLanguage(),
   size: Cookies.get('size') || 'medium'
 }
 

src/store/modules/errorLog.js

@@ -1,4 +1,3 @@
-
 const state = {
   logs: []
 }

src/store/modules/settings.js

@@ -1,7 +1,8 @@
 import defaultSettings from '@/settings'
-const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo, theme } = defaultSettings
 
 const state = {
+  theme: theme,
   showSettings: showSettings,
   tagsView: tagsView,
   fixedHeader: fixedHeader,

src/store/modules/tagsView.js

@@ -1,4 +1,3 @@
-
 const state = {
   visitedViews: [],
   cachedViews: []

src/styles/element-variables.scss

@@ -23,3 +23,9 @@ $--table-border:1px solid#dfe6ec;
 $--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;
+}

src/styles/sidebar.scss

@@ -12,6 +12,7 @@
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;
+    background-color: $menuBg;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -28,10 +29,6 @@
 
     .scrollbar-wrapper {
       overflow-x: hidden !important;
-
-      .el-scrollbar__view {
-        height: 100%;
-      }
     }
 
     .el-scrollbar__bar.is-vertical {

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { Message } from 'element-ui'
+import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 
@@ -23,7 +23,7 @@ service.interceptors.request.use(
   error => {
     // Do something with request error
     console.log(error) // for debug
-    Promise.reject(error)
+    return Promise.reject(error)
   }
 )
 
@@ -33,40 +33,39 @@ service.interceptors.response.use(
    * If you want to get information such as headers or status
    * Please return  response => response
   */
-  response => response.data,
   /**
    * 下面的注释为通过在response里，自定义code来标示请求状态
    * 当code返回如下情况则说明权限有问题，登出并返回到登录页
-   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
+   * 如想通过 XMLHttpRequest 来状态码标识 逻辑可写在下面error中
    * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
    */
-  // response => {
+  response => {
-  //   const res = response.data
+    const res = response.data
-  //   if (res.code !== 20000) {
+    if (res.code !== 20000) {
-  //     Message({
+      Message({
-  //       message: res.message,
+        message: res.message || 'error',
-  //       type: 'error',
+        type: 'error',
-  //       duration: 5 * 1000
+        duration: 5 * 1000
-  //     })
+      })
-  //     // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
-  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-  //       // 请自行在引入 MessageBox
+        // 请自行在引入 MessageBox
-  //       // import { Message, MessageBox } from 'element-ui'
+        // import { Message, MessageBox } from 'element-ui'
-  //       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
-  //         confirmButtonText: '重新登录',
+          confirmButtonText: '重新登录',
-  //         cancelButtonText: '取消',
+          cancelButtonText: '取消',
-  //         type: 'warning'
+          type: 'warning'
-  //       }).then(() => {
+        }).then(() => {
-  //         store.dispatch('user/resetToken').then(() => {
+          store.dispatch('user/resetToken').then(() => {
-  //           location.reload() // 为了重新实例化vue-router对象 避免bug
+            location.reload() // 为了重新实例化vue-router对象 避免bug
-  //         })
+          })
-  //       })
+        })
-  //     }
+      }
-  //     return Promise.reject('error')
+      return Promise.reject(res.message || 'error')
-  //   } else {
+    } else {
-  //     return response.data
+      return res
-  //   }
+    }
-  // },
+  },
   error => {
     console.log('err' + error) // for debug
     Message({

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" />

src/views/dashboard/admin/components/TransactionTable.vue

@@ -11,9 +11,9 @@
       </template>
     </el-table-column>
     <el-table-column label="Status" width="100" align="center">
-      <template slot-scope="scope">
+      <template slot-scope="{row}">
-        <el-tag :type="scope.row.status | statusFilter">
+        <el-tag :type="row.status | statusFilter">
-          {{ scope.row.status }}
+          {{ row.status }}
         </el-tag>
       </template>
     </el-table-column>

src/views/dashboard/admin/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
+    <github-corner class="github-corner" />
 
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
@@ -100,6 +100,15 @@ export default {
 .dashboard-editor-container {
   padding: 32px;
   background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
+  }
+
   .chart-wrapper {
     background: #fff;
     padding: 16px 16px 0;

src/views/example/components/ArticleDetail.vue

@@ -1,7 +1,7 @@
 <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" />
@@ -28,7 +28,7 @@
               <el-row>
                 <el-col :span="8">
                   <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
-                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable remote placeholder="搜索用户">
+                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="搜索用户">
                       <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
                     </el-select>
                   </el-form-item>
@@ -81,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'
 
@@ -225,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)
       })

src/views/example/list.vue

@@ -26,17 +26,17 @@
       </el-table-column>
 
       <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <el-tag :type="scope.row.status | statusFilter">
+          <el-tag :type="row.status | statusFilter">
-            {{ scope.row.status }}
+            {{ row.status }}
           </el-tag>
         </template>
       </el-table-column>
 
       <el-table-column min-width="300px" label="Title">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <router-link :to="'/example/edit/'+scope.row.id" class="link-type">
+          <router-link :to="'/example/edit/'+row.id" class="link-type">
-            <span>{{ scope.row.title }}</span>
+            <span>{{ row.title }}</span>
           </router-link>
         </template>
       </el-table-column>
@@ -95,14 +95,6 @@ export default {
         this.total = response.data.total
         this.listLoading = false
       })
-    },
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.getList()
-    },
-    handleCurrentChange(val) {
-      this.listQuery.page = val
-      this.getList()
     }
   }
 }

src/views/excel/components/FilenameOption.vue

@@ -2,7 +2,7 @@
   <div style="display:inline-block;">
     <!-- $t is vue-i18n global function to translate lang -->
     <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:340px;" prefix-icon="el-icon-document" />
+    <el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:350px;" prefix-icon="el-icon-document" />
   </div>
 </template>
 

src/views/excel/selectExcel.vue

@@ -1,7 +1,7 @@
 <template>
   <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-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:350px;" prefix-icon="el-icon-document" />
     <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">
       {{ $t('excel.selectedExport') }}
     </el-button>

src/views/guide/defineSteps.js

@@ -1,6 +1,6 @@
 const steps = [
   {
-    element: '.hamburger-container',
+    element: '#hamburger-container',
     popover: {
       title: 'Hamburger',
       description: 'Open && Close sidebar',
@@ -8,7 +8,7 @@ const steps = [
     }
   },
   {
-    element: '.breadcrumb-container',
+    element: '#breadcrumb-container',
     popover: {
       title: 'Breadcrumb',
       description: 'Indicate the current page location',
@@ -16,31 +16,31 @@ const steps = [
     }
   },
   {
-    element: '.screenfull',
+    element: '#header-search',
+    popover: {
+      title: 'Page Search',
+      description: 'Page search, quick navigation',
+      position: 'left'
+    }
+  },
+  {
+    element: '#screenfull',
     popover: {
       title: 'Screenfull',
-      description: 'Bring the page into fullscreen',
+      description: 'Set the page into fullscreen',
       position: 'left'
     }
   },
   {
-    element: '.international-icon',
+    element: '#size-select',
     popover: {
-      title: 'Switch language',
+      title: 'Switch Size',
-      description: 'Switch the system language',
+      description: 'Switch the system size',
       position: 'left'
     }
   },
   {
-    element: '.theme-switch',
+    element: '#tags-view-container',
-    popover: {
-      title: 'Theme Switch',
-      description: 'Custom switch system theme',
-      position: 'left'
-    }
-  },
-  {
-    element: '.tags-view-container',
     popover: {
       title: 'Tags view',
       description: 'The history of the page you visited',

src/views/login/authRedirect.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'Authredirect',
+  name: 'AuthRedirect',
   created() {
     const hash = window.location.search.slice(1)
     if (window.localStorage) {

src/views/login/index.vue

@@ -14,6 +14,7 @@
           <svg-icon icon-class="user" />
         </span>
         <el-input
+          ref="username"
           v-model="loginForm.username"
           :placeholder="$t('login.username')"
           name="username"
@@ -22,22 +23,28 @@
         />
       </el-form-item>
 
-      <el-form-item prop="password">
+      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
-        <span class="svg-container">
+        <el-form-item prop="password">
-          <svg-icon icon-class="password" />
+          <span class="svg-container">
-        </span>
+            <svg-icon icon-class="password" />
-        <el-input
+          </span>
-          v-model="loginForm.password"
+          <el-input
-          :type="passwordType"
+            :key="passwordType"
-          :placeholder="$t('login.password')"
+            ref="password"
-          name="password"
+            v-model="loginForm.password"
-          auto-complete="on"
+            :type="passwordType"
-          @keyup.enter.native="handleLogin"
+            :placeholder="$t('login.password')"
-        />
+            name="password"
-        <span class="show-pwd" @click="showPwd">
+            auto-complete="on"
-          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+            @keyup.native="checkCapslock"
-        </span>
+            @blur="capsTooltip = false"
-      </el-form-item>
+            @keyup.enter.native="handleLogin"
+          />
+          <span class="show-pwd" @click="showPwd">
+            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+          </span>
+        </el-form-item>
+      </el-tooltip>
 
       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
         {{ $t('login.logIn') }}
@@ -74,7 +81,7 @@
 <script>
 import { validUsername } from '@/utils/validate'
 import LangSelect from '@/components/LangSelect'
-import SocialSign from './socialsignin'
+import SocialSign from './socialSignin'
 
 export default {
   name: 'Login',
@@ -97,13 +104,14 @@ export default {
     return {
       loginForm: {
         username: 'admin',
-        password: '1111111'
+        password: '111111'
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },
       passwordType: 'password',
+      capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined
@@ -120,16 +128,38 @@ export default {
   created() {
     // window.addEventListener('storage', this.afterQRScan)
   },
+  mounted() {
+    if (this.loginForm.username === '') {
+      this.$refs.username.focus()
+    } else if (this.loginForm.password === '') {
+      this.$refs.password.focus()
+    }
+  },
   destroyed() {
     // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
+    checkCapslock({ shiftKey, key } = {}) {
+      if (key && key.length === 1) {
+        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
+          this.capsTooltip = true
+        } else {
+          this.capsTooltip = false
+        }
+      }
+      if (key === 'CapsLock' && this.capsTooltip === true) {
+        this.capsTooltip = false
+      }
+    },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''
       } else {
         this.passwordType = 'password'
       }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
@@ -176,16 +206,12 @@ export default {
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
 $bg:#283443;
-$light_gray:#eee;
+$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;
-    }
   }
 }
 
@@ -207,7 +233,7 @@ $cursor: #fff;
       caret-color: $cursor;
 
       &:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
+        box-shadow: 0 0 0px 1000px $bg inset !important;
         -webkit-text-fill-color: $cursor !important;
       }
     }

src/views/permission/components/SwitchRoles.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div style="margin-bottom:15px;">
-      {{ $t('permission.roles') }}： {{ roles }}
+      {{ $t('permission.roles') }}: {{ roles }}
     </div>
-    {{ $t('permission.switchRoles') }}：
+    {{ $t('permission.switchRoles') }}:
     <el-radio-group v-model="switchRoles">
       <el-radio-button label="editor" />
       <el-radio-button label="admin" />

src/views/svg-icons/element-icon.json

@@ -0,0 +1 @@
+["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"]

src/views/svg-icons/index.vue

@@ -4,37 +4,57 @@
       <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
       </a>
     </p>
-    <div class="icons-wrapper">
+    <el-tabs type="border-card">
-      <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
+      <el-tab-pane label="Icons">
-        <el-tooltip placement="top">
+        <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
-          <div slot="content">
+          <el-tooltip placement="top">
-            {{ generateIconCode(item) }}
+            <div slot="content">
-          </div>
+              {{ generateIconCode(item) }}
-          <div class="icon-item">
+            </div>
-            <svg-icon :icon-class="item" class-name="disabled" />
+            <div class="icon-item">
-            <span>{{ item }}</span>
+              <svg-icon :icon-class="item" class-name="disabled" />
-          </div>
+              <span>{{ item }}</span>
-        </el-tooltip>
+            </div>
-      </div>
+          </el-tooltip>
-    </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateElementIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <i :class="'el-icon-' + item" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import icons from './requireIcons'
 import clipboard from '@/utils/clipboard'
+import icons from './requireIcons'
+import elementIcons from './element-icon.json'
 
 export default {
   name: 'Icons',
   data() {
     return {
-      iconsMap: icons
+      iconsMap: icons,
+      elementIcons: elementIcons
     }
   },
   methods: {
     generateIconCode(symbol) {
       return `<svg-icon icon-class="${symbol}" />`
     },
+    generateElementIconCode(symbol) {
+      return `<i class="el-icon-${symbol}" />`
+    },
     handleClipboard(text, event) {
       clipboard(text, event)
     }
@@ -46,25 +66,25 @@ export default {
 .icons-container {
   margin: 10px 20px 0;
   overflow: hidden;
-  .icons-wrapper {
+
-    margin: 0 auto;
-  }
   .icon-item {
     margin: 20px;
-    height: 110px;
+    height: 85px;
     text-align: center;
-    width: 110px;
+    width: 100px;
     float: left;
     font-size: 30px;
     color: #24292e;
     cursor: pointer;
   }
+
   span {
     display: block;
-    font-size: 24px;
+    font-size: 16px;
     margin-top: 10px;
   }
-  .disabled{
+
+  .disabled {
     pointer-events: none;
   }
 }

src/views/svg-icons/requireIcons.js

@@ -1,4 +1,3 @@
-
 const req = require.context('../../icons/svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys()
 

src/views/tab/components/tabPane.vue

@@ -19,9 +19,9 @@
     </el-table-column>
 
     <el-table-column min-width="300px" label="Title">
-      <template slot-scope="scope">
+      <template slot-scope="{row}">
-        <span>{{ scope.row.title }}</span>
+        <span>{{ row.title }}</span>
-        <el-tag>{{ scope.row.type }}</el-tag>
+        <el-tag>{{ row.type }}</el-tag>
       </template>
     </el-table-column>
 
@@ -44,9 +44,9 @@
     </el-table-column>
 
     <el-table-column class-name="status-col" label="Status" width="110">
-      <template slot-scope="scope">
+      <template slot-scope="{row}">
-        <el-tag :type="scope.row.status | statusFilter">
+        <el-tag :type="row.status | statusFilter">
-          {{ scope.row.status }}
+          {{ row.status }}
         </el-tag>
       </template>
     </el-table-column>

src/views/table/complexTable.vue

@@ -46,9 +46,9 @@
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.title')" min-width="150px">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.title }}</span>
+          <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
-          <el-tag>{{ scope.row.type | typeFilter }}</el-tag>
+          <el-tag>{{ row.type | typeFilter }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.author')" width="110px" align="center">
@@ -67,30 +67,30 @@
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.readings')" align="center" width="95">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span v-if="scope.row.pageviews" class="link-type" @click="handleFetchPv(scope.row.pageviews)">{{ scope.row.pageviews }}</span>
+          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
           <span v-else>0</span>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <el-tag :type="scope.row.status | statusFilter">
+          <el-tag :type="row.status | statusFilter">
-            {{ scope.row.status }}
+            {{ 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">
+        <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
+          <el-button type="primary" size="mini" @click="handleUpdate(row)">
             {{ $t('table.edit') }}
           </el-button>
-          <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">
+          <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
             {{ $t('table.publish') }}
           </el-button>
-          <el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">
+          <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
             {{ $t('table.draft') }}
           </el-button>
-          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">
+          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
             {{ $t('table.delete') }}
           </el-button>
         </template>

src/views/table/dragTable.vue

@@ -39,9 +39,9 @@
       </el-table-column>
 
       <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <el-tag :type="scope.row.status | statusFilter">
+          <el-tag :type="row.status | statusFilter">
-            {{ scope.row.status }}
+            {{ row.status }}
           </el-tag>
         </template>
       </el-table-column>
@@ -54,10 +54,10 @@
     </el-table>
     <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
     <div class="show-d">
-      {{ $t('table.dragTips1') }} : &nbsp; {{ oldList }}
+      <el-tag style="margin-right:12px;">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }}
     </div>
     <div class="show-d">
-      {{ $t('table.dragTips2') }} : {{ newList }}
+      <el-tag>{{ $t('table.dragTips2') }} :</el-tag> {{ newList }}
     </div>
   </div>
 </template>
@@ -113,9 +113,9 @@ export default {
       this.sortable = Sortable.create(el, {
         ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
         setData: function(dataTransfer) {
-          dataTransfer.setData('Text', '')
           // to avoid Firefox bug
           // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+          dataTransfer.setData('Text', '')
         },
         onEnd: evt => {
           const targetRow = this.list.splice(evt.oldIndex, 1)[0]

src/views/table/inlineEditTable.vue

@@ -26,31 +26,31 @@
       </el-table-column>
 
       <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <el-tag :type="scope.row.status | statusFilter">
+          <el-tag :type="row.status | statusFilter">
-            {{ scope.row.status }}
+            {{ row.status }}
           </el-tag>
         </template>
       </el-table-column>
 
       <el-table-column min-width="300px" label="Title">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <template v-if="scope.row.edit">
+          <template v-if="row.edit">
-            <el-input v-model="scope.row.title" class="edit-input" size="small" />
+            <el-input v-model="row.title" class="edit-input" size="small" />
-            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">
+            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
               cancel
             </el-button>
           </template>
-          <span v-else>{{ scope.row.title }}</span>
+          <span v-else>{{ row.title }}</span>
         </template>
       </el-table-column>
 
       <el-table-column align="center" label="Actions" width="120">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">
+          <el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
             Ok
           </el-button>
-          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">
+          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
             Edit
           </el-button>
         </template>

src/views/tree-table/custom/data.js

@@ -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
-

src/views/tree-table/custom/index.vue

@@ -1,159 +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>

src/views/tree-table/data.js

@@ -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

src/views/tree-table/index.vue

@@ -1,126 +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>

src/views/zip/index.vue

@@ -3,7 +3,7 @@
     <!-- $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
+      {{ $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">

vue.config.js

@@ -1,28 +1,27 @@
 'use strict'
-
 const path = require('path')
+const pkg = require('./package.json')
 
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = 'vue-element-admin'
+const name = pkg.name || 'vue-element-admin' // page title
 const port = 9527 // dev port
 
-// Explanation of each configuration item You can find it in https://cli.vuejs.org/config/
+// All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
-   * You can set by yourself according to actual condition
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
-   * 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/,
-   * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
-   * then assetsPublicPath should be set to "/bar/".
    * In most cases please use '/' !!!
-   * Detail https://cli.vuejs.org/config/#publicPath
+   * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: '/',
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development' ? 'error' : false,
+  lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
     port: port,
@@ -32,33 +31,20 @@ module.exports = {
       errors: true
     },
     proxy: {
-      '/api': {
+      // 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: {
-          '^/api': ''
+          ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       }
     },
-    after(app) {
+    after: require('./mock/mock-server.js')
-      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: {
-    // We provide the app's title in Webpack's name field, so that
+    // 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: {
@@ -70,6 +56,8 @@ module.exports = {
   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'))
@@ -85,6 +73,8 @@ module.exports = {
         symbolId: 'icon-[name]'
       })
       .end()
+
+    // set preserveWhitespace
     config.module
       .rule('vue')
       .use('vue-loader')
@@ -94,6 +84,7 @@ module.exports = {
         return options
       })
       .end()
+
     config
       .when(process.env.NODE_ENV === 'development',
         config => config.devtool('cheap-source-map')
@@ -118,17 +109,17 @@ module.exports = {
                   name: 'chunk-libs',
                   test: /[\\/]node_modules[\\/]/,
                   priority: 10,
-                  chunks: 'initial' // 只打包初始时依赖的第三方
+                  chunks: 'initial' // only package third parties that are initially dependent
                 },
                 elementUI: {
-                  name: 'chunk-elementUI', // 单独将 elementUI 拆包
+                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
+                  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[\\/]/
+                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                 },
                 commons: {
                   name: 'chunk-commons',
-                  test: resolve('src/components'), // 可自定义拓展你的规则
+                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, // 最小公用次数
+                  minChunks: 3, //  minimum common number
                   priority: 5,
                   reuseExistingChunk: true
                 }