[release] 3.7.2

refactor(SidebarItem): optimizate SidebarItem (#845 )
* refactor(sidebar-item): optimizate SiderbarItem. * chore: update nested examples. * fix: fix a wrong path. * fix: fix a transition bug. * fix: fix a wrong path. * perf: using "router" mode of el-menu. * Revert "perf: using "router" mode of el-menu." This reverts commit cef02a30b0. * fix: complement i18n text.
2018-07-13 13:38:43 +08:00 · 2018-07-13 11:23:06 +08:00 · 2018-07-11 14:16:28 +08:00 · 2018-07-11 00:18:34 +08:00 · 2018-07-10 13:22:16 +08:00 · 2018-07-10 13:02:19 +08:00
132 changed files with 4632 additions and 3195 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -8,5 +8,10 @@
    }],
    "stage-2"
  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "development":{
+      "plugins": ["dynamic-import-node"]
+    }
+  }
 }
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+**/*.log

 test/unit/coverage
 test/e2e/reports
--- a/README.md
+++ b/README.md
@@ -3,52 +3,55 @@
 </p>

 <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">
-	</a>
-	<a href="https://github.com/ElemeFE/element">
-		<img src="https://img.shields.io/badge/element--ui-2.0.8-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">
-	</a>
-	<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
-		<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
-	</a>
-	<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
-		<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
-	</a>
+  <a href="https://github.com/vuejs/vue">
+    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/ElemeFE/element">
+    <img src="https://img.shields.io/badge/element--ui-2.3.2-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">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
+    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+  </a>
 </p>

 English | [简体中文](./README.zh-CN.md)

 ## Introduction

-`vue-element-admin` is a production-ready solution for admin interfaces. Based on [Vue.js](https://github.com/vuejs/vue) and use the UI Toolkit -- [element](https://github.com/ElemeFE/element). `vue-element-admin` is a magical vue admin, it 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.
+[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).
+
+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.

 - [Preview](http://panjiachen.github.io/vue-element-admin)

- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
+- [Documentation](https://panjiachen.github.io/vue-element-admin-site/)

- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+- [Gitter](https://gitter.im/vue-element-admin/discuss)

- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)

-**vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.**
+- [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
+
+**This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.**

 - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
 - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)

-**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0**
-
 ## 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/) 和 [element-ui](https://github.com/ElemeFE/element). All data requests for this project are simulated using [Mock.js](https://github.com/nuysoft/Mock). It would be helpful if you have pre-existing knowledge on those.
-
- **This project is not a scaffolding and is more of an integrated solution.**
+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).
+ Understanding and learning this knowledge in advance will greatly help the use of this project.

 **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**

+ **Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
+
 <p align="center">
  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>
@@ -56,46 +59,71 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
 ## Features
 ```
 - Login / Logout
- Permission authentication
+
+- Permission Authentication
+  - Page permission
+  - Directive permission
+  - Two-step login
+
 - Multi-environment build
- Dynamic sidebar (supports multi-level routing)
- Dynamic breadcrumb
- I18n
- Customizable theme
- Tags-view(Tab page Support right-click operation)
- Rich text editor
- Markdown editor
- JSON editor
- Screenfull
- Drag and drop list
- Svg Sprite
+  - dev sit stage prod
+
+- Global Features
+  - I18n
+  - Multiple dynamic themes
+  - Dynamic sidebar (supports multi-level routing)
+  - Dynamic breadcrumb
+  - Tags-view(Tab page Support right-click operation)
+  - Svg Sprite
+  - Mock data
+  - Screenfull
+  - Responsive Sidebar
+
+- Editor
+  - Rich Text Editor
+  - Markdown Editor
+  - JSON Editor
+
+- Excel
+  - Export Excel
+  - Export zip
+  - Upload Excel
+  - Visualization Excel
+
+- Table
+  - Dynamic Table
+  - Drag And Drop Table
+  - Tree Table
+  - Inline Edit Table
+
+- Error Page
+  - 401
+  - 404
+
+- Components
+  - Avatar Upload
+  - Back To Top
+  - Drag Dialog
+  - Drag Kanban
+  - Drag List
+  - SplitPane
+  - Dropzone
+  - Sticky
+  - CountTo
+
+- Advanced Example
+- Error Log
 - Dashboard
- Mock data
+- Guide Page
 - Echarts
 - Clipboard
- 401/404 error page
- Error log
- Export excel
- Export zip
- Front-end visualization excel
- Tree Table
- Table example
- Dynamictable example
- Drag and drop table example
- Inline edit table example
- Form example
- Two-step login
- SplitPane
- Dropzone
- Sticky
- CountTo
 - Markdown to html
 ```

 ## Getting started

 ```bash
-# clone the projice
+# clone the project
 git clone https://github.com/PanJiaChen/vue-element-admin.git

 # install dependency
@@ -131,7 +159,7 @@ npm run lint
 npm run lint -- --fix
 ```

-Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/deploy) for more information
+Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information

 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
@@ -146,6 +174,8 @@ If you find this project useful, you can buy author a glass of juice :tropical_d

 [Paypal Me](https://www.paypal.me/panfree23)

+[Buy me a coffee](https://www.buymeacoffee.com/Pan)
+
 ## License

 [MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -3,46 +3,46 @@
 </p>

 <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">
-	</a>
-	<a href="https://github.com/ElemeFE/element">
-		<img src="https://img.shields.io/badge/element--ui-2.0.8-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">
-	</a>
-	<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
-		<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
-	</a>
-	<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
-		<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
-	</a>
+  <a href="https://github.com/vuejs/vue">
+    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/ElemeFE/element">
+    <img src="https://img.shields.io/badge/element--ui-2.3.2-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">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
+    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+  </a>
 </p>

 简体中文 | [English](./README.md)

 ## 简介

-`vue-element-admin` 是一个后台集成解决方案，它基于 [Vue.js](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](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

 - [在线访问](http://panjiachen.github.io/vue-element-admin)

- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
+- [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)

- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss)

- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+- [Donate](https://panjiachen.github.io/vue-element-admin-site/zh/donate/)

 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
 - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
 - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)

-**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0**
-
 ## 前序准备

-你的本地环境需要安装 [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/) and [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/) 、[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)
@@ -52,7 +52,6 @@
 - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
 - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)

- 响应需求，开了一个qq群 `591724180` 方便大家交流

 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西

@@ -60,6 +59,8 @@

 **本项目并不是一个脚手架，更倾向于是一个集成解决方案**

+ **注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
+
 **该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**

 <p align="center">
@@ -68,40 +69,65 @@

 ## 功能
 ```
- 登录/注销
+- 登录 / 注销
+
 - 权限验证
+  - 页面权限
+  - 指令权限
+  - 二步登录
+
 - 多环境发布
- 动态侧边栏（支持多级路由）
- 动态面包屑
- 国际化多语言
- 多种动态换肤
- 快捷导航(标签页)
- 富文本编辑器
- Markdown编辑器
- JSON编辑器
- Screenfull全屏
- 列表拖拽
- Svg Sprite 图标
+  - dev sit stage prod
+
+- 全局功能
+  - 国际化多语言
+  - 多种动态换肤
+  - 动态侧边栏（支持多级路由嵌套）
+  - 动态面包屑
+  - 快捷导航(标签页)
+  - Svg Sprite 图标
+  - 本地mock数据
+  - Screenfull全屏
+  - 自适应收缩侧边栏
+
+- 编辑器
+  - 富文本
+  - Markdown
+  - JSON 等多格式
+
+- Excel
+  - 导出excel
+  - 导出zip
+  - 导入excel
+  - 前端可视化excel
+
+- 表格
+  - 动态表格
+  - 拖拽表格
+  - 树形表格
+  - 内联编辑
+
+- 错误页面
+  - 401
+  - 404
+
+- 組件
+  - 头像上传
+  - 返回顶部
+  - 拖拽Dialog
+  - 拖拽看板
+  - 列表拖拽
+  - SplitPane
+  - Dropzone
+  - Sticky
+  - CountTo
+
+- 综合实例
+- 错误日志
 - Dashboard
- 本地mock数据
+- 引导页
 - Echarts 图表
 - Clipboard(剪贴复制)
- 401/404错误页面
- 错误日志
- 导出excel
- 导出zip
- 前端可视化excel
- 树形table
- Table example
- 动态table example
- 拖拽table example
- 内联编辑table example
- Form example
- 二步登录
- SplitPane
- Dropzone
- Sticky
- CountTo
 - Markdown2html
 ```

@@ -126,7 +152,7 @@ npm run dev
 # 构建测试环境
 npm run build:sit

-# 构建生成环境
+# 构建生产环境
 npm run build:prod
 ```

@@ -145,7 +171,7 @@ npm run lint
 npm run lint -- --fix
 ```

-更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy)
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)

 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
--- a/build/build.js
+++ b/build/build.js
@@ -8,9 +8,10 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
-const server = require('pushstate-server')
+var connect = require('connect');
+var serveStatic = require('serve-static')

-var spinner = ora('building for '+ process.env.env_config+ ' environment...' )
+const spinner = ora('building for ' + process.env.env_config + ' environment...')
 spinner.start()

 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
@@ -27,22 +28,29 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
    }) + '\n\n')

    if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
+      console.log(chalk.red(' Build failed with errors.\n'))
      process.exit(1)
    }

-    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.cyan(' Build complete.\n'))
    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
+      ' Tip: built files are meant to be served over an HTTP server.\n' +
+      ' Opening index.html over file:// won\'t work.\n'
    ))
-    if(process.env.npm_config_preview){
-      server.start({
-          port: 9526,
-          directory: './dist',
-          file: '/index.html'
+
+    if (process.env.npm_config_preview) {
+      const port = 9526
+      const host = "http://localhost:" + port
+      const basePath = config.build.assetsPublicPath
+      const app = connect()
+
+      app.use(basePath, serveStatic('./dist', {
+        'index': ['index.html', '/']
+      }))
+
+      app.listen(port, function () {
+        console.log(chalk.green(`> Listening at  http://localhost:${port}${basePath}`))
      });
-      console.log('> Listening at ' +  'http://localhost:9526' + '\n')
    }
  })
 })
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -34,7 +34,6 @@ module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -1,5 +1,5 @@
 module.exports = {
-	NODE_ENV: '"development"',
-	ENV_CONFIG: '"dev"',
-	BASE_API: '"https://api-dev"'
+  NODE_ENV: '"development"',
+  ENV_CONFIG: '"dev"',
+  BASE_API: '"https://api-dev"'
 }
--- a/config/index.js
+++ b/config/index.js
@@ -13,7 +13,10 @@ module.exports = {
    proxyTable: {},

    // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+
+    // can be overwritten by process.env.HOST
+    // if you want dev by ip, please set host: '0.0.0.0'
+    host: 'localhost',
    port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
@@ -56,13 +59,18 @@ module.exports = {
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',

-    // you can set by youself according to actual condition
-    assetsPublicPath: './',
+    /**
+     * You can set by youself according to actual condition
+     * You will need to set this if you plan to deploy your site under a sub path,
+     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
+     * then assetsPublicPath should be set to "/bar/".
+     * In most cases please use '/' !!!
+     */
+    assetsPublicPath: '/vue-element-admin/', // If you are deployed on the root path, please use '/'

    /**
     * Source Maps
     */
-
    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,5 @@
 module.exports = {
-	NODE_ENV: '"production"',
-	ENV_CONFIG: '"prod"',
-	BASE_API: '"https://api-prod"'
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"prod"',
+  BASE_API: '"https://api-prod"'
 }
--- a/config/sit.env.js
+++ b/config/sit.env.js
@@ -1,5 +1,5 @@
 module.exports = {
-	NODE_ENV: '"production"',
-	ENV_CONFIG: '"sit"',
-	BASE_API: '"https://api-sit"'
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"sit"',
+  BASE_API: '"https://api-sit"'
 }
--- a/index.html
+++ b/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-		<meta name="renderer" content="webkit">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-		<title>vue-element-admin</title>
-	</head>
-	<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
-	<body>
-		<div id="app"></div>
-		<!-- built files will be auto injected -->
-	</body>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>vue-element-admin</title>
+  </head>
+  <body>
+    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,33 +1,56 @@
 {
  "name": "vue-element-admin",
-  "version": "3.6.2",
+  "version": "3.7.2",
  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
  "author": "Pan <panfree23@gmail.com>",
  "license": "MIT",
-  "private": true,
  "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
    "lint": "eslint --ext .js,.vue src",
-    "test": "npm run lint"
+    "test": "npm run lint",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "element-ui",
+    "admin",
+    "management-system",
+    "admin-template"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
  },
  "dependencies": {
    "axios": "0.17.1",
    "clipboard": "1.7.1",
    "codemirror": "5.32.0",
+    "connect": "3.6.6",
+    "driver.js": "0.5.2",
    "dropzone": "5.2.0",
    "echarts": "3.8.5",
-    "element-ui": "2.0.8",
+    "element-ui": "2.3.2",
    "file-saver": "1.3.3",
    "font-awesome": "4.7.0",
    "js-cookie": "2.2.0",
-    "jsonlint": "1.6.2",
+    "jsonlint": "1.6.3",
    "jszip": "3.1.5",
    "mockjs": "1.0.1-beta3",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "screenfull": "3.3.2",
+    "serve-static": "1.13.2",
    "showdown": "1.8.5",
    "simplemde": "1.11.2",
    "sortablejs": "1.7.0",
@@ -37,7 +60,7 @@
    "vue-multiselect": "2.0.8",
    "vue-router": "3.0.1",
    "vue-splitpane": "1.0.2",
-    "vuedraggable": "2.15.0",
+    "vuedraggable": "^2.16.0",
    "vuex": "3.0.1",
    "xlsx": "^0.11.16"
  },
@@ -47,6 +70,7 @@
    "babel-eslint": "8.0.3",
    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-loader": "7.1.2",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-plugin-transform-vue-jsx": "3.5.0",
@@ -64,6 +88,8 @@
    "file-loader": "1.1.5",
    "friendly-errors-webpack-plugin": "1.6.1",
    "html-webpack-plugin": "2.30.1",
+    "husky": "0.14.3",
+    "lint-staged": "7.2.0",
    "node-notifier": "5.1.2",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "3.2.0",
@@ -72,7 +98,6 @@
    "postcss-import": "11.0.0",
    "postcss-loader": "2.0.9",
    "postcss-url": "7.3.0",
-    "pushstate-server": "3.0.1",
    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "script-loader": "0.7.2",
@@ -81,7 +106,7 @@
    "svg-sprite-loader": "3.5.2",
    "uglifyjs-webpack-plugin": "1.1.3",
    "url-loader": "0.6.2",
-    "vue-loader": "13.5.0",
+    "vue-loader": "13.7.2",
    "vue-style-loader": "3.0.3",
    "vue-template-compiler": "2.5.10",
    "webpack": "3.10.0",
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <template>
-	<div id="app">
-		<router-view></router-view>
-	</div>
+  <div id="app">
+    <router-view></router-view>
+  </div>
 </template>

 <script>
  export default{
-    name: 'APP'
+    name: 'App'
  }
 </script>
--- a/src/api/article.js
+++ b/src/api/article.js
@@ -8,10 +8,11 @@ export function fetchList(query) {
  })
 }

-export function fetchArticle() {
+export function fetchArticle(id) {
  return request({
    url: '/article/detail',
-    method: 'get'
+    method: 'get',
+    params: { id }
  })
 }

--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -25,14 +25,16 @@ export default {
    },
    customStyle: {
      type: Object,
-      default: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '45px',
-        background: '#e7eaf1'
+      default: function() {
+        return {
+          right: '50px',
+          bottom: '50px',
+          width: '40px',
+          height: '40px',
+          'border-radius': '4px',
+          'line-height': '45px',
+          background: '#e7eaf1'
+        }
      }
    },
    transitionName: {
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -4,8 +4,10 @@

 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'

 export default {
+  mixins: [resize],
  props: {
    className: {
      type: String,
--- a/src/components/Charts/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@@ -4,8 +4,10 @@

 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'

 export default {
+  mixins: [resize],
  props: {
    className: {
      type: String,
--- a/src/components/Charts/mixChart.vue
+++ b/src/components/Charts/mixChart.vue
@@ -4,8 +4,10 @@

 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'

 export default {
+  mixins: [resize],
  props: {
    className: {
      type: String,
@@ -31,7 +33,6 @@ export default {
  },
  mounted() {
    this.initChart()
-    this.chart = null
  },
  beforeDestroy() {
    if (!this.chart) {
--- a/src/components/Charts/mixins/resize.js
+++ b/src/components/Charts/mixins/resize.js
@@ -0,0 +1,15 @@
+import { debounce } from '@/utils'
+
+export default {
+  mounted() {
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.__resizeHanlder)
+  }
+}
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -1,6 +1,6 @@
 <template>
  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff;"
      aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+    <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
        p-id="1692"></path>
@@ -30,16 +30,16 @@ export default {

 <style scoped>
 .hamburger {
-	display: inline-block;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	transform: rotate(90deg);
-	transition: .38s;
-	transform-origin: 50% 50%;
+  display: inline-block;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  transform: rotate(90deg);
+  transition: .38s;
+  transform-origin: 50% 50%;
 }

 .hamburger.is-active {
-	transform: rotate(0deg);
+  transform: rotate(0deg);
 }
 </style>
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
--- a/src/components/ImageCropper/lang.js
+++ b/src/components/ImageCropper/lang.js
@@ -1,41 +0,0 @@
-const langBag = {
-  zh: {
-    hint: '点击，或拖动图片至此处',
-    loading: '正在上传……',
-    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
-    success: '上传成功',
-    fail: '图片上传失败',
-    preview: '头像预览',
-    btn: {
-      off: '取消',
-      close: '关闭',
-      back: '上一步',
-      save: '保存'
-    },
-    error: {
-      onlyImg: '仅限图片格式',
-      outOfSize: '单文件大小不能超过 ',
-      lowestPx: '图片最低像素为（宽*高）：'
-    }
-  },
-  en: {
-    hint: 'Click, or drag the file here',
-    loading: 'Uploading……',
-    noSupported: 'Browser does not support, please use IE10+ or other browsers',
-    success: 'Upload success',
-    fail: 'Upload failed',
-    preview: 'Preview',
-    btn: {
-      off: 'Cancel',
-      close: 'Close',
-      back: 'Back',
-      save: 'Save'
-    },
-    error: {
-      onlyImg: 'Image only',
-      outOfSize: 'Image exceeds size limit: ',
-      lowestPx: 'The lowest pixel in the image: '
-    }
-  }
-}
-export default langBag
--- a/src/components/ImageCropper/upload.css
+++ b/src/components/ImageCropper/upload.css
@@ -1,691 +0,0 @@
-@charset "UTF-8";
-@-webkit-keyframes vicp_progress {
-    0% {
-        background-position-y: 0;
-    }
-    100% {
-        background-position-y: 40px;
-    }
-}
-
-@keyframes vicp_progress {
-    0% {
-        background-position-y: 0;
-    }
-    100% {
-        background-position-y: 40px;
-    }
-}
-
-@-webkit-keyframes vicp {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(0) translatey(-60px);
-        transform: scale(0) translatey(-60px);
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: scale(1) translatey(0);
-        transform: scale(1) translatey(0);
-    }
-}
-
-@keyframes vicp {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(0) translatey(-60px);
-        transform: scale(0) translatey(-60px);
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: scale(1) translatey(0);
-        transform: scale(1) translatey(0);
-    }
-}
-
-.vue-image-crop-upload {
-    position: fixed;
-    display: block;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.65);
-    -webkit-tap-highlight-color: transparent;
-    -moz-tap-highlight-color: transparent;
-}
-
-.vue-image-crop-upload .vicp-wrap {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    position: fixed;
-    display: block;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 600px;
-    height: 330px;
-    padding: 25px;
-    background-color: #fff;
-    border-radius: 2px;
-    -webkit-animation: vicp 0.12s ease-in;
-    animation: vicp 0.12s ease-in;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close {
-    position: absolute;
-    right: -30px;
-    top: -30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
-    position: relative;
-    display: block;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    -webkit-transition: -webkit-transform 0.18s;
-    transition: -webkit-transform 0.18s;
-    transition: transform 0.18s;
-    transition: transform 0.18s, -webkit-transform 0.18s;
-    -webkit-transform: rotate(0);
-    -ms-transform: rotate(0);
-    transform: rotate(0);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    content: '';
-    position: absolute;
-    top: 12px;
-    left: 4px;
-    width: 20px;
-    height: 3px;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
-    -webkit-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
-    position: relative;
-    padding: 35px;
-    height: 200px;
-    background-color: rgba(0, 0, 0, 0.03);
-    text-align: center;
-    border: 1px dashed rgba(0, 0, 0, 0.08);
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
-    display: block;
-    margin: 0 auto 6px;
-    width: 42px;
-    height: 42px;
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
-    display: block;
-    margin: 0 auto;
-    width: 0;
-    height: 0;
-    border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
-    border-left: 14.7px solid transparent;
-    border-right: 14.7px solid transparent;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
-    display: block;
-    width: 12.6px;
-    height: 14.7px;
-    margin: 0 auto;
-    background-color: rgba(0, 0, 0, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: block;
-    height: 12.6px;
-    border: 6px solid rgba(0, 0, 0, 0.3);
-    border-top: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
-    display: block;
-    padding: 15px;
-    font-size: 14px;
-    color: #666;
-    line-height: 30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 30px;
-    width: 100%;
-    height: 60px;
-    line-height: 30px;
-    background-color: #eee;
-    text-align: center;
-    color: #666;
-    font-size: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
-    cursor: pointer;
-    border-color: rgba(0, 0, 0, 0.1);
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
-    float: left;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
-    position: relative;
-    display: block;
-    width: 240px;
-    height: 180px;
-    background-color: #e5e5e0;
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
-    position: absolute;
-    display: block;
-    cursor: move;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
-    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    position: absolute;
-    background-color: rgba(241, 242, 243, 0.8);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
-    top: 0;
-    left: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
-    bottom: 0;
-    right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
-    position: relative;
-    margin: 30px 0;
-    width: 240px;
-    height: 18px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-    position: absolute;
-    top: 0;
-    width: 18px;
-    height: 18px;
-    border-radius: 100%;
-    background-color: rgba(0, 0, 0, 0.08);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.14);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
-    left: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
-    position: absolute;
-    content: '';
-    display: block;
-    left: 3px;
-    top: 8px;
-    width: 12px;
-    height: 2px;
-    background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-    right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
-    position: absolute;
-    content: '';
-    display: block;
-    left: 3px;
-    top: 8px;
-    width: 12px;
-    height: 2px;
-    background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
-    position: absolute;
-    content: '';
-    display: block;
-    top: 3px;
-    left: 8px;
-    width: 2px;
-    height: 12px;
-    background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
-    display: block;
-    padding-top: 5px;
-    margin: 0 auto;
-    width: 180px;
-    height: 8px;
-    vertical-align: top;
-    background: transparent;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    /* 滑块
-                     ---------------------------------------------------------------*/
-    /* 轨道
-                     ---------------------------------------------------------------*/
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
-    outline: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
-    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    -webkit-appearance: none;
-    appearance: none;
-    margin-top: -3px;
-    width: 12px;
-    height: 12px;
-    background-color: #61c091;
-    border-radius: 100%;
-    border: none;
-    -webkit-transition: 0.2s;
-    transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-thumb {
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    -moz-appearance: none;
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    background-color: #61c091;
-    border-radius: 100%;
-    border: none;
-    -webkit-transition: 0.2s;
-    transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-thumb {
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    background-color: #61c091;
-    border: none;
-    border-radius: 100%;
-    -webkit-transition: 0.2s;
-    transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    width: 14px;
-    height: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    width: 14px;
-    height: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-webkit-slider-thumb {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    margin-top: -4px;
-    width: 14px;
-    height: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-runnable-track {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    width: 100%;
-    height: 6px;
-    cursor: pointer;
-    border-radius: 2px;
-    border: none;
-    background-color: rgba(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-track {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    width: 100%;
-    height: 6px;
-    cursor: pointer;
-    border-radius: 2px;
-    border: none;
-    background-color: rgba(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-track {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    width: 100%;
-    cursor: pointer;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-    height: 6px;
-    border-radius: 2px;
-    border: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
-    background-color: rgba(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
-    background-color: rgba(68, 170, 119, 0.15);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
-    background-color: rgba(68, 170, 119, 0.5);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
-    background-color: rgba(68, 170, 119, 0.5);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
-    background-color: rgba(68, 170, 119, 0.45);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
-    background-color: rgba(68, 170, 119, 0.25);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
-    float: right;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
-    height: 150px;
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
-    position: relative;
-    padding: 5px;
-    width: 100px;
-    height: 100px;
-    float: left;
-    margin-right: 16px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
-    position: absolute;
-    bottom: -30px;
-    width: 100%;
-    font-size: 14px;
-    color: #bbb;
-    display: block;
-    text-align: center;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
-    position: absolute;
-    display: block;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    padding: 3px;
-    background-color: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child {
-    margin-right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child img {
-    border-radius: 100%;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
-    position: relative;
-    padding: 35px;
-    height: 200px;
-    background-color: rgba(0, 0, 0, 0.03);
-    text-align: center;
-    border: 1px dashed #ddd;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
-    display: block;
-    padding: 15px;
-    font-size: 16px;
-    color: #999;
-    line-height: 30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
-    margin-top: 12px;
-    background-color: rgba(0, 0, 0, 0.08);
-    border-radius: 3px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
-    position: relative;
-    display: block;
-    height: 5px;
-    border-radius: 3px;
-    background-color: #4a7;
-    -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-    box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-    -webkit-transition: width 0.15s linear;
-    transition: width 0.15s linear;
-    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-    background-size: 40px 40px;
-    -webkit-animation: vicp_progress 0.5s linear infinite;
-    animation: vicp_progress 0.5s linear infinite;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
-    content: '';
-    position: absolute;
-    display: block;
-    top: -3px;
-    right: -3px;
-    width: 9px;
-    height: 9px;
-    border: 1px solid rgba(245, 246, 247, 0.7);
-    -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-    box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-    border-radius: 100%;
-    background-color: #4a7;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
-    height: 100px;
-    line-height: 100px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate {
-    position: absolute;
-    right: 20px;
-    bottom: 20px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate a {
-    position: relative;
-    float: left;
-    display: block;
-    margin-left: 10px;
-    width: 100px;
-    height: 36px;
-    line-height: 36px;
-    text-align: center;
-    cursor: pointer;
-    font-size: 14px;
-    color: #4a7;
-    border-radius: 2px;
-    overflow: hidden;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
-    background-color: rgba(0, 0, 0, 0.03);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-error,
-.vue-image-crop-upload .vicp-wrap .vicp-success {
-    display: block;
-    font-size: 14px;
-    line-height: 24px;
-    height: 24px;
-    color: #d10;
-    text-align: center;
-    vertical-align: top;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-success {
-    color: #4a7;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon3 {
-    position: relative;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    top: 4px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
-    position: absolute;
-    top: 3px;
-    left: 6px;
-    width: 6px;
-    height: 10px;
-    border-width: 0 2px 2px 0;
-    border-color: #4a7;
-    border-style: solid;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    content: '';
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2 {
-    position: relative;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    top: 4px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
-    content: '';
-    position: absolute;
-    top: 9px;
-    left: 4px;
-    width: 13px;
-    height: 2px;
-    background-color: #d10;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
-    -webkit-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-}
-
-.e-ripple {
-    position: absolute;
-    border-radius: 100%;
-    background-color: rgba(0, 0, 0, 0.15);
-    background-clip: padding-box;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-transform: scale(0);
-    -ms-transform: scale(0);
-    transform: scale(0);
-    opacity: 1;
-}
-
-.e-ripple.z-active {
-    opacity: 0;
-    -webkit-transform: scale(2);
-    -ms-transform: scale(2);
-    transform: scale(2);
-    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-}
--- a/src/components/ImageCropper/utils.js
+++ b/src/components/ImageCropper/utils.js
@@ -1,58 +0,0 @@
-/* eslint-disable */
-
-/**
- *
- * @param e
- * @param arg_opts
- * @returns {boolean}
- */
-export function effectRipple(e, arg_opts) {
-    let opts = Object.assign({
-            ele: e.target, // 波纹作用元素
-            type: 'hit', // hit点击位置扩散　center中心点扩展
-            bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-        }, arg_opts),
-        target = opts.ele;
-    if (target) {
-        let rect = target.getBoundingClientRect(),
-            ripple = target.querySelector('.e-ripple');
-        if (!ripple) {
-            ripple = document.createElement('span');
-            ripple.className = 'e-ripple';
-            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
-            target.appendChild(ripple);
-        } else {
-            ripple.className = 'e-ripple';
-        }
-        switch (opts.type) {
-            case 'center':
-                ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
-                ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
-                break;
-            default:
-                ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
-                ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
-        }
-        ripple.style.backgroundColor = opts.bgc;
-        ripple.className = 'e-ripple z-active';
-        return false;
-    }
-}
-// database64文件格式转换为2进制
-/**
- *
- * @param data
- * @param mime
- * @returns {*}
- */
-export function data2blob(data, mime) {
-    // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
-    data = data.split(',')[1];
-    data = window.atob(data);
-    var ia = new Uint8Array(data.length);
-    for (var i = 0; i < data.length; i++) {
-        ia[i] = data.charCodeAt(i);
-    }
-    // canvas.toDataURL 返回的默认格式就是 image/png
-    return new Blob([ia], {type: mime});
-};
--- a/src/components/ImageCropper/utils/data2blob.js
+++ b/src/components/ImageCropper/utils/data2blob.js
@@ -0,0 +1,19 @@
+/**
+ * database64文件格式转换为2进制
+ *
+ * @param  {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
+ * @param  {[String]} mime [description]
+ * @return {[blob]}      [description]
+ */
+export default function(data, mime) {
+  data = data.split(',')[1]
+  data = window.atob(data)
+  var ia = new Uint8Array(data.length)
+  for (var i = 0; i < data.length; i++) {
+    ia[i] = data.charCodeAt(i)
+  }
+  // canvas.toDataURL 返回的默认格式就是 image/png
+  return new Blob([ia], {
+    type: mime
+  })
+}
--- a/src/components/ImageCropper/utils/effectRipple.js
+++ b/src/components/ImageCropper/utils/effectRipple.js
@@ -0,0 +1,39 @@
+/**
+ * 点击波纹效果
+ *
+ * @param  {[event]} e        [description]
+ * @param  {[Object]} arg_opts [description]
+ * @return {[bollean]}          [description]
+ */
+export default function(e, arg_opts) {
+  var opts = Object.assign({
+    ele: e.target, // 波纹作用元素
+    type: 'hit', // hit点击位置扩散center中心点扩展
+    bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+  }, arg_opts)
+  var target = opts.ele
+  if (target) {
+    var rect = target.getBoundingClientRect()
+    var ripple = target.querySelector('.e-ripple')
+    if (!ripple) {
+      ripple = document.createElement('span')
+      ripple.className = 'e-ripple'
+      ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+      target.appendChild(ripple)
+    } else {
+      ripple.className = 'e-ripple'
+    }
+    switch (opts.type) {
+      case 'center':
+        ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
+        ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
+        break
+      default:
+        ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
+        ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+    }
+    ripple.style.backgroundColor = opts.bgc
+    ripple.className = 'e-ripple z-active'
+    return false
+  }
+}
--- a/src/components/ImageCropper/utils/language.js
+++ b/src/components/ImageCropper/utils/language.js
@@ -0,0 +1,232 @@
+export default {
+  zh: {
+    hint: '点击，或拖动图片至此处',
+    loading: '正在上传……',
+    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
+    success: '上传成功',
+    fail: '图片上传失败',
+    preview: '头像预览',
+    btn: {
+      off: '取消',
+      close: '关闭',
+      back: '上一步',
+      save: '保存'
+    },
+    error: {
+      onlyImg: '仅限图片格式',
+      outOfSize: '单文件大小不能超过 ',
+      lowestPx: '图片最低像素为（宽*高）：'
+    }
+  },
+  'zh-tw': {
+    hint: '點擊，或拖動圖片至此處',
+    loading: '正在上傳……',
+    noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
+    success: '上傳成功',
+    fail: '圖片上傳失敗',
+    preview: '頭像預覽',
+    btn: {
+      off: '取消',
+      close: '關閉',
+      back: '上一步',
+      save: '保存'
+    },
+    error: {
+      onlyImg: '僅限圖片格式',
+      outOfSize: '單文件大小不能超過 ',
+      lowestPx: '圖片最低像素為（寬*高）：'
+    }
+  },
+  en: {
+    hint: 'Click or drag the file here to upload',
+    loading: 'Uploading…',
+    noSupported: 'Browser is not supported, please use IE10+ or other browsers',
+    success: 'Upload success',
+    fail: 'Upload failed',
+    preview: 'Preview',
+    btn: {
+      off: 'Cancel',
+      close: 'Close',
+      back: 'Back',
+      save: 'Save'
+    },
+    error: {
+      onlyImg: 'Image only',
+      outOfSize: 'Image exceeds size limit: ',
+      lowestPx: 'Image\'s size is too low. Expected at least: '
+    }
+  },
+  ro: {
+    hint: 'Atinge sau trage fișierul aici',
+    loading: 'Se încarcă',
+    noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
+    success: 'S-a încărcat cu succes',
+    fail: 'A apărut o problemă la încărcare',
+    preview: 'Previzualizează',
+
+    btn: {
+      off: 'Anulează',
+      close: 'Închide',
+      back: 'Înapoi',
+      save: 'Salvează'
+    },
+
+    error: {
+      onlyImg: 'Doar imagini',
+      outOfSize: 'Imaginea depășește limita de: ',
+      loewstPx: 'Imaginea este prea mică; Minim: '
+    }
+  },
+  ru: {
+    hint: 'Нажмите, или перетащите файл в это окно',
+    loading: 'Загружаю……',
+    noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
+    success: 'Загрузка выполнена успешно',
+    fail: 'Ошибка загрузки',
+    preview: 'Предпросмотр',
+    btn: {
+      off: 'Отменить',
+      close: 'Закрыть',
+      back: 'Назад',
+      save: 'Сохранить'
+    },
+    error: {
+      onlyImg: 'Только изображения',
+      outOfSize: 'Изображение превышает предельный размер: ',
+      lowestPx: 'Минимальный размер изображения: '
+    }
+  },
+  'pt-br': {
+    hint: 'Clique ou arraste o arquivo aqui para carregar',
+    loading: 'Carregando…',
+    noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
+    success: 'Sucesso ao carregar imagem',
+    fail: 'Falha ao carregar imagem',
+    preview: 'Pré-visualizar',
+    btn: {
+      off: 'Cancelar',
+      close: 'Fechar',
+      back: 'Voltar',
+      save: 'Salvar'
+    },
+    error: {
+      onlyImg: 'Apenas imagens',
+      outOfSize: 'A imagem excede o limite de tamanho: ',
+      lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: '
+    }
+  },
+  fr: {
+    hint: 'Cliquez ou glissez le fichier ici.',
+    loading: 'Téléchargement…',
+    noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
+    success: 'Téléchargement réussit',
+    fail: 'Téléchargement echoué',
+    preview: 'Aperçu',
+    btn: {
+      off: 'Annuler',
+      close: 'Fermer',
+      back: 'Retour',
+      save: 'Enregistrer'
+    },
+    error: {
+      onlyImg: 'Image uniquement',
+      outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
+      lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
+    }
+  },
+  nl: {
+    hint: 'Klik hier of sleep een afbeelding in dit vlak',
+    loading: 'Uploaden…',
+    noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
+    success: 'Upload succesvol',
+    fail: 'Upload mislukt',
+    preview: 'Voorbeeld',
+    btn: {
+      off: 'Annuleren',
+      close: 'Sluiten',
+      back: 'Terug',
+      save: 'Opslaan'
+    },
+    error: {
+      onlyImg: 'Alleen afbeeldingen',
+      outOfSize: 'De afbeelding is groter dan: ',
+      lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
+    }
+  },
+  tr: {
+    hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
+    loading: 'Yükleniyor…',
+    noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
+    success: 'Yükleme başarılı',
+    fail: 'Yüklemede hata oluştu',
+    preview: 'Önizle',
+    btn: {
+      off: 'İptal',
+      close: 'Kapat',
+      back: 'Geri',
+      save: 'Kaydet'
+    },
+    error: {
+      onlyImg: 'Sadece resim',
+      outOfSize: 'Resim yükleme limitini aşıyor: ',
+      lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
+    }
+  },
+  'es-MX': {
+    hint: 'Selecciona o arrastra una imagen',
+    loading: 'Subiendo...',
+    noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes',
+    success: 'Subido exitosamente',
+    fail: 'Sucedió un error',
+    preview: 'Vista previa',
+    btn: {
+      off: 'Cancelar',
+      close: 'Cerrar',
+      back: 'Atras',
+      save: 'Guardar'
+    },
+    error: {
+      onlyImg: 'Unicamente imagenes',
+      outOfSize: 'La imagen excede el tamaño maximo:',
+      lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:'
+    }
+  },
+  de: {
+    hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
+    loading: 'Hochladen…',
+    noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
+    success: 'Upload erfolgreich',
+    fail: 'Upload fehlgeschlagen',
+    preview: 'Vorschau',
+    btn: {
+      off: 'Abbrechen',
+      close: 'Schließen',
+      back: 'Zurück',
+      save: 'Speichern'
+    },
+    error: {
+      onlyImg: 'Nur Bilder',
+      outOfSize: 'Das Bild ist zu groß: ',
+      lowestPx: 'Das Bild ist zu klein. Mindestens: '
+    }
+  },
+  ja: {
+    hint: 'クリック・ドラッグしてファイルをアップロード',
+    loading: 'アップロード中...',
+    noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
+    success: 'アップロード成功',
+    fail: 'アップロード失敗',
+    preview: 'プレビュー',
+    btn: {
+      off: 'キャンセル',
+      close: '閉じる',
+      back: '戻る',
+      save: '保存'
+    },
+    error: {
+      onlyImg: '画像のみ',
+      outOfSize: '画像サイズが上限を超えています。上限: ',
+      lowestPx: '画像が小さすぎます。最小サイズ: '
+    }
+  }
+}
--- a/src/components/ImageCropper/utils/mimes.js
+++ b/src/components/ImageCropper/utils/mimes.js
@@ -0,0 +1,7 @@
+export default {
+  'jpg': 'image/jpeg',
+  'png': 'image/png',
+  'gif': 'image/gif',
+  'svg': 'image/svg+xml',
+  'psd': 'image/photoshop'
+}
--- a/src/components/Kanban/index.vue
+++ b/src/components/Kanban/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="board-column">
+    <div class="board-column-header">
+      {{headerText}}
+    </div>
+    <draggable
+      class="board-column-content"
+      :list="list"
+      :options="options">
+      <div class="board-item" v-for="element in list" :key="element.id">
+        {{element.name}} {{element.id}}
+      </div>
+    </draggable>
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'dragKanban-demo',
+  components: {
+    draggable
+  },
+  props: {
+    headerText: {
+      type: String,
+      default: 'Header'
+    },
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.board-column {
+  min-width: 300px;
+  min-height: 100px;
+  height: auto;
+  overflow: hidden;
+  background: #f0f0f0;
+  border-radius: 3px;
+
+  .board-column-header {
+    height: 50px;
+    line-height: 50px;
+    overflow: hidden;
+    padding: 0 20px;
+    text-align: center;
+    background: #333;
+    color: #fff;
+    border-radius: 3px 3px 0 0;
+  }
+
+  .board-column-content {
+    height: auto;
+    overflow: hidden;
+    border: 10px solid transparent;
+    min-height: 60px;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    align-items: center;
+
+    .board-item {
+      cursor: pointer;
+      width: 100%;
+      height: 64px;
+      margin: 5px 0;
+      background-color: #fff;
+      text-align: left;
+      line-height: 54px;
+      padding: 5px 10px;
+      box-sizing: border-box;
+      box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
+    }
+  }
+}
+</style>
+
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
-		<div class="pan-info">
-			<div class="pan-info-roles-container">
-				<slot></slot>
-			</div>
-		</div>
-		<img class="pan-thumb" :src="image">
-	</div>
+  <div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot></slot>
+      </div>
+    </div>
+    <img class="pan-thumb" :src="image">
+  </div>
 </template>

 <script>
@@ -19,7 +19,7 @@ export default {
    },
    zIndex: {
      type: Number,
-      default: 100
+      default: 1
    },
    width: {
      type: String,
@@ -35,106 +35,106 @@ export default {

 <style scoped>
 .pan-item {
-	width: 200px;
-	height: 200px;
-	border-radius: 50%;
-	display: inline-block;
-	position: relative;
-	cursor: default;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }

 .pan-info-roles-container {
-	padding: 20px;
-	text-align: center;
+  padding: 20px;
+  text-align: center;
 }

 .pan-thumb {
-	width: 100%;
-	height: 100%;
-	background-size: 100%;
-	border-radius: 50%;
-	overflow: hidden;
-	position: absolute;
-	transform-origin: 95% 40%;
-	transition: all 0.3s ease-in-out;
+  width: 100%;
+  height: 100%;
+  background-size: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.3s ease-in-out;
 }

 .pan-thumb:after {
-	content: '';
-	width: 8px;
-	height: 8px;
-	position: absolute;
-	border-radius: 50%;
-	top: 40%;
-	left: 95%;
-	margin: -4px 0 0 -4px;
-	background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
-	box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  border-radius: 50%;
+  top: 40%;
+  left: 95%;
+  margin: -4px 0 0 -4px;
+  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
 }

 .pan-info {
-	position: absolute;
-	width: inherit;
-	height: inherit;
-	border-radius: 50%;
-	overflow: hidden;
-	box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
 }

 .pan-info h3 {
-	color: #fff;
-	text-transform: uppercase;
-	position: relative;
-	letter-spacing: 2px;
-	font-size: 18px;
-	margin: 0 60px;
-	padding: 22px 0 0 0;
-	height: 85px;
-	font-family: 'Open Sans', Arial, sans-serif;
-	text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+  color: #fff;
+  text-transform: uppercase;
+  position: relative;
+  letter-spacing: 2px;
+  font-size: 18px;
+  margin: 0 60px;
+  padding: 22px 0 0 0;
+  height: 85px;
+  font-family: 'Open Sans', Arial, sans-serif;
+  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
 }

 .pan-info p {
-	color: #fff;
-	padding: 10px 5px;
-	font-style: italic;
-	margin: 0 30px;
-	font-size: 12px;
-	border-top: 1px solid rgba(255, 255, 255, 0.5);
+  color: #fff;
+  padding: 10px 5px;
+  font-style: italic;
+  margin: 0 30px;
+  font-size: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
 }

 .pan-info p a {
-	display: block;
-	color: #333;
-	width: 80px;
-	height: 80px;
-	background: rgba(255, 255, 255, 0.3);
-	border-radius: 50%;
-	color: #fff;
-	font-style: normal;
-	font-weight: 700;
-	text-transform: uppercase;
-	font-size: 9px;
-	letter-spacing: 1px;
-	padding-top: 24px;
-	margin: 7px auto 0;
-	font-family: 'Open Sans', Arial, sans-serif;
-	opacity: 0;
-	transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
-	transform: translateX(60px) rotate(90deg);
+  display: block;
+  color: #333;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  color: #fff;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 9px;
+  letter-spacing: 1px;
+  padding-top: 24px;
+  margin: 7px auto 0;
+  font-family: 'Open Sans', Arial, sans-serif;
+  opacity: 0;
+  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
+  transform: translateX(60px) rotate(90deg);
 }

 .pan-info p a:hover {
-	background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.5);
 }

 .pan-item:hover .pan-thumb {
-	transform: rotate(-110deg);
+  transform: rotate(-110deg);
 }

 .pan-item:hover .pan-info p a {
-	opacity: 1;
-	transform: translateX(0px) rotate(0deg);
+  opacity: 1;
+  transform: translateX(0px) rotate(0deg);
 }
 </style>
--- a/src/components/ScrollBar/index.vue
+++ b/src/components/ScrollBar/index.vue
@@ -1,57 +0,0 @@
-<template>
-  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
-    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-const delta = 15
-
-export default {
-  name: 'scrollBar',
-  data() {
-    return {
-      top: 0
-    }
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 3
-      const $container = this.$refs.scrollContainer
-      const $containerHeight = $container.offsetHeight
-      const $wrapper = this.$refs.scrollWrapper
-      const $wrapperHeight = $wrapper.offsetHeight
-      if (eventDelta > 0) {
-        this.top = Math.min(0, this.top + eventDelta)
-      } else {
-        if ($containerHeight - delta < $wrapperHeight) {
-          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
-            this.top = this.top
-          } else {
-            this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
-          }
-        } else {
-          this.top = 0
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import '../../styles/variables.scss';
-
-.scroll-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: $menuBg;
-  .scroll-wrapper {
-    position: absolute;
-     width: 100%!important;
-  }
-}
-</style>
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -28,22 +28,22 @@ export default {
    return {
      active: false,
      position: '',
-      currentTop: '',
      width: undefined,
      height: undefined,
-      child: null,
-      stickyHeight: 0
+      isSticky: false
    }
  },
  mounted() {
    this.height = this.$el.getBoundingClientRect().height
    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleReize)
  },
  activated() {
    this.handleScroll()
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleReize)
  },
  methods: {
    sticky() {
@@ -53,6 +53,7 @@ export default {
      this.position = 'fixed'
      this.active = true
      this.width = this.width + 'px'
+      this.isSticky = true
    },
    reset() {
      if (!this.active) {
@@ -61,15 +62,21 @@ export default {
      this.position = ''
      this.width = 'auto'
      this.active = false
+      this.isSticky = false
    },
    handleScroll() {
      this.width = this.$el.getBoundingClientRect().width
      const offsetTop = this.$el.getBoundingClientRect().top
-      if (offsetTop <= this.stickyTop) {
+      if (offsetTop < this.stickyTop) {
        this.sticky()
        return
      }
      this.reset()
+    },
+    handleReize() {
+      if (this.isSticky) {
+        this.width = this.$el.getBoundingClientRect().width + 'px'
+      }
    }
  }
 }
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/src/components/Tinymce/components/editorImage.vue
@@ -2,7 +2,7 @@
  <div class="upload-container">
    <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
    </el-button>
-    <el-dialog :visible.sync="dialogVisible">
+    <el-dialog append-to-body :visible.sync="dialogVisible">
      <el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
        list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
        <el-button size="small" type="primary">点击上传</el-button>
@@ -87,9 +87,10 @@ export default {
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
-.upload-container {
-  .editor-slide-upload {
-    margin-bottom: 20px;
+.editor-slide-upload {
+  margin-bottom: 20px;
+  /deep/ .el-upload--picture-card {
+    width: 100%;
  }
 }
 </style>
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tinymce-container editor-container">
+  <div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
    <div class="editor-custom-btn-container">
      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
@@ -43,13 +43,15 @@ export default {
    return {
      hasChange: false,
      hasInit: false,
-      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+      tinymceId: this.id || 'vue-tinymce-' + +new Date(),
+      fullscreen: false
    }
  },
  watch: {
    value(val) {
      if (!this.hasChange && this.hasInit) {
-        this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
+        this.$nextTick(() =>
+          window.tinymce.get(this.tinymceId).setContent(val || ''))
      }
    }
  },
@@ -82,14 +84,20 @@ export default {
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        default_link_target: '_blank',
        link_title: false,
+        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
        init_instance_callback: editor => {
          if (_this.value) {
            editor.setContent(_this.value)
          }
          _this.hasInit = true
-          editor.on('NodeChange Change KeyUp', () => {
+          editor.on('NodeChange Change KeyUp SetContent', () => {
            this.hasChange = true
-            this.$emit('input', editor.getContent({ format: 'raw' }))
+            this.$emit('input', editor.getContent())
+          })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
          })
        }
        // 整合七牛上传
@@ -153,7 +161,10 @@ export default {

 <style scoped>
 .tinymce-container {
-  position: relative
+  position: relative;
+}
+.tinymce-container>>>.mce-fullscreen {
+  z-index: 10000;
 }
 .tinymce-textarea {
  visibility: hidden;
@@ -165,6 +176,10 @@ export default {
  top: 4px;
  /*z-index: 2005;*/
 }
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
 .editor-upload-btn {
  display: inline-block;
 }
--- a/src/components/Tinymce/plugins.js
+++ b/src/components/Tinymce/plugins.js
@@ -2,6 +2,6 @@
 // Detail plugins list see https://www.tinymce.com/docs/plugins/
 // Custom builds see https://www.tinymce.com/download/custom-builds/

-const plugins = ['advlist anchor autolink autoresize autosave bbcode code codesample colorpicker colorpicker contextmenu directionality emoticons fullpage fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']

 export default plugins
--- a/src/components/Tinymce/toolbar.js
+++ b/src/components/Tinymce/toolbar.js
@@ -1,6 +1,6 @@
 // Here is a list of the toolbar
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

-const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak fullscreen insertdatetime media table emoticons forecolor backcolor']
+const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']

 export default toolbar
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@@ -1,19 +1,19 @@
 <template>
-	<div class="singleImageUpload2 upload-container">
-		<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-		  :on-success="handleImageScucess">
-			<i class="el-icon-upload"></i>
-			<div class="el-upload__text">Drag或<em>点击上传</em></div>
-		</el-upload>
-		<div v-show="imageUrl.length>0" class="image-preview">
-			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-				<img :src="imageUrl">
-				<div class="image-preview-action">
-					<i @click="rmImage" class="el-icon-delete"></i>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="singleImageUpload2 upload-container">
+    <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+      :on-success="handleImageScucess">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">Drag或<em>点击上传</em></div>
+    </el-upload>
+    <div v-show="imageUrl.length>0" class="image-preview">
+      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

 <script>
@@ -66,53 +66,53 @@ export default {

 <style rel="stylesheet/scss" lang="scss" scoped>
 .upload-container {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	.image-uploader {
-		height: 100%;
-	}
-	.image-preview {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0px;
-		top: 0px;
-		border: 1px dashed #d9d9d9;
-		.image-preview-wrapper {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.image-preview-action {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-			cursor: default;
-			text-align: center;
-			color: #fff;
-			opacity: 0;
-			font-size: 20px;
-			background-color: rgba(0, 0, 0, .5);
-			transition: opacity .3s;
-			cursor: pointer;
-			text-align: center;
-			line-height: 200px;
-			.el-icon-delete {
-				font-size: 36px;
-			}
-		}
-		&:hover {
-			.image-preview-action {
-				opacity: 1;
-			}
-		}
-	}
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .image-uploader {
+    height: 100%;
+  }
+  .image-preview {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    border: 1px dashed #d9d9d9;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
 }
 </style>
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@@ -1,34 +1,34 @@
 <template>
-	<div class="upload-container">
-		<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-		  :on-success="handleImageScucess">
-			<i class="el-icon-upload"></i>
-			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-		</el-upload>
-		<div class="image-preview image-app-preview">
-			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-				<img :src="imageUrl">
-				<div class="image-preview-action">
-					<i @click="rmImage" class="el-icon-delete"></i>
-				</div>
-			</div>
-		</div>
-		<div class="image-preview">
-			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-				<img :src="imageUrl">
-				<div class="image-preview-action">
-					<i @click="rmImage" class="el-icon-delete"></i>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="upload-container">
+    <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+      :on-success="handleImageScucess">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+    <div class="image-preview image-app-preview">
+      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+    <div class="image-preview">
+      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

 <script>
 import { getToken } from '@/api/qiniu'

 export default {
-  name: 'singleImageUpload',
+  name: 'singleImageUpload3',
  props: {
    value: String
  },
@@ -76,70 +76,70 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
 .upload-container {
-	width: 100%;
-	position: relative;
-	@include clearfix;
-	.image-uploader {
-		width: 35%;
-		float: left;
-	}
-	.image-preview {
-		width: 200px;
-		height: 200px;
-		position: relative;
-		border: 1px dashed #d9d9d9;
-		float: left;
-		margin-left: 50px;
-		.image-preview-wrapper {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.image-preview-action {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-			cursor: default;
-			text-align: center;
-			color: #fff;
-			opacity: 0;
-			font-size: 20px;
-			background-color: rgba(0, 0, 0, .5);
-			transition: opacity .3s;
-			cursor: pointer;
-			text-align: center;
-			line-height: 200px;
-			.el-icon-delete {
-				font-size: 36px;
-			}
-		}
-		&:hover {
-			.image-preview-action {
-				opacity: 1;
-			}
-		}
-	}
-	.image-app-preview {
-		width: 320px;
-		height: 180px;
-		position: relative;
-		border: 1px dashed #d9d9d9;
-		float: left;
-		margin-left: 50px;
-		.app-fake-conver {
-			height: 44px;
-			position: absolute;
-			width: 100%; // background: rgba(0, 0, 0, .1);
-			text-align: center;
-			line-height: 64px;
-			color: #fff;
-		}
-	}
+  width: 100%;
+  position: relative;
+  @include clearfix;
+  .image-uploader {
+    width: 35%;
+    float: left;
+  }
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+  .image-app-preview {
+    width: 320px;
+    height: 180px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .app-fake-conver {
+      height: 44px;
+      position: absolute;
+      width: 100%; // background: rgba(0, 0, 0, .1);
+      text-align: center;
+      line-height: 64px;
+      color: #fff;
+    }
+  }
 }
 </style>
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -1,9 +1,9 @@
 <template>
  <div>
-    <input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
+    <input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      Drop excel file here or
-      <el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
+      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">Browse</el-button>
    </div>
  </div>
 </template>
@@ -12,6 +12,10 @@
 import XLSX from 'xlsx'

 export default {
+  props: {
+    beforeUpload: Function,
+    onSuccess: Function
+  },
  data() {
    return {
      loading: false,
@@ -25,18 +29,19 @@ export default {
    generateDate({ header, results }) {
      this.excelData.header = header
      this.excelData.results = results
-      this.$emit('on-selected-file', this.excelData)
+      this.onSuccess && this.onSuccess(this.excelData)
    },
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
+      if (this.loading) return
      const files = e.dataTransfer.files
      if (files.length !== 1) {
        this.$message.error('Only support uploading one file!')
        return
      }
-      const itemFile = files[0] // only use files[0]
-      this.readerData(itemFile)
+      const rawFile = files[0] // only use files[0]
+      this.upload(rawFile)
      e.stopPropagation()
      e.preventDefault()
    },
@@ -48,24 +53,42 @@ export default {
    handleUpload() {
      document.getElementById('excel-upload-input').click()
    },
-    handkeFileChange(e) {
+    handleClick(e) {
      const files = e.target.files
-      const itemFile = files[0] // only use files[0]
-      this.readerData(itemFile)
+      const rawFile = files[0] // only use files[0]
+      if (!rawFile) return
+      this.upload(rawFile)
    },
-    readerData(itemFile) {
-      const reader = new FileReader()
-      reader.onload = e => {
-        const data = e.target.result
-        const fixedData = this.fixdata(data)
-        const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
-        const firstSheetName = workbook.SheetNames[0]
-        const worksheet = workbook.Sheets[firstSheetName]
-        const header = this.get_header_row(worksheet)
-        const results = XLSX.utils.sheet_to_json(worksheet)
-        this.generateDate({ header, results })
+    upload(rawFile) {
+      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+
+      if (!this.beforeUpload) {
+        this.readerData(rawFile)
+        return
      }
-      reader.readAsArrayBuffer(itemFile)
+      const before = this.beforeUpload(rawFile)
+      if (before) {
+        this.readerData(rawFile)
+      }
+    },
+    readerData(rawFile) {
+      this.loading = true
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = e => {
+          const data = e.target.result
+          const fixedData = this.fixdata(data)
+          const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+          const firstSheetName = workbook.SheetNames[0]
+          const worksheet = workbook.Sheets[firstSheetName]
+          const header = this.get_header_row(worksheet)
+          const results = XLSX.utils.sheet_to_json(worksheet)
+          this.generateDate({ header, results })
+          this.loading = false
+          resolve()
+        }
+        reader.readAsArrayBuffer(rawFile)
+      })
    },
    fixdata(data) {
      let o = ''
--- a/src/directive/el-dragDialog/drag.js
+++ b/src/directive/el-dragDialog/drag.js
@@ -0,0 +1,77 @@
+export default{
+  bind(el, binding, vnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cssText += ';cursor:move;'
+    dragDom.style.cssText += ';top:0px;'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const getStyle = (function() {
+      if (window.document.currentStyle) {
+        return (dom, attr) => dom.currentStyle[attr]
+      } else {
+        return (dom, attr) => getComputedStyle(dom, false)[attr]
+      }
+    })()
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      const dragDomWidth = dragDom.offsetWidth
+      const dragDomheight = dragDom.offsetHeight
+
+      const screenWidth = document.body.clientWidth
+      const screenHeight = document.body.clientHeight
+
+      const minDragDomLeft = dragDom.offsetLeft
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+      const minDragDomTop = dragDom.offsetTop
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
+
+      // 获取到的值带px 正则匹配替换
+      let styL = getStyle(dragDom, 'left')
+      let styT = getStyle(dragDom, 'top')
+
+      if (styL.includes('%')) {
+        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+      } else {
+        styL = +styL.replace(/\px/g, '')
+        styT = +styT.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        let left = e.clientX - disX
+        let top = e.clientY - disY
+
+        // 边界处理
+        if (-(left) > minDragDomLeft) {
+          left = -minDragDomLeft
+        } else if (left > maxDragDomLeft) {
+          left = maxDragDomLeft
+        }
+
+        if (-(top) > minDragDomTop) {
+          top = -minDragDomTop
+        } else if (top > maxDragDomTop) {
+          top = maxDragDomTop
+        }
+
+        // 移动当前元素
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+
+        // emit onDrag event
+        vnode.child.$emit('dragDialog')
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}
--- a/src/directive/el-dragDialog/index.js
+++ b/src/directive/el-dragDialog/index.js
@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-dialog'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag
--- a/src/directive/permission/index.js
+++ b/src/directive/permission/index.js
@@ -0,0 +1,13 @@
+import permission from './permission'
+
+const install = function(Vue) {
+  Vue.directive('permission', permission)
+}
+
+if (window.Vue) {
+  window['permission'] = permission
+  Vue.use(install); // eslint-disable-line
+}
+
+permission.install = install
+export default permission
--- a/src/directive/permission/permission.js
+++ b/src/directive/permission/permission.js
@@ -0,0 +1,23 @@
+
+import store from '@/store'
+
+export default{
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const roles = store.getters && store.getters.roles
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionRoles = value
+
+      const hasPermission = roles.some(role => {
+        return permissionRoles.includes(role)
+      })
+
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
+    }
+  }
+}
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -1,3 +1,6 @@
+// set function parseTime,formatTime to filter
+export { parseTime, formatTime } from '@/utils'
+
 function pluralize(time, label) {
  if (time === 1) {
    return time + label
@@ -16,67 +19,8 @@ export function timeAgo(time) {
  }
 }

-export function parseTime(time, cFormat) {
-  if (arguments.length === 0) {
-    return null
-  }
-
-  if ((time + '').length === 10) {
-    time = +time * 1000
-  }
-
-  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    date = new Date(parseInt(time))
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-    let value = formatObj[key]
-    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
-  })
-  return time_str
-}
-
-export function formatTime(time, option) {
-  time = +time * 1000
-  const d = new Date(time)
-  const now = Date.now()
-
-  const diff = (now - d) / 1000
-
-  if (diff < 30) {
-    return '刚刚'
-  } else if (diff < 3600) { // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
-  } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
-  } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
-  }
-  if (option) {
-    return parseTime(time, option)
-  } else {
-    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
-  }
-}
-
 /* 数字 格式化*/
-export function nFormatter(num, digits) {
+export function numberFormatter(num, digits) {
  const si = [
    { value: 1E18, symbol: 'E' },
    { value: 1E15, symbol: 'P' },
@@ -93,12 +37,6 @@ export function nFormatter(num, digits) {
  return num.toString()
 }

-export function html2Text(val) {
-  const div = document.createElement('div')
-  div.innerHTML = val
-  return div.textContent || div.innerText
-}
-
 export function toThousandslsFilter(num) {
  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
 }
--- a/src/icons/svg/edit.svg
+++ b/src/icons/svg/edit.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1525760397212" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2919" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M860 504c-19.9 0-36 16.1-36 36 0 1.4 0.1 2.7 0.2 4h-0.2v344H136V200h376c19.9 0 36-16.1 36-36s-16.1-36-36-36H136c-39.8 0-72 32.2-72 72v688c0 39.8 32.2 72 72 72h688c39.8 0 72-32.2 72-72V544h-0.2c0.1-1.3 0.2-2.6 0.2-4 0-19.9-16.1-36-36-36z" p-id="2920"></path><path d="M1002.7 100.3L923.4 21c-28.1-28.1-73.9-27.9-102 0.2L424.2 418.4c-2.9 2.9-5.2 6.4-6.8 10.2L317.6 664c-5.6 13.2-1.7 26.5 6.8 35.1 8.5 8.6 21.9 12.5 35.2 6.9l235.5-99.7c3.8-1.6 7.2-3.9 10.2-6.8l397.2-397.2c28.1-28.1 28.3-73.9 0.2-102zM559.8 543l-137.4 58.2 58.2-137.4L759.4 185l79.2 79.2L559.8 543z m391.7-391.7l-62 62-79.2-79.2 62-62 0.2-0.2 79.2 79.2-0.2 0.2z" p-id="2921"></path></svg>
--- a/src/icons/svg/guide.svg
+++ b/src/icons/svg/guide.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1526033837694" class="icon" style="" viewBox="0 0 1117 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10274" xmlns:xlink="http://www.w3.org/1999/xlink" width="218.1640625" height="200"><defs><style type="text/css"></style></defs><path d="M53.865 558.08l289.92 121.6 560-492.16-491.52 530.56 371.84 140.8c8.96 3.2 19.2-1.28 22.4-10.24V848l260.48-816.64-1014.4 494.72c-8.96 4.48-12.16 14.72-8.32 23.68 2.56 3.84 5.76 7.04 9.6 8.32z m357.76 434.56l144.64-155.52-144.64-58.88v214.4z" p-id="10275"></path></svg>
--- a/src/icons/svg/list.svg
+++ b/src/icons/svg/list.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1525761666409" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10880" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M107.2 212.8m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10881"></path><path d="M980.8 145.6 297.6 145.6c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C996.8 152 988.8 145.6 980.8 145.6z" p-id="10882"></path><path d="M96 497.6m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10883"></path><path d="M968 430.4 284.8 430.4c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C984 438.4 977.6 430.4 968 430.4z" p-id="10884"></path><path d="M96 795.2m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10885"></path><path d="M968 728 284.8 728c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C984 736 977.6 728 968 728z" p-id="10886"></path></svg>
--- a/src/icons/svg/nested.svg
+++ b/src/icons/svg/nested.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1529559567446" class="icon" style="" viewBox="0 0 1167 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1767" xmlns:xlink="http://www.w3.org/1999/xlink" width="227.9296875" height="200"><defs><style type="text/css"></style></defs><path d="M0.015952 74.459413A2.286 2.286 1440 1 0 145.85218 74.459413 2.286 2.286 1440 1 0 0.015952 74.459413zM291.720312 1.525347 1166.801488 1.525347 1166.801488 147.361574 291.720312 147.361574zM291.720312 366.163773A2.286 2.286 1440 1 0 437.55654 366.163773 2.286 2.286 1440 1 0 291.720312 366.163773zM583.424672 293.229707 1166.801488 293.229707 1166.801488 439.065934 583.424672 439.065934zM291.720312 949.540588A2.286 2.286 1440 1 0 437.55654 949.540588 2.286 2.286 1440 1 0 291.720312 949.540588zM583.424672 876.638427 1166.801488 876.638427 1166.801488 1022.474654 583.424672 1022.474654zM583.424672 657.836228A2.286 2.286 1440 1 0 729.2609 657.836228 2.286 2.286 1440 1 0 583.424672 657.836228zM875.129032 584.934067 1166.801488 584.934067 1166.801488 730.770294 875.129032 730.770294z" p-id="1768"></path></svg>
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -3,7 +3,10 @@ export default {
    dashboard: 'Dashboard',
    introduction: 'Introduction',
    documentation: 'Documentation',
+    guide: 'Guide',
    permission: 'Permission',
+    pagePermission: 'Page Permission',
+    directivePermission: 'Directive Permission',
    icons: 'Icons',
    components: 'Components',
    componentIndex: 'Introduction',
@@ -18,11 +21,21 @@ export default {
    countTo: 'CountTo',
    componentMixin: 'Mixin',
    backToTop: 'BackToTop',
+    dragDialog: 'Drag Dialog',
+    dragKanban: 'Drag Kanban',
    charts: 'Charts',
    keyboardChart: 'Keyboard Chart',
    lineChart: 'Line Chart',
    mixChart: 'Mix Chart',
    example: 'Example',
+    nested: 'Nested Routes',
+    menu1: 'Menu 1',
+    'menu1-1': 'Menu 1-1',
+    'menu1-2': 'Menu 1-2',
+    'menu1-2-1': 'Menu 1-2-1',
+    'menu1-2-2': 'Menu 1-2-2',
+    'menu1-3': 'Menu 1-3',
+    menu2: 'Menu 2',
    Table: 'Table',
    dynamicTable: 'Dynamic Table',
    dragTable: 'Drag Table',
@@ -32,8 +45,9 @@ export default {
    customTreeTable: 'Custom TreeTable',
    tab: 'Tab',
    form: 'Form',
-    createForm: 'Create Form',
-    editForm: 'Edit Form',
+    createArticle: 'Create Article',
+    editArticle: 'Edit Article',
+    articleList: 'Article List',
    errorPages: 'Error Pages',
    page401: '401',
    page404: '404',
@@ -72,6 +86,10 @@ export default {
    roles: 'Your roles',
    switchRoles: 'Switch roles'
  },
+  guide: {
+    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
+    button: 'Show Guide'
+  },
  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.',
@@ -125,5 +143,10 @@ export default {
    change: 'Theme change',
    documentation: 'Theme documentation',
    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
+  },
+  tagsView: {
+    close: 'Close',
+    closeOthers: 'Close Others',
+    closeAll: 'Close All'
  }
 }
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -3,7 +3,10 @@ export default {
    dashboard: '首页',
    introduction: '简述',
    documentation: '文档',
+    guide: '引导页',
    permission: '权限测试页',
+    pagePermission: '页面权限',
+    directivePermission: '指令权限',
    icons: '图标',
    components: '组件',
    componentIndex: '介绍',
@@ -18,11 +21,21 @@ export default {
    countTo: 'CountTo',
    componentMixin: '小组件',
    backToTop: '返回顶部',
+    dragDialog: '拖拽 Dialog',
+    dragKanban: '可拖拽看板',
    charts: '图表',
    keyboardChart: '键盘图表',
    lineChart: '折线图',
    mixChart: '混合图表',
    example: '综合实例',
+    nested: '路由嵌套',
+    menu1: '菜单1',
+    'menu1-1': '菜单1-1',
+    'menu1-2': '菜单1-2',
+    'menu1-2-1': '菜单1-2-1',
+    'menu1-2-2': '菜单1-2-2',
+    'menu1-3': '菜单1-3',
+    menu2: '菜单2',
    Table: 'Table',
    dynamicTable: '动态Table',
    dragTable: '拖拽Table',
@@ -32,8 +45,9 @@ export default {
    customTreeTable: '自定义树表',
    tab: 'Tab',
    form: '表单',
-    createForm: '创建表单',
-    editForm: '编辑表单',
+    createArticle: '创建文章',
+    editArticle: '编辑文章',
+    articleList: '文章列表',
    errorPages: '错误页面',
    page401: '401',
    page404: '404',
@@ -72,6 +86,10 @@ export default {
    roles: '你的权限',
    switchRoles: '切换权限'
  },
+  guide: {
+    description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
+    button: '打开引导'
+  },
  components: {
    documentation: '文档',
    tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
@@ -125,5 +143,10 @@ export default {
    change: '换肤',
    documentation: '换肤文档',
    tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
+  },
+  tagsView: {
+    close: '关闭',
+    closeOthers: '关闭其它',
+    closeAll: '关闭所有'
  }
 }
--- a/src/main.js
+++ b/src/main.js
@@ -36,6 +36,5 @@ new Vue({
  router,
  store,
  i18n,
-  template: '<App/>',
-  components: { App }
+  render: h => h(App)
 })
--- a/src/mock/article.js
+++ b/src/mock/article.js
@@ -4,6 +4,9 @@ import { param2Obj } from '@/utils'
 const List = []
 const count = 100

+const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
+const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+
 for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    id: '@increment',
@@ -11,12 +14,17 @@ for (let i = 0; i < count; i++) {
    author: '@first',
    reviewer: '@first',
    title: '@title(5, 10)',
+    content_short: '我是测试数据',
+    content: baseContent,
    forecast: '@float(0, 100, 2, 2)',
    importance: '@integer(1, 3)',
    'type|1': ['CN', 'US', 'JP', 'EU'],
    'status|1': ['published', 'draft', 'deleted'],
    display_time: '@datetime',
-    pageviews: '@integer(300, 5000)'
+    comment_disabled: true,
+    pageviews: '@integer(300, 5000)',
+    image_uri,
+    platforms: ['a-platform']
  }))
 }

@@ -45,22 +53,14 @@ export default {
  getPv: () => ({
    pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
  }),
-  getArticle: () => ({
-    id: 120000000001,
-    author: { key: 'mockPan' },
-    source_name: '原创作者',
-    category_item: [{ key: 'global', name: '全球' }],
-    comment_disabled: true,
-    content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
-    content_short: '我是测试数据',
-    display_time: +new Date(),
-    image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
-    platforms: ['a-platform'],
-    source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
-    status: 'published',
-    tags: [],
-    title: 'vue-element-admin'
-  }),
+  getArticle: (config) => {
+    const { id } = param2Obj(config.url)
+    for (const article of List) {
+      if (article.id === +id) {
+        return article
+      }
+    }
+  },
  createArticle: () => ({
    data: 'success'
  }),
--- a/src/permission.js
+++ b/src/permission.js
@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth' // getToken from cookie

 NProgress.configure({ showSpinner: false })// NProgress Configuration

-// permissiom judge function
+// permission judge function
 function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
@@ -31,10 +31,10 @@ router.beforeEach((to, from, next) => {
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
-        }).catch(() => {
+        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
-            Message.error('Verification failed, please login again')
-            next({ path: '/login' })
+            Message.error(err || 'Verification failed, please login again')
+            next({ path: '/' })
          })
        })
      } else {
--- a/src/router/_import_development.js
+++ b/src/router/_import_development.js
@@ -1 +0,0 @@
-module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
--- a/src/router/_import_production.js
+++ b/src/router/_import_production.js
@@ -1 +0,0 @@
-module.exports = file => () => import('@/views/' + file + '.vue')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,16 +1,13 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-const _import = require('./_import_' + process.env.NODE_ENV)
-// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
-// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading

 Vue.use(Router)

 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '@/views/layout/Layout'

 /** note: submenu only apppear when children.length>=1
-*   detail see  https://panjiachen.github.io/vue-element-admin-site/#/router-and-nav?id=sidebar
+*   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 **/

 /**
@@ -24,21 +21,21 @@ import Layout from '../views/layout/Layout'
    roles: ['admin','editor']     will control the page roles (you can set multiple roles)
    title: 'title'               the name show in submenu and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar,
-    noCache: true                if fasle ,the page will no be cached(default is false)
+    noCache: true                if true ,the page will no be cached(default is false)
  }
 **/
 export const constantRouterMap = [
-  { path: '/login', component: _import('login/index'), hidden: true },
-  { path: '/authredirect', component: _import('login/authredirect'), hidden: true },
-  { path: '/404', component: _import('errorPage/404'), hidden: true },
-  { path: '/401', component: _import('errorPage/401'), hidden: true },
+  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
+  { path: '/authredirect', component: () => import('@/views/login/authredirect'), hidden: true },
+  { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
  {
    path: '',
    component: Layout,
    redirect: 'dashboard',
    children: [{
      path: 'dashboard',
-      component: _import('dashboard/index'),
+      component: () => import('@/views/dashboard/index'),
      name: 'dashboard',
      meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
    }]
@@ -49,10 +46,21 @@ export const constantRouterMap = [
    redirect: '/documentation/index',
    children: [{
      path: 'index',
-      component: _import('documentation/index'),
+      component: () => import('@/views/documentation/index'),
      name: 'documentation',
      meta: { title: 'documentation', icon: 'documentation', noCache: true }
    }]
+  },
+  {
+    path: '/guide',
+    component: Layout,
+    redirect: '/guide/index',
+    children: [{
+      path: 'index',
+      component: () => import('@/views/guide/index'),
+      name: 'guide',
+      meta: { title: 'guide', icon: 'guide', noCache: true }
+    }]
  }
 ]

@@ -67,16 +75,28 @@ export const asyncRouterMap = [
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
-    meta: { roles: ['admin'] }, // you can set roles in root nav
+    alwaysShow: true, // will always show the root menu
+    meta: {
+      title: 'permission',
+      icon: 'lock',
+      roles: ['admin', 'editor'] // you can set roles in root nav
+    },
    children: [{
-      path: 'index',
-      component: _import('permission/index'),
-      name: 'permission',
+      path: 'page',
+      component: () => import('@/views/permission/page'),
+      name: 'pagePermission',
      meta: {
-        title: 'permission',
-        icon: 'lock',
+        title: 'pagePermission',
        roles: ['admin'] // or you can only set roles in sub nav
      }
+    }, {
+      path: 'directive',
+      component: () => import('@/views/permission/directive'),
+      name: 'directivePermission',
+      meta: {
+        title: 'directivePermission'
+        // if do not set roles, means: this page does not require permission
+      }
    }]
  },

@@ -85,7 +105,7 @@ export const asyncRouterMap = [
    component: Layout,
    children: [{
      path: 'index',
-      component: _import('svg-icons/index'),
+      component: () => import('@/views/svg-icons/index'),
      name: 'icons',
      meta: { title: 'icons', icon: 'icon', noCache: true }
    }]
@@ -101,17 +121,19 @@ export const asyncRouterMap = [
      icon: 'component'
    },
    children: [
-      { path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
-      { path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
-      { path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
-      { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
-      { path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
-      { path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
-      { path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
-      { path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
-      { path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
-      { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
-      { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }}
+      { path: 'tinymce', component: () => import('@/views/components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
+      { path: 'markdown', component: () => import('@/views/components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
+      { path: 'json-editor', component: () => import('@/views/components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
+      { path: 'splitpane', component: () => import('@/views/components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
+      { path: 'avatar-upload', component: () => import('@/views/components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
+      { path: 'dropzone', component: () => import('@/views/components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
+      { path: 'sticky', component: () => import('@/views/components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
+      { path: 'count-to', component: () => import('@/views/components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
+      { path: 'mixin', component: () => import('@/views/components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
+      { path: 'back-to-top', component: () => import('@/views/components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
+      { path: 'drag-dialog', component: () => import('@/views/components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
+      { path: 'dnd-list', component: () => import('@/views/components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
+      { path: 'drag-kanban', component: () => import('@/views/components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
    ]
  },

@@ -125,56 +147,113 @@ export const asyncRouterMap = [
      icon: 'chart'
    },
    children: [
-      { path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }},
-      { path: 'line', component: _import('charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }},
-      { path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }}
+      { path: 'keyboard', component: () => import('@/views/charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }},
+      { path: 'line', component: () => import('@/views/charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }},
+      { path: 'mixchart', component: () => import('@/views/charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }}
+    ]
+  },
+
+  {
+    path: '/tab',
+    component: Layout,
+    children: [{
+      path: 'index',
+      component: () => import('@/views/tab/index'),
+      name: 'tab',
+      meta: { title: 'tab', icon: 'tab' }
+    }]
+  },
+
+  {
+    path: '/table',
+    component: Layout,
+    redirect: '/table/complex-table',
+    name: 'table',
+    meta: {
+      title: 'Table',
+      icon: 'table'
+    },
+    children: [
+      { path: 'dynamic-table', component: () => import('@/views/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
+      { path: 'drag-table', component: () => import('@/views/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
+      { path: 'inline-edit-table', component: () => import('@/views/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
+      { path: 'tree-table', component: () => import('@/views/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
+      { path: 'custom-tree-table', component: () => import('@/views/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
+      { path: 'complex-table', component: () => import('@/views/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
    ]
  },

  {
    path: '/example',
    component: Layout,
-    redirect: '/example/table/complex-table',
+    redirect: '/example/list',
    name: 'example',
    meta: {
      title: 'example',
      icon: 'example'
    },
    children: [
-      {
-        path: '/example/table',
-        component: _import('example/table/index'),
-        redirect: '/example/table/complex-table',
-        name: 'Table',
-        meta: {
-          title: 'Table',
-          icon: 'table'
-        },
-        children: [
-          { path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
-          { path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
-          { path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
-          { path: 'tree-table', component: _import('example/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
-          { path: 'custom-tree-table', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
-          { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
-        ]
-      },
-      { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }}
+      { path: 'create', component: () => import('@/views/example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }},
+      { path: 'edit/:id(\\d+)', component: () => import('@/views/example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true },
+      { path: 'list', component: () => import('@/views/example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }}
    ]
  },

  {
-    path: '/form',
+    path: '/nested',
    component: Layout,
-    redirect: 'noredirect',
-    name: 'form',
+    redirect: '/nested/menu1',
+    name: 'nested',
    meta: {
-      title: 'form',
-      icon: 'form'
+      title: 'nested',
+      icon: 'nested'
    },
    children: [
-      { path: 'create-form', component: _import('form/create'), name: 'createForm', meta: { title: 'createForm', icon: 'table' }},
-      { path: 'edit-form', component: _import('form/edit'), name: 'editForm', meta: { title: 'editForm', icon: 'table' }}
+      {
+        path: 'menu1',
+        component: () => import('@/views/nested/menu1/index'), // Parent router-view
+        name: 'menu1',
+        meta: { title: 'menu1' },
+        children: [
+          {
+            path: 'menu1-1',
+            component: () => import('@/views/nested/menu1/menu1-1'),
+            name: 'menu1-1',
+            meta: { title: 'menu1-1' }
+          },
+          {
+            path: 'menu1-2',
+            component: () => import('@/views/nested/menu1/menu1-2'),
+            name: 'menu1-2',
+            meta: { title: 'menu1-2' },
+            children: [
+              {
+                path: 'menu1-2-1',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+                name: 'menu1-2-1',
+                meta: { title: 'menu1-2-1' }
+              },
+              {
+                path: 'menu1-2-2',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+                name: 'menu1-2-2',
+                meta: { title: 'menu1-2-2' }
+              }
+            ]
+          },
+          {
+            path: 'menu1-3',
+            component: () => import('@/views/nested/menu1/menu1-3'),
+            name: 'menu1-3',
+            meta: { title: 'menu1-3' }
+          }
+        ]
+      },
+      {
+        path: 'menu2',
+        component: () => import('@/views/nested/menu2/index'),
+        meta: { title: 'menu2' }
+      }
    ]
  },

@@ -188,8 +267,8 @@ export const asyncRouterMap = [
      icon: '404'
    },
    children: [
-      { path: '401', component: _import('errorPage/401'), name: 'page401', meta: { title: 'page401', noCache: true }},
-      { path: '404', component: _import('errorPage/404'), name: 'page404', meta: { title: 'page404', noCache: true }}
+      { path: '401', component: () => import('@/views/errorPage/401'), name: 'page401', meta: { title: 'page401', noCache: true }},
+      { path: '404', component: () => import('@/views/errorPage/404'), name: 'page404', meta: { title: 'page404', noCache: true }}
    ]
  },

@@ -197,7 +276,7 @@ export const asyncRouterMap = [
    path: '/error-log',
    component: Layout,
    redirect: 'noredirect',
-    children: [{ path: 'log', component: _import('errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}]
+    children: [{ path: 'log', component: () => import('@/views/errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}]
  },

  {
@@ -210,9 +289,9 @@ export const asyncRouterMap = [
      icon: 'excel'
    },
    children: [
-      { path: 'export-excel', component: _import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
-      { path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
-      { path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
+      { path: 'export-excel', component: () => import('@/views/excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
+      { path: 'export-selected-excel', component: () => import('@/views/excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
+      { path: 'upload-excel', component: () => import('@/views/excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
    ]
  },

@@ -222,27 +301,27 @@ export const asyncRouterMap = [
    redirect: '/zip/download',
    alwaysShow: true,
    meta: { title: 'zip', icon: 'zip' },
-    children: [{ path: 'download', component: _import('zip/index'), name: 'exportZip', meta: { title: 'exportZip' }}]
+    children: [{ path: 'download', component: () => import('@/views/zip/index'), name: 'exportZip', meta: { title: 'exportZip' }}]
  },

  {
    path: '/theme',
    component: Layout,
    redirect: 'noredirect',
-    children: [{ path: 'index', component: _import('theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}]
+    children: [{ path: 'index', component: () => import('@/views/theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}]
  },

  {
    path: '/clipboard',
    component: Layout,
    redirect: 'noredirect',
-    children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboardDemo', icon: 'clipboard' }}]
+    children: [{ path: 'index', component: () => import('@/views/clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboardDemo', icon: 'clipboard' }}]
  },

  {
    path: '/i18n',
    component: Layout,
-    children: [{ path: 'index', component: _import('i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
+    children: [{ path: 'index', component: () => import('@/views/i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
  },

  { path: '*', redirect: '/404', hidden: true }
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,6 +1,7 @@
 const getters = {
  sidebar: state => state.app.sidebar,
  language: state => state.app.language,
+  device: state => state.app.device,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -3,8 +3,10 @@ import Cookies from 'js-cookie'
 const app = {
  state: {
    sidebar: {
-      opened: !+Cookies.get('sidebarStatus')
+      opened: !+Cookies.get('sidebarStatus'),
+      withoutAnimation: false
    },
+    device: 'desktop',
    language: Cookies.get('language') || 'en'
  },
  mutations: {
@@ -15,6 +17,15 @@ const app = {
        Cookies.set('sidebarStatus', 0)
      }
      state.sidebar.opened = !state.sidebar.opened
+      state.sidebar.withoutAnimation = false
+    },
+    CLOSE_SIDEBAR: (state, withoutAnimation) => {
+      Cookies.set('sidebarStatus', 1)
+      state.sidebar.opened = false
+      state.sidebar.withoutAnimation = withoutAnimation
+    },
+    TOGGLE_DEVICE: (state, device) => {
+      state.device = device
    },
    SET_LANGUAGE: (state, language) => {
      state.language = language
@@ -25,6 +36,12 @@ const app = {
    toggleSideBar({ commit }) {
      commit('TOGGLE_SIDEBAR')
    },
+    closeSideBar({ commit }, { withoutAnimation }) {
+      commit('CLOSE_SIDEBAR', withoutAnimation)
+    },
+    toggleDevice({ commit }, device) {
+      commit('TOGGLE_DEVICE', device)
+    },
    setLanguage({ commit }, language) {
      commit('SET_LANGUAGE', language)
    }
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -6,11 +6,9 @@ const tagsView = {
  mutations: {
    ADD_VISITED_VIEWS: (state, view) => {
      if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push({
-        name: view.name,
-        path: view.path,
+      state.visitedViews.push(Object.assign({}, view, {
        title: view.meta.title || 'no-name'
-      })
+      }))
      if (!view.meta.noCache) {
        state.cachedViews.push(view.name)
      }
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -67,7 +67,13 @@ const user = {
            reject('error')
          }
          const data = response.data
-          commit('SET_ROLES', data.roles)
+
+          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+            commit('SET_ROLES', data.roles)
+          } else {
+            reject('getInfo: roles must be a non-null array !')
+          }
+
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          commit('SET_INTRODUCTION', data.introduction)
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -44,7 +44,7 @@
   }
 }

- //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+ //暂时性解决dialog 问题 https://github.com/ElemeFE/element/issues/2461
 .el-dialog {
   transform: none;
   left: 0;
@@ -73,3 +73,10 @@
     }
   }
 }
+
+//dropdown
+ .el-dropdown-menu{
+  a{
+    display: block
+  }
+}
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -2,99 +2,118 @@
  // 主体区域
  .main-container {
    min-height: 100%;
-    transition: margin-left 0.28s;
+    transition: margin-left .28s;
    margin-left: 180px;
-  } // 侧边栏
+    position: relative;
+  }
+  // 侧边栏
  .sidebar-container {
    transition: width 0.28s;
-    width: 180px!important;
+    width: 180px !important;
    height: 100%;
    position: fixed;
+    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
+    overflow: hidden;
+    //reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+    .scrollbar-wrapper {
+      overflow-x: hidden!important;
+      .el-scrollbar__view {
+        height: 100%;
+      }
+    }
+    .is-horizontal {
+      display: none;
+    }
    a {
      display: inline-block;
      width: 100%;
+      overflow: hidden;
    }
    .svg-icon {
      margin-right: 16px;
    }
    .el-menu {
      border: none;
-      width: 100%;
+      height: 100%;
+      width: 100% !important;
    }
  }
  .hideSidebar {
-    .sidebar-container,.sidebar-container .el-menu {
-      width: 36px!important;
-      // overflow: inherit;
+    .sidebar-container {
+      width: 36px !important;
    }
    .main-container {
      margin-left: 36px;
    }
-  }
-  .hideSidebar {
    .submenu-title-noDropdown {
-      padding-left: 10px!important;
+      padding-left: 10px !important;
      position: relative;
-      span {
-        height: 0;
-        width: 0;
-        overflow: hidden;
-        visibility: hidden;
-        transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
-        opacity: 0;
-        display: inline-block;
-      }
-      &:hover {
-        span {
-          display: block;
-          border-radius: 3px;
-          z-index: 1002;
-          width: 140px;
-          height: 56px;
-          visibility: visible;
-          position: absolute;
-          right: -145px;
-          text-align: left;
-          text-indent: 20px;
-          top: 0px;
-          background-color: $subMenuBg!important;
-          opacity: 1;
-        }
+      .el-tooltip {
+        padding: 0 10px !important;
      }
    }
    .el-submenu {
+      overflow: hidden;
      &>.el-submenu__title {
-        padding-left: 10px!important;
-        &>span {
-          display: none;
-        }
+        padding-left: 10px !important;
        .el-submenu__icon-arrow {
          display: none;
        }
      }
-      .nest-menu {
-        .el-submenu__icon-arrow {
-          display: block!important;
-        }
-        span {
-          display: inline-block!important;
+    }
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
        }
      }
    }
  }
-  .nest-menu .el-submenu>.el-submenu__title,
-  .el-submenu .el-menu-item {
-    min-width: 180px!important;
-    background-color: $subMenuBg!important;
+  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
+  .sidebar-container .el-submenu .el-menu-item {
+    min-width: 180px !important;
+    background-color: $subMenuBg !important;
    &:hover {
-      background-color: $menuHover!important;
+      background-color: $menuHover !important;
    }
  }
-  .el-menu--collapse .el-menu .el-submenu{
-    min-width: 180px!important;
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: 180px !important;
+  }
+
+  //适配移动端
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+    .sidebar-container {
+      transition: transform .28s;
+      width: 180px !important;
+    }
+    &.hideSidebar {
+      .sidebar-container {
+        transition-duration: 0.3s;
+        transform: translate3d(-180px, 0, 0);
+      }
+    }
+  }
+  .withoutAnimation {
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
  }
 }
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -11,7 +11,21 @@
  opacity: 0;
 }

-/*fade*/
+/*fade-transform*/
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/*breadcrumb transition*/
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
  transition: all .5s;
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -131,16 +131,14 @@ export function objectMerge(target, source) {
  if (Array.isArray(source)) {
    return source.slice()
  }
-  for (const property in source) {
-    if (source.hasOwnProperty(property)) {
-      const sourceProperty = source[property]
-      if (typeof sourceProperty === 'object') {
-        target[property] = objectMerge(target[property], sourceProperty)
-        continue
-      }
+  Object.keys(source).forEach((property) => {
+    const sourceProperty = source[property]
+    if (typeof sourceProperty === 'object') {
+      target[property] = objectMerge(target[property], sourceProperty)
+    } else {
      target[property] = sourceProperty
    }
-  }
+  })
  return target
 }

@@ -248,20 +246,26 @@ export function debounce(func, wait, immediate) {
  }
 }

+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ */
 export function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'shallowClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
-  for (const keys in source) {
-    if (source.hasOwnProperty(keys)) {
-      if (source[keys] && typeof source[keys] === 'object') {
-        targetObj[keys] = source[keys].constructor === Array ? [] : {}
-        targetObj[keys] = deepClone(source[keys])
-      } else {
-        targetObj[keys] = source[keys]
-      }
+  Object.keys(source).forEach((keys) => {
+    if (source[keys] && typeof source[keys] === 'object') {
+      targetObj[keys] = deepClone(source[keys])
+    } else {
+      targetObj[keys] = source[keys]
    }
-  }
+  })
  return targetObj
 }
+
+export function uniqueArr(arr) {
+  return Array.from(new Set(arr))
+}
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@@ -0,0 +1,26 @@
+import store from '@/store'
+
+/**
+ * @param {Array} value
+ * @returns {Boolean}
+ * @example see @/views/permission/directive.vue
+ */
+export default function checkPermission(value) {
+  if (value && value instanceof Array && value.length > 0) {
+    const roles = store.getters && store.getters.roles
+    const permissionRoles = value
+
+    const hasPermission = roles.some(role => {
+      return permissionRoles.includes(role)
+    })
+
+    if (!hasPermission) {
+      return false
+    }
+    return true
+  } else {
+    console.error(`need roles! Like v-permission="['admin','editor']"`)
+    return false
+  }
+}
+
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,7 +13,8 @@ const service = axios.create({
 service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
-    config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+    config.headers['X-Token'] = getToken()
  }
  return config
 }, error => {
@@ -26,34 +27,40 @@ service.interceptors.request.use(config => {
 service.interceptors.response.use(
  response => response,
  /**
-  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
-  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
-  */
-  //  const res = response.data;
-  //     if (res.code !== 20000) {
-  //       Message({
-  //         message: res.message,
-  //         type: 'error',
-  //         duration: 5 * 1000
-  //       });
-  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
-  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-  //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
-  //           confirmButtonText: '重新登录',
-  //           cancelButtonText: '取消',
-  //           type: 'warning'
-  //         }).then(() => {
-  //           store.dispatch('FedLogOut').then(() => {
-  //             location.reload();// 为了重新实例化vue-router对象 避免bug
-  //           });
+   * 下面的注释为通过在response里，自定义code来标示请求状态
+   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
+   * 如想通过xmlhttprequest来状态码标识 逻辑可写在下面error中
+   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
+   */
+  // response => {
+  //   const res = response.data
+  //   if (res.code !== 20000) {
+  //     Message({
+  //       message: res.message,
+  //       type: 'error',
+  //       duration: 5 * 1000
+  //     })
+  //     // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+  //       // 请自行在引入 MessageBox
+  //       // import { Message, MessageBox } from 'element-ui'
+  //       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+  //         confirmButtonText: '重新登录',
+  //         cancelButtonText: '取消',
+  //         type: 'warning'
+  //       }).then(() => {
+  //         store.dispatch('FedLogOut').then(() => {
+  //           location.reload() // 为了重新实例化vue-router对象 避免bug
  //         })
-  //       }
-  //       return Promise.reject('error');
-  //     } else {
-  //       return response.data;
+  //       })
  //     }
+  //     return Promise.reject('error')
+  //   } else {
+  //     return response.data
+  //   }
+  // },
  error => {
-    console.log('err' + error)// for debug
+    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -26,7 +26,7 @@ export function validateUpperCase(str) {
 }

 /* 大小写字母*/
-export function validatAlphabets(str) {
+export function validateAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
 }
--- a/src/vendor/Blob.js
+++ b/src/vendor/Blob.js
@@ -16,164 +16,161 @@
 /*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

 (function (view) {
-    "use strict";
+  "use strict";

-    view.URL = view.URL || view.webkitURL;
+  view.URL = view.URL || view.webkitURL;

-    if (view.Blob && view.URL) {
-        try {
-            new Blob;
-            return;
-        } catch (e) {}
+  if (view.Blob && view.URL) {
+    try {
+      new Blob;
+      return;
+    } catch (e) {}
+  }
+
+  // Internally we use a BlobBuilder implementation to base Blob off of
+  // in order to support older browsers that only have BlobBuilder
+  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
+    var
+      get_class = function (object) {
+        return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+      },
+      FakeBlobBuilder = function BlobBuilder() {
+        this.data = [];
+      },
+      FakeBlob = function Blob(data, type, encoding) {
+        this.data = data;
+        this.size = data.length;
+        this.type = type;
+        this.encoding = encoding;
+      },
+      FBB_proto = FakeBlobBuilder.prototype,
+      FB_proto = FakeBlob.prototype,
+      FileReaderSync = view.FileReaderSync,
+      FileException = function (type) {
+        this.code = this[this.name = type];
+      },
+      file_ex_codes = (
+        "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +
+        "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+      ).split(" "),
+      file_ex_code = file_ex_codes.length,
+      real_URL = view.URL || view.webkitURL || view,
+      real_create_object_URL = real_URL.createObjectURL,
+      real_revoke_object_URL = real_URL.revokeObjectURL,
+      URL = real_URL,
+      btoa = view.btoa,
+      atob = view.atob
+
+      ,
+      ArrayBuffer = view.ArrayBuffer,
+      Uint8Array = view.Uint8Array;
+    FakeBlob.fake = FB_proto.fake = true;
+    while (file_ex_code--) {
+      FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
    }
-
-    // Internally we use a BlobBuilder implementation to base Blob off of
-    // in order to support older browsers that only have BlobBuilder
-    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
-            var
-                get_class = function(object) {
-                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
-                }
-                , FakeBlobBuilder = function BlobBuilder() {
-                    this.data = [];
-                }
-                , FakeBlob = function Blob(data, type, encoding) {
-                    this.data = data;
-                    this.size = data.length;
-                    this.type = type;
-                    this.encoding = encoding;
-                }
-                , FBB_proto = FakeBlobBuilder.prototype
-                , FB_proto = FakeBlob.prototype
-                , FileReaderSync = view.FileReaderSync
-                , FileException = function(type) {
-                    this.code = this[this.name = type];
-                }
-                , file_ex_codes = (
-                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
-                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
-                ).split(" ")
-                , file_ex_code = file_ex_codes.length
-                , real_URL = view.URL || view.webkitURL || view
-                , real_create_object_URL = real_URL.createObjectURL
-                , real_revoke_object_URL = real_URL.revokeObjectURL
-                , URL = real_URL
-                , btoa = view.btoa
-                , atob = view.atob
-
-                , ArrayBuffer = view.ArrayBuffer
-                , Uint8Array = view.Uint8Array
-                ;
-            FakeBlob.fake = FB_proto.fake = true;
-            while (file_ex_code--) {
-                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
-            }
-            if (!real_URL.createObjectURL) {
-                URL = view.URL = {};
-            }
-            URL.createObjectURL = function(blob) {
-                var
-                    type = blob.type
-                    , data_URI_header
-                    ;
-                if (type === null) {
-                    type = "application/octet-stream";
-                }
-                if (blob instanceof FakeBlob) {
-                    data_URI_header = "data:" + type;
-                    if (blob.encoding === "base64") {
-                        return data_URI_header + ";base64," + blob.data;
-                    } else if (blob.encoding === "URI") {
-                        return data_URI_header + "," + decodeURIComponent(blob.data);
-                    } if (btoa) {
-                        return data_URI_header + ";base64," + btoa(blob.data);
-                    } else {
-                        return data_URI_header + "," + encodeURIComponent(blob.data);
-                    }
-                } else if (real_create_object_URL) {
-                    return real_create_object_URL.call(real_URL, blob);
-                }
-            };
-            URL.revokeObjectURL = function(object_URL) {
-                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
-                    real_revoke_object_URL.call(real_URL, object_URL);
-                }
-            };
-            FBB_proto.append = function(data/*, endings*/) {
-                var bb = this.data;
-                // decode data to a binary string
-                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
-                    var
-                        str = ""
-                        , buf = new Uint8Array(data)
-                        , i = 0
-                        , buf_len = buf.length
-                        ;
-                    for (; i < buf_len; i++) {
-                        str += String.fromCharCode(buf[i]);
-                    }
-                    bb.push(str);
-                } else if (get_class(data) === "Blob" || get_class(data) === "File") {
-                    if (FileReaderSync) {
-                        var fr = new FileReaderSync;
-                        bb.push(fr.readAsBinaryString(data));
-                    } else {
-                        // async FileReader won't work as BlobBuilder is sync
-                        throw new FileException("NOT_READABLE_ERR");
-                    }
-                } else if (data instanceof FakeBlob) {
-                    if (data.encoding === "base64" && atob) {
-                        bb.push(atob(data.data));
-                    } else if (data.encoding === "URI") {
-                        bb.push(decodeURIComponent(data.data));
-                    } else if (data.encoding === "raw") {
-                        bb.push(data.data);
-                    }
-                } else {
-                    if (typeof data !== "string") {
-                        data += ""; // convert unsupported types to strings
-                    }
-                    // decode UTF-16 to binary string
-                    bb.push(unescape(encodeURIComponent(data)));
-                }
-            };
-            FBB_proto.getBlob = function(type) {
-                if (!arguments.length) {
-                    type = null;
-                }
-                return new FakeBlob(this.data.join(""), type, "raw");
-            };
-            FBB_proto.toString = function() {
-                return "[object BlobBuilder]";
-            };
-            FB_proto.slice = function(start, end, type) {
-                var args = arguments.length;
-                if (args < 3) {
-                    type = null;
-                }
-                return new FakeBlob(
-                    this.data.slice(start, args > 1 ? end : this.data.length)
-                    , type
-                    , this.encoding
-                );
-            };
-            FB_proto.toString = function() {
-                return "[object Blob]";
-            };
-            FB_proto.close = function() {
-                this.size = this.data.length = 0;
-            };
-            return FakeBlobBuilder;
-        }(view));
-
-    view.Blob = function Blob(blobParts, options) {
-        var type = options ? (options.type || "") : "";
-        var builder = new BlobBuilder();
-        if (blobParts) {
-            for (var i = 0, len = blobParts.length; i < len; i++) {
-                builder.append(blobParts[i]);
-            }
+    if (!real_URL.createObjectURL) {
+      URL = view.URL = {};
+    }
+    URL.createObjectURL = function (blob) {
+      var
+        type = blob.type,
+        data_URI_header;
+      if (type === null) {
+        type = "application/octet-stream";
+      }
+      if (blob instanceof FakeBlob) {
+        data_URI_header = "data:" + type;
+        if (blob.encoding === "base64") {
+          return data_URI_header + ";base64," + blob.data;
+        } else if (blob.encoding === "URI") {
+          return data_URI_header + "," + decodeURIComponent(blob.data);
        }
-        return builder.getBlob(type);
+        if (btoa) {
+          return data_URI_header + ";base64," + btoa(blob.data);
+        } else {
+          return data_URI_header + "," + encodeURIComponent(blob.data);
+        }
+      } else if (real_create_object_URL) {
+        return real_create_object_URL.call(real_URL, blob);
+      }
    };
+    URL.revokeObjectURL = function (object_URL) {
+      if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+        real_revoke_object_URL.call(real_URL, object_URL);
+      }
+    };
+    FBB_proto.append = function (data /*, endings*/ ) {
+      var bb = this.data;
+      // decode data to a binary string
+      if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+        var
+          str = "",
+          buf = new Uint8Array(data),
+          i = 0,
+          buf_len = buf.length;
+        for (; i < buf_len; i++) {
+          str += String.fromCharCode(buf[i]);
+        }
+        bb.push(str);
+      } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+        if (FileReaderSync) {
+          var fr = new FileReaderSync;
+          bb.push(fr.readAsBinaryString(data));
+        } else {
+          // async FileReader won't work as BlobBuilder is sync
+          throw new FileException("NOT_READABLE_ERR");
+        }
+      } else if (data instanceof FakeBlob) {
+        if (data.encoding === "base64" && atob) {
+          bb.push(atob(data.data));
+        } else if (data.encoding === "URI") {
+          bb.push(decodeURIComponent(data.data));
+        } else if (data.encoding === "raw") {
+          bb.push(data.data);
+        }
+      } else {
+        if (typeof data !== "string") {
+          data += ""; // convert unsupported types to strings
+        }
+        // decode UTF-16 to binary string
+        bb.push(unescape(encodeURIComponent(data)));
+      }
+    };
+    FBB_proto.getBlob = function (type) {
+      if (!arguments.length) {
+        type = null;
+      }
+      return new FakeBlob(this.data.join(""), type, "raw");
+    };
+    FBB_proto.toString = function () {
+      return "[object BlobBuilder]";
+    };
+    FB_proto.slice = function (start, end, type) {
+      var args = arguments.length;
+      if (args < 3) {
+        type = null;
+      }
+      return new FakeBlob(
+        this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding
+      );
+    };
+    FB_proto.toString = function () {
+      return "[object Blob]";
+    };
+    FB_proto.close = function () {
+      this.size = this.data.length = 0;
+    };
+    return FakeBlobBuilder;
+  }(view));
+
+  view.Blob = function Blob(blobParts, options) {
+    var type = options ? (options.type || "") : "";
+    var builder = new BlobBuilder();
+    if (blobParts) {
+      for (var i = 0, len = blobParts.length; i < len; i++) {
+        builder.append(blobParts[i]);
+      }
+    }
+    return builder.getBlob(type);
+  };
 }(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
--- a/src/vendor/Export2Excel.js
+++ b/src/vendor/Export2Excel.js
@@ -4,139 +4,179 @@ require('script-loader!@/vendor/Blob');
 import XLSX from 'xlsx'

 function generateArray(table) {
-    var out = [];
-    var rows = table.querySelectorAll('tr');
-    var ranges = [];
-    for (var R = 0; R < rows.length; ++R) {
-        var outRow = [];
-        var row = rows[R];
-        var columns = row.querySelectorAll('td');
-        for (var C = 0; C < columns.length; ++C) {
-            var cell = columns[C];
-            var colspan = cell.getAttribute('colspan');
-            var rowspan = cell.getAttribute('rowspan');
-            var cellValue = cell.innerText;
-            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

-            //Skip ranges
-            ranges.forEach(function (range) {
-                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
-                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
-                }
-            });
-
-            //Handle Row Span
-            if (rowspan || colspan) {
-                rowspan = rowspan || 1;
-                colspan = colspan || 1;
-                ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
-            }
-            ;
-
-            //Handle Value
-            outRow.push(cellValue !== "" ? cellValue : null);
-
-            //Handle Colspan
-            if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
        }
-        out.push(outRow);
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
    }
-    return [out, ranges];
+    out.push(outRow);
+  }
+  return [out, ranges];
 };

 function datenum(v, date1904) {
-    if (date1904) v += 1462;
-    var epoch = Date.parse(v);
-    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
 }

 function sheet_from_array_of_arrays(data, opts) {
-    var ws = {};
-    var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
-    for (var R = 0; R != data.length; ++R) {
-        for (var C = 0; C != data[R].length; ++C) {
-            if (range.s.r > R) range.s.r = R;
-            if (range.s.c > C) range.s.c = C;
-            if (range.e.r < R) range.e.r = R;
-            if (range.e.c < C) range.e.c = C;
-            var cell = {v: data[R][C]};
-            if (cell.v == null) continue;
-            var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
-
-            if (typeof cell.v === 'number') cell.t = 'n';
-            else if (typeof cell.v === 'boolean') cell.t = 'b';
-            else if (cell.v instanceof Date) {
-                cell.t = 'n';
-                cell.z = XLSX.SSF._table[14];
-                cell.v = datenum(cell.v);
-            }
-            else cell.t = 's';
-
-            ws[cell_ref] = cell;
-        }
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
    }
-    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
-    return ws;
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
 }

 function Workbook() {
-    if (!(this instanceof Workbook)) return new Workbook();
-    this.SheetNames = [];
-    this.Sheets = {};
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
 }

 function s2ab(s) {
-    var buf = new ArrayBuffer(s.length);
-    var view = new Uint8Array(buf);
-    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
-    return buf;
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
 }

 export function export_table_to_excel(id) {
-    var theTable = document.getElementById(id);
-    var oo = generateArray(theTable);
-    var ranges = oo[1];
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];

-    /* original data */
-    var data = oo[0];
-    var ws_name = "SheetJS";
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";

-    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);

-    /* add ranges to worksheet */
-    // ws['!cols'] = ['apple', 'banan'];
-    ws['!merges'] = ranges;
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;

-    /* add worksheet to workbook */
-    wb.SheetNames.push(ws_name);
-    wb.Sheets[ws_name] = ws;
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;

-    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });

-    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
 }

-export function export_json_to_excel(th, jsonData, defaultTitle) {
-
-    /* original data */
-
-    var data = jsonData;
-    data.unshift(th);
-    var ws_name = "SheetJS";
-
-    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+export function export_json_to_excel({
+  header,
+  data,
+  filename,
+  autoWidth = true
+} = {}) {
+  /* original data */
+  filename = filename || 'excel-list'
+  data = [...data]
+  data.unshift(header);
+  var ws_name = "SheetJS";
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);

+  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    const colWidth = data.map(row => row.map(val => {
      /*先判断是否为null/undefined*/
      if (val == null) {
-        return {'wch': 10};
+        return {
+          'wch': 10
+        };
      }
      /*再判断是否为中文*/
      else if (val.toString().charCodeAt(0) > 255) {
-        return {'wch': val.toString().length * 2};
+        return {
+          'wch': val.toString().length * 2
+        };
      } else {
-        return {'wch': val.toString().length};
+        return {
+          'wch': val.toString().length
+        };
      }
    }))
    /*以第一行为初始值*/
@@ -149,12 +189,18 @@ export function export_json_to_excel(th, jsonData, defaultTitle) {
      }
    }
    ws['!cols'] = result;
+  }

-    /* add worksheet to workbook */
-    wb.SheetNames.push(ws_name);
-    wb.Sheets[ws_name] = ws;
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;

-    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
-    var title = defaultTitle || 'excel-list'
-    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), filename + ".xlsx");
 }
--- a/src/vendor/Export2Zip.js
+++ b/src/vendor/Export2Zip.js
@@ -14,7 +14,9 @@ export function export_txt_to_zip(th, jsonData, txtName, zipName) {
    txtData += `${tempStr}\r\n`
  })
  zip.file(`${txt_name}.txt`, txtData)
-  zip.generateAsync({type:"blob"}).then((blob) => {
+  zip.generateAsync({
+    type: "blob"
+  }).then((blob) => {
    saveAs(blob, `${zip_name}.zip`)
  }, (err) => {
    alert('导出失败')
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -34,7 +34,7 @@ export default {
    },
    clipboardSuccess() {
      this.$message({
-        message: '复制成功',
+        message: 'Copy successfully',
        type: 'success',
        duration: 1500
      })
--- a/src/views/components-demo/dragDialog.vue
+++ b/src/views/components-demo/dragDialog.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="components-container">
+    <el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
+    <el-dialog v-el-drag-dialog @dragDialog="handleDrag" title="Shipping address" :visible.sync="dialogTableVisible">
+      <el-select ref="select" v-model="value" placeholder="请选择">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+      <el-table :data="gridData">
+        <el-table-column property="date" label="Date" width="150"></el-table-column>
+        <el-table-column property="name" label="Name" width="200"></el-table-column>
+        <el-table-column property="address" label="Address"></el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
+
+export default {
+  name: 'dragDialog-demo',
+  directives: { elDragDialog },
+  data() {
+    return {
+      dialogTableVisible: false,
+      options: [
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' }
+      ],
+      value: '',
+      gridData: [{
+        date: '2016-05-02',
+        name: 'John Smith',
+        address: 'No.1518,  Jinshajiang Road, Putuo District'
+      }, {
+        date: '2016-05-04',
+        name: 'John Smith',
+        address: 'No.1518,  Jinshajiang Road, Putuo District'
+      }, {
+        date: '2016-05-01',
+        name: 'John Smith',
+        address: 'No.1518,  Jinshajiang Road, Putuo District'
+      }, {
+        date: '2016-05-03',
+        name: 'John Smith',
+        address: 'No.1518,  Jinshajiang Road, Putuo District'
+      }]
+    }
+  },
+  methods: {
+    // v-el-drag-dialog onDrag callback function
+    handleDrag() {
+      this.$refs.select.blur()
+    }
+  }
+}
+</script>
--- a/src/views/components-demo/dragKanban.vue
+++ b/src/views/components-demo/dragKanban.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="components-container board">
+    <Kanban :key="1" class="kanban todo" :list="list1" :options="options" header-text="Todo"/>
+    <Kanban :key="2" class="kanban working" :list="list2" :options="options" header-text="Working"/>
+    <Kanban :key="3" class="kanban done" :list="list3" :options="options" header-text="Done"/>
+  </div>
+</template>
+<script>
+import Kanban from '@/components/Kanban'
+
+export default {
+  name: 'dragKanban-demo',
+  components: {
+    Kanban
+  },
+  data() {
+    return {
+      options: {
+        group: 'mission'
+      },
+      list1: [
+        { name: 'Mission', id: 1 },
+        { name: 'Mission', id: 2 },
+        { name: 'Mission', id: 3 },
+        { name: 'Mission', id: 4 }
+      ],
+      list2: [
+        { name: 'Mission', id: 5 },
+        { name: 'Mission', id: 6 },
+        { name: 'Mission', id: 7 }
+      ],
+      list3: [
+        { name: 'Mission', id: 8 },
+        { name: 'Mission', id: 9 },
+        { name: 'Mission', id: 10 }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss">
+.board {
+  width: 1000px;
+  margin-left: 20px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.kanban {
+  &.todo {
+    .board-column-header {
+      background: #4A9FF9;
+    }
+  }
+  &.working {
+    .board-column-header {
+      background: #f9944a;
+    }
+  }
+  &.done {
+    .board-column-header {
+      background: #2ac06d;
+    }
+  }
+}
+</style>
+
--- a/src/views/components-demo/splitpane.vue
+++ b/src/views/components-demo/splitpane.vue
@@ -38,30 +38,30 @@ export default {
 </script>

 <style  scoped>
-	.components-container {
-	  position: relative;
-	  height: 100vh;
-	}
+  .components-container {
+    position: relative;
+    height: 100vh;
+  }

-	.left-container {
-	  background-color: #F38181;
-	  height: 100%;
-	}
+  .left-container {
+    background-color: #F38181;
+    height: 100%;
+  }

-	.right-container {
-	  background-color: #FCE38A;
-	  height: 200px;
-	}
+  .right-container {
+    background-color: #FCE38A;
+    height: 200px;
+  }

-	.top-container {
-	  background-color: #FCE38A;
-	  width: 100%;
-	  height: 100%;
-	}
+  .top-container {
+    background-color: #FCE38A;
+    width: 100%;
+    height: 100%;
+  }

-	.bottom-container {
-	  width: 100%;
-	  background-color: #95E1D3;
-	  height: 100%;
-	}
+  .bottom-container {
+    width: 100%;
+    background-color: #95E1D3;
+    height: 100%;
+  }
 </style>
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -2,7 +2,7 @@
  <div class="components-container">
    <code>
      {{$t('components.tinymceTips')}}
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor"> {{$t('components.documentation')}}</a>
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{$t('components.documentation')}}</a>
    </code>
    <div>
      <tinymce :height="300" v-model="content"></tinymce>
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@@ -1,317 +1,319 @@
 .todoapp {
-	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	line-height: 1.4em;
-	color: #4d4d4d;
-	min-width: 230px;
-	max-width: 550px;
-	margin: 0 auto ;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	font-weight: 300;
-	background: #fff;
-	z-index: 1;
-	position: relative;
-	button {
-		margin: 0;
-		padding: 0;
-		border: 0;
-		background: none;
-		font-size: 100%;
-		vertical-align: baseline;
-		font-family: inherit;
-		font-weight: inherit;
-		color: inherit;
-		-webkit-appearance: none;
-		appearance: none;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
-	:focus {
-		outline: 0;
-	}
-	.hidden {
-		display: none;
-	}
-	.todoapp {
-		background: #fff;
-		margin: 130px 0 40px 0;
-		position: relative;
-		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-	}
-	.todoapp input::-webkit-input-placeholder {
-		font-style: italic;
-		font-weight: 300;
-		color: #e6e6e6;
-	}
-	.todoapp input::-moz-placeholder {
-		font-style: italic;
-		font-weight: 300;
-		color: #e6e6e6;
-	}
-	.todoapp input::input-placeholder {
-		font-style: italic;
-		font-weight: 300;
-		color: #e6e6e6;
-	}
-	.todoapp h1 {
-		position: absolute;
-		top: -155px;
-		width: 100%;
-		font-size: 100px;
-		font-weight: 100;
-		text-align: center;
-		color: rgba(175, 47, 47, 0.15);
-		-webkit-text-rendering: optimizeLegibility;
-		-moz-text-rendering: optimizeLegibility;
-		text-rendering: optimizeLegibility;
-	}
-	.new-todo,
-	.edit {
-		position: relative;
-		margin: 0;
-		width: 100%;
-		font-size: 18px;
-		font-family: inherit;
-		font-weight: inherit;
-		line-height: 1.4em;
-		border: 0;
-		color: inherit;
-		padding: 6px;
-		border: 1px solid #999;
-		box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-		box-sizing: border-box;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
-	.new-todo {
-		padding: 10px 16px 16px 60px;
-		border: none;
-		background: rgba(0, 0, 0, 0.003);
-		box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
-	}
-	.main {
-		position: relative;
-		z-index: 2;
-		border-top: 1px solid #e6e6e6;
-	}
-	.toggle-all {
-		text-align: center;
-		border: none;
-		/* Mobile Safari */
-		opacity: 0;
-		position: absolute;
-	}
-	.toggle-all+label {
-		width: 60px;
-		height: 34px;
-		font-size: 0;
-		position: absolute;
-		top: -52px;
-		left: -13px;
-		-webkit-transform: rotate(90deg);
-		transform: rotate(90deg);
-	}
-	.toggle-all+label:before {
-		content: '❯';
-		font-size: 22px;
-		color: #e6e6e6;
-		padding: 10px 27px 10px 27px;
-	}
-	.toggle-all:checked+label:before {
-		color: #737373;
-	}
-	.todo-list {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
-	.todo-list li {
-		position: relative;
-		font-size: 24px;
-		border-bottom: 1px solid #ededed;
-	}
-	.todo-list li:last-child {
-		border-bottom: none;
-	}
-	.todo-list li.editing {
-		border-bottom: none;
-		padding: 0;
-	}
-	.todo-list li.editing .edit {
-		display: block;
-		width: 506px;
-		padding: 12px 16px;
-		margin: 0 0 0 43px;
-	}
-	.todo-list li.editing .view {
-		display: none;
-	}
-	.todo-list li .toggle {
-		text-align: center;
-		width: 40px;
-		/* auto, since non-WebKit browsers doesn't support input styling */
-		height: auto;
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		margin: auto 0;
-		border: none;
-		/* Mobile Safari */
-		-webkit-appearance: none;
-		appearance: none;
-	}
-	.todo-list li .toggle {
-		opacity: 0;
-	}
-	.todo-list li .toggle+label {
-		/*
-		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
-		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
-	*/
-		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
-		background-repeat: no-repeat;
-		background-position: center left;
-		background-size: 36px;
-	}
-	.todo-list li .toggle:checked+label {
-		background-size: 36px;
-		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
-	}
-	.todo-list li label {
-		word-break: break-all;
-		padding: 15px 15px 15px 50px;
-		display: block;
-		line-height: 1.0;
-		    font-size: 14px;
-		transition: color 0.4s;
-	}
-	.todo-list li.completed label {
-		color: #d9d9d9;
-		text-decoration: line-through;
-	}
-	.todo-list li .destroy {
-		display: none;
-		position: absolute;
-		top: 0;
-		right: 10px;
-		bottom: 0;
-		width: 40px;
-		height: 40px;
-		margin: auto 0;
-		font-size: 30px;
-		color: #cc9a9a;
-		transition: color 0.2s ease-out;
-	}
-	.todo-list li .destroy:hover {
-		color: #af5b5e;
-	}
-	.todo-list li .destroy:after {
-		content: '×';
-	}
-	.todo-list li:hover .destroy {
-		display: block;
-	}
-	.todo-list li .edit {
-		display: none;
-	}
-	.todo-list li.editing:last-child {
-		margin-bottom: -1px;
-	}
-	.footer {
-		color: #777;
-		position: relative;
-		padding: 10px 15px;
-		height: 40px;
-		text-align: center;
-		border-top: 1px solid #e6e6e6;
-	}
-	.footer:before {
-		content: '';
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		height: 50px;
-		overflow: hidden;
-		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
-	}
-	.todo-count {
-		float: left;
-		text-align: left;
-	}
-	.todo-count strong {
-		font-weight: 300;
-	}
-	.filters {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
-	.filters li {
-		display: inline;
-	}
-	.filters li a {
-		color: inherit;
-		font-size: 12px;
-		padding: 3px 7px;
-		text-decoration: none;
-		border: 1px solid transparent;
-		border-radius: 3px;
-	}
-	.filters li a:hover {
-		border-color: rgba(175, 47, 47, 0.1);
-	}
-	.filters li a.selected {
-		border-color: rgba(175, 47, 47, 0.2);
-	}
-	.clear-completed,
-	html .clear-completed:active {
-		float: right;
-		position: relative;
-		line-height: 20px;
-		text-decoration: none;
-		cursor: pointer;
-	}
-	.clear-completed:hover {
-		text-decoration: underline;
-	}
-	.info {
-		margin: 65px auto 0;
-		color: #bfbfbf;
-		font-size: 10px;
-		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-		text-align: center;
-	}
-	.info p {
-		line-height: 1;
-	}
-	.info a {
-		color: inherit;
-		text-decoration: none;
-		font-weight: 400;
-	}
-	.info a:hover {
-		text-decoration: underline;
-	}
-	/*
-	Hack to remove background from Mobile Safari.
-	Can't use it globally since it destroys checkboxes in Firefox
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto ;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+  background: #fff;
+  z-index: 1;
+  position: relative;
+  button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  :focus {
+    outline: 0;
+  }
+  .hidden {
+    display: none;
+  }
+  .todoapp {
+    background: #fff;
+    margin: 130px 0 40px 0;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+  .todoapp input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp input::-moz-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp input::input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+  }
+  .new-todo,
+  .edit {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    font-size: 18px;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: 1.4em;
+    border: 0;
+    color: inherit;
+    padding: 6px;
+    border: 1px solid #999;
+    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .new-todo {
+    padding: 10px 16px 16px 60px;
+    border: none;
+    background: rgba(0, 0, 0, 0.003);
+    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+  }
+  .main {
+    position: relative;
+    z-index: 2;
+    border-top: 1px solid #e6e6e6;
+  }
+  .toggle-all {
+    text-align: center;
+    border: none;
+    /* Mobile Safari */
+    opacity: 0;
+    position: absolute;
+  }
+  .toggle-all+label {
+    width: 60px;
+    height: 34px;
+    font-size: 0;
+    position: absolute;
+    top: -52px;
+    left: -13px;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+  .toggle-all+label:before {
+    content: '❯';
+    font-size: 22px;
+    color: #e6e6e6;
+    padding: 10px 27px 10px 27px;
+  }
+  .toggle-all:checked+label:before {
+    color: #737373;
+  }
+  .todo-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .todo-list li {
+    position: relative;
+    font-size: 24px;
+    border-bottom: 1px solid #ededed;
+  }
+  .todo-list li:last-child {
+    border-bottom: none;
+  }
+  .todo-list li.editing {
+    border-bottom: none;
+    padding: 0;
+  }
+  .todo-list li.editing .edit {
+    display: block;
+    width: 506px;
+    padding: 12px 16px;
+    margin: 0 0 0 43px;
+  }
+  .todo-list li.editing .view {
+    display: none;
+  }
+  .todo-list li .toggle {
+    text-align: center;
+    width: 40px;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    border: none;
+    /* Mobile Safari */
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .todo-list li .toggle {
+    opacity: 0;
+  }
+  .todo-list li .toggle+label {
+    /*
+    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+  */
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: center left;
+    background-size: 36px;
+  }
+  .todo-list li .toggle:checked+label {
+    background-size: 36px;
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+  }
+  .todo-list li label {
+    word-break: break-all;
+    padding: 15px 15px 15px 50px;
+    display: block;
+    line-height: 1.0;
+        font-size: 14px;
+    transition: color 0.4s;
+  }
+  .todo-list li.completed label {
+    color: #d9d9d9;
+    text-decoration: line-through;
+  }
+  .todo-list li .destroy {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    width: 40px;
+    height: 40px;
+    margin: auto 0;
+    font-size: 30px;
+    color: #cc9a9a;
+    transition: color 0.2s ease-out;
+  }
+  .todo-list li .destroy:hover {
+    color: #af5b5e;
+  }
+  .todo-list li .destroy:after {
+    content: '×';
+  }
+  .todo-list li:hover .destroy {
+    display: block;
+  }
+  .todo-list li .edit {
+    display: none;
+  }
+  .todo-list li.editing:last-child {
+    margin-bottom: -1px;
+  }
+  .footer {
+    color: #777;
+    position: relative;
+    padding: 10px 15px;
+    height: 40px;
+    text-align: center;
+    border-top: 1px solid #e6e6e6;
+  }
+  .footer:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 40px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+  }
+  .todo-count {
+    float: left;
+    text-align: left;
+  }
+  .todo-count strong {
+    font-weight: 300;
+  }
+  .filters {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    z-index: 1;
+    list-style: none;
+  }
+  .filters li {
+    display: inline;
+  }
+  .filters li a {
+    color: inherit;
+    font-size: 12px;
+    padding: 3px 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+  }
+  .filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+  }
+  .filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+  }
+  .clear-completed,
+  html .clear-completed:active {
+    float: right;
+    position: relative;
+    line-height: 20px;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .clear-completed:hover {
+    text-decoration: underline;
+  }
+  .info {
+    margin: 65px auto 0;
+    color: #bfbfbf;
+    font-size: 10px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-align: center;
+  }
+  .info p {
+    line-height: 1;
+  }
+  .info a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 400;
+  }
+  .info a:hover {
+    text-decoration: underline;
+  }
+  /*
+  Hack to remove background from Mobile Safari.
+  Can't use it globally since it destroys checkboxes in Firefox
 */
-	@media screen and (-webkit-min-device-pixel-ratio:0) {
-		.toggle-all,
-		.todo-list li .toggle {
-			background: none;
-		}
-		.todo-list li .toggle {
-			height: 40px;
-		}
-	}
-	@media (max-width: 430px) {
-		.footer {
-			height: 50px;
-		}
-		.filters {
-			bottom: 10px;
-		}
-	}
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    .toggle-all,
+    .todo-list li .toggle {
+      background: none;
+    }
+    .todo-list li .toggle {
+      height: 40px;
+    }
+  }
+  @media (max-width: 430px) {
+    .footer {
+      height: 50px;
+    }
+    .filters {
+      bottom: 10px;
+    }
+  }
 }
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -1,8 +1,8 @@
 <template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
-    <el-table-column label="Order_No" show-overflow-tooltip>
+    <el-table-column label="Order_No" min-width="200">
      <template slot-scope="scope">
-        {{scope.row.order_no}}
+        {{scope.row.order_no |  orderNoFilter}}
      </template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
@@ -34,6 +34,9 @@ export default {
        pending: 'danger'
      }
      return statusMap[status]
+    },
+    orderNoFilter(str) {
+      return str.substring(0, 30)
    }
  },
  created() {
@@ -42,7 +45,7 @@ export default {
  methods: {
    fetchData() {
      fetchList().then(response => {
-        this.list = response.data.items.slice(0, 7)
+        this.list = response.data.items.slice(0, 8)
      })
    }
  }
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="dashboard-editor-container">
-    <github-corner></github-corner>
+
+    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>

    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>

@@ -30,10 +31,10 @@
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table></transaction-table>
      </el-col>
-      <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
+      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <todo-list></todo-list>
      </el-col>
-      <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
+      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card></box-card>
      </el-col>
    </el-row>
@@ -41,6 +42,7 @@
  </div>
 </template>

+
 <script>
 import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './components/PanelGroup'
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -4,10 +4,10 @@
      <pan-thumb style="float: left" :image="avatar"> Your roles:
        <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
      </pan-thumb>
-      <github-corner></github-corner>
+      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
      <div class="info-container">
        <span class="display_name">{{name}}</span>
-        <span style="font-size:20px;padding-top:20px;display:inline-block;">editor : dashboard</span>
+        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
      </div>
    </div>
    <div>
@@ -40,35 +40,34 @@ export default {
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
-	.emptyGif {
-		display: block;
-		width: 45%;
-		margin: 0 auto;
-	}
+  .emptyGif {
+    display: block;
+    width: 45%;
+    margin: 0 auto;
+  }

-	.dashboard-editor-container {
-		background-color: #e3e3e3;
-		min-height: 100vh;
-		margin-top: -50px;
-		padding: 100px 60px 0px;
-		.pan-info-roles {
-			font-size: 12px;
-			font-weight: 700;
-			color: #333;
-			display: block;
-		}
-		.info-container {
-			position: relative;
-			margin-left: 190px;
-			height: 150px;
-			line-height: 200px;
-			.display_name {
-				font-size: 48px;
-				line-height: 48px;
-				color: #212121;
-				position: absolute;
-				top: 25px;
-			}
-		}
-	}
+  .dashboard-editor-container {
+    background-color: #e3e3e3;
+    min-height: 100vh;
+    padding: 50px 60px 0px;
+    .pan-info-roles {
+      font-size: 12px;
+      font-weight: 700;
+      color: #333;
+      display: block;
+    }
+    .info-container {
+      position: relative;
+      margin-left: 190px;
+      height: 150px;
+      line-height: 200px;
+      .display_name {
+        font-size: 48px;
+        line-height: 48px;
+        color: #212121;
+        position: absolute;
+        top: 25px;
+      }
+    }
+  }
 </style>
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="app-container documentation-container">
-    <a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">{{$t('documentation.documentation')}}</a>
+    <a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/">{{$t('documentation.documentation')}}</a>
    <a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{$t('documentation.github')}}</a>
    <dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
  </div>
@@ -19,7 +19,7 @@ export default {
        { title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
        { title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
+        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/1190000012213278' }
      ]
    }
  }
--- a/src/views/errorLog/index.vue
+++ b/src/views/errorLog/index.vue
@@ -6,7 +6,7 @@
    <h3>{{$t('errorLog.tips')}}</h3>
    <code>
      {{$t('errorLog.description')}}
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
        {{$t('errorLog.documentation')}}
      </a>
    </code>
--- a/src/views/errorPage/401.vue
+++ b/src/views/errorPage/401.vue
@@ -57,6 +57,7 @@ export default {
    .pan-back-btn {
      background: #008489;
      color: #fff;
+      border: none!important;
    }
    .pan-gif {
      margin: 0 auto;
@@ -65,6 +66,7 @@ export default {
    .pan-img {
      display: block;
      margin: 0 auto;
+      width: 100%;
    }
    .text-jumbo {
      font-size: 60px;
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+  <div class="wscn-http404-container">
    <div class="wscn-http404">
      <div class="pic-404">
        <img class="pic-404__parent" :src="img_404" alt="404">
@@ -14,7 +14,7 @@
        </div>
        <div class="bullshit__headline">{{ message }}</div>
        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
-        <a href="/" class="bullshit__return-home">返回首页</a>
+        <a href="" class="bullshit__return-home">返回首页</a>
      </div>
    </div>
  </div>
@@ -34,24 +34,28 @@ export default {
  },
  computed: {
    message() {
-      return '特朗普说这个页面你不能进......'
+      return '网管说这个页面你不能进......'
    }
  }
 }
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
 .wscn-http404 {
  position: relative;
  width: 1200px;
-  margin: 20px auto 60px;
-  padding: 0 100px;
+  padding: 0 50px;
  overflow: hidden;
  .pic-404 {
    position: relative;
    float: left;
    width: 600px;
-    padding: 150px 0;
    overflow: hidden;
    &__parent {
      width: 100%;
@@ -163,7 +167,7 @@ export default {
    position: relative;
    float: left;
    width: 300px;
-    padding: 150px 0;
+    padding: 30px 0;
    overflow: hidden;
    &__oops {
      font-size: 32px;
@@ -179,7 +183,8 @@ export default {
    &__headline {
      font-size: 20px;
      line-height: 24px;
-      color: #1482f0;
+      color: #222;
+      font-weight: bold;
      opacity: 0;
      margin-bottom: 10px;
      animation-name: slideUp;
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -3,100 +3,51 @@
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">

      <sticky :className="'sub-navbar '+postForm.status">
-        <template v-if="fetchSuccess">
-
-          <router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create-form'}">
-            <el-button type="info">创建form</el-button>
-          </router-link>
-
-          <el-dropdown trigger="click">
-            <el-button plain>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
-              <i class="el-icon-caret-bottom el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu class="no-padding" slot="dropdown">
-              <el-dropdown-item>
-                <el-radio-group style="padding: 10px;" v-model="postForm.comment_disabled">
-                  <el-radio :label="true">关闭评论</el-radio>
-                  <el-radio :label="false">打开评论</el-radio>
-                </el-radio-group>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <el-dropdown trigger="click">
-            <el-button plain>平台
-              <i class="el-icon-caret-bottom el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu class="no-border" slot="dropdown">
-              <el-checkbox-group v-model="postForm.platforms" style="padding: 5px 15px;">
-                <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
-                  {{item.name}}
-                </el-checkbox>
-              </el-checkbox-group>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <el-dropdown trigger="click">
-            <el-button plain>
-              外链
-              <i class="el-icon-caret-bottom el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
-              <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
-                <el-input placeholder="请输入内容" v-model="postForm.source_uri">
-                  <template slot="prepend">填写url</template>
-                </el-input>
-              </el-form-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">发布
-          </el-button>
-          <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
-
-        </template>
-        <template v-else>
-          <el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
-        </template>
-
+        <CommentDropdown v-model="postForm.comment_disabled" />
+        <PlatformDropdown v-model="postForm.platforms" />
+        <SourceUrlDropdown v-model="postForm.source_uri" />
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">发布
+        </el-button>
+        <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
      </sticky>

      <div class="createPost-main-container">
        <el-row>
-          <el-col :span="21">
+
+          <Warning />
+
+          <el-col :span="24">
            <el-form-item style="margin-bottom: 40px;" prop="title">
              <MDinput name="name" v-model="postForm.title" required :maxlength="100">
                标题
              </MDinput>
-              <span v-show="postForm.title.length>=26" class='title-prompt'>app可能会显示不全</span>
            </el-form-item>

            <div class="postInfo-container">
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
-                    <multiselect v-model="postForm.author" :options="userLIstOptions" @search-change="getRemoteUserList" placeholder="搜索用户" selectLabel="选择"
-                      deselectLabel="删除" track-by="key" :internalSearch="false" label="key">
-                      <span slot='noResult'>无结果</span>
-                    </multiselect>
+                    <el-select v-model="postForm.author" filterable remote placeholder="搜索用户" :remote-method="getRemoteUserList">
+                      <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item">
+                      </el-option>
+                    </el-select>
                  </el-form-item>
                </el-col>

-                <el-col :span="8">
-                  <el-tooltip class="item" effect="dark" content="将替换作者" placement="top">
-                    <el-form-item label-width="50px" label="来源:" class="postInfo-container-item">
-                      <el-input placeholder="将替换作者" style='min-width:150px;' v-model="postForm.source_name">
-                      </el-input>
-                    </el-form-item>
-                  </el-tooltip>
-                </el-col>
-
-                <el-col :span="8">
+                <el-col :span="10">
                  <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
                    <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
+
+                <el-col :span="6">
+                  <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
+                    <el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1"
+                      :high-threshold="3">
+                    </el-rate>
+                  </el-form-item>
+                </el-col>
              </el-row>
            </div>
          </el-col>
@@ -109,11 +60,11 @@
        </el-form-item>

        <div class="editor-container">
-          <tinymce :height=400 ref="editor" v-model="postForm.content"></tinymce>
+          <Tinymce :height=400 ref="editor" v-model="postForm.content" />
        </div>

        <div style="margin-bottom: 20px;">
-          <Upload v-model="postForm.image_uri"></Upload>
+          <Upload v-model="postForm.image_uri" />
        </div>
      </div>
    </el-form>
@@ -131,6 +82,8 @@ import Sticky from '@/components/Sticky' // 粘性header组件
 import { validateURL } from '@/utils/validate'
 import { fetchArticle } from '@/api/article'
 import { userSearch } from '@/api/remoteSearch'
+import Warning from './Warning'
+import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'

 const defaultForm = {
  status: 'draft',
@@ -139,16 +92,16 @@ const defaultForm = {
  content_short: '', // 文章摘要
  source_uri: '', // 文章外链
  image_uri: '', // 文章图片
-  source_name: '', // 文章外部作者
  display_time: undefined, // 前台展示时间
  id: undefined,
  platforms: ['a-platform'],
-  comment_disabled: false
+  comment_disabled: false,
+  importance: 0
 }

 export default {
  name: 'articleDetail',
-  components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
+  components: { Tinymce, MDinput, Upload, Multiselect, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
  props: {
    isEdit: {
      type: Boolean,
@@ -184,14 +137,8 @@ export default {
    }
    return {
      postForm: Object.assign({}, defaultForm),
-      fetchSuccess: true,
      loading: false,
-      userLIstOptions: [],
-      platformsOptions: [
-        { key: 'a-platform', name: 'a-platform' },
-        { key: 'b-platform', name: 'b-platform' },
-        { key: 'c-platform', name: 'c-platform' }
-      ],
+      userListOptions: [],
      rules: {
        image_uri: [{ validator: validateRequire }],
        title: [{ validator: validateRequire }],
@@ -207,17 +154,20 @@ export default {
  },
  created() {
    if (this.isEdit) {
-      this.fetchData()
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
    } else {
      this.postForm = Object.assign({}, defaultForm)
    }
  },
  methods: {
-    fetchData() {
-      fetchArticle().then(response => {
+    fetchData(id) {
+      fetchArticle(id).then(response => {
        this.postForm = response.data
+        // Just for test
+        this.postForm.title += `   Article Id:${this.postForm.id}`
+        this.postForm.content_short += `   Article Id:${this.postForm.id}`
      }).catch(err => {
-        this.fetchSuccess = false
        console.log(err)
      })
    },
@@ -260,10 +210,7 @@ export default {
    getRemoteUserList(query) {
      userSearch(query).then(response => {
        if (!response.data.items) return
-        console.log(response)
-        this.userLIstOptions = response.data.items.map(v => ({
-          key: v.name
-        }))
+        this.userListOptions = response.data.items.map(v => v.name)
      })
    }
  }
@@ -271,44 +218,36 @@ export default {
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .title-prompt{
+@import "src/styles/mixin.scss";
+.createPost-container {
+  position: relative;
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+    .editor-container {
+      min-height: 500px;
+      margin: 0 0 30px;
+      .editor-upload-btn-container {
+        text-align: right;
+        margin-right: 10px;
+        .editor-upload-btn {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  .word-counter {
+    width: 40px;
    position: absolute;
-    right: 0px;
-    font-size: 12px;
-    top:10px;
-    color:#ff4949;
-  }
-  .createPost-container {
-    position: relative;
-    .createPost-main-container {
-      padding: 40px 45px 20px 50px;
-      .postInfo-container {
-        position: relative;
-        @include clearfix;
-        margin-bottom: 10px;
-        .postInfo-container-item {
-          float: left;
-        }
-      }
-      .editor-container {
-        min-height: 500px;
-        margin: 0 0 30px;
-        .editor-upload-btn-container {
-            text-align: right;
-            margin-right: 10px;
-            .editor-upload-btn {
-                display: inline-block;
-            }
-        }
-      }
-    }
-    .word-counter {
-      width: 40px;
-      position: absolute;
-      right: -10px;
-      top: 0px;
-    }
+    right: -10px;
+    top: 0px;
  }
+}
 </style>
-
--- a/src/views/example/components/Dropdown/Comment.vue
+++ b/src/views/example/components/Dropdown/Comment.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-dropdown trigger="click" :show-timeout="100">
+    <el-button plain>{{!comment_disabled?'评论已打开':'评论已关闭'}}
+      <i class="el-icon-caret-bottom el-icon--right"></i>
+    </el-button>
+    <el-dropdown-menu class="no-padding" slot="dropdown">
+      <el-dropdown-item>
+        <el-radio-group style="padding: 10px;" v-model="comment_disabled">
+          <el-radio :label="true">关闭评论</el-radio>
+          <el-radio :label="false">打开评论</el-radio>
+        </el-radio-group>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: ['value'],
+  computed: {
+    comment_disabled: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
--- a/src/views/example/components/Dropdown/Platform.vue
+++ b/src/views/example/components/Dropdown/Platform.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
+    <el-button plain>
+      平台({{platforms.length}})
+      <i class="el-icon-caret-bottom el-icon--right"></i>
+    </el-button>
+    <el-dropdown-menu class="no-border" slot="dropdown">
+      <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
+        <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
+          {{item.name}}
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: ['value'],
+  data() {
+    return {
+      platformsOptions: [
+        { key: 'a-platform', name: 'a-platform' },
+        { key: 'b-platform', name: 'b-platform' },
+        { key: 'c-platform', name: 'c-platform' }
+      ]
+    }
+  },
+  computed: {
+    platforms: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/src/views/example/components/Dropdown/SourceUrl.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>
+      外链
+      <i class="el-icon-caret-bottom el-icon--right"></i>
+    </el-button>
+    <el-dropdown-menu class="no-padding no-border" style="width:400px" slot="dropdown">
+      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
+        <el-input placeholder="请输入内容" v-model="source_uri">
+          <template slot="prepend">填写url</template>
+        </el-input>
+      </el-form-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: ['value'],
+  computed: {
+    source_uri: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
--- a/src/views/example/components/Dropdown/index.js
+++ b/src/views/example/components/Dropdown/index.js
@@ -0,0 +1,3 @@
+export { default as CommentDropdown } from './Comment'
+export { default as PlatformDropdown } from './Platform'
+export { default as SourceUrlDropdown } from './SourceUrl'
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -0,0 +1,9 @@
+<template>
+  <p class="warn-content">
+    创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等游览器缓存方案。或者不要使用keep-alive
+    的include，直接缓存所有页面。详情见
+    <a href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
+      target="_blank">文档</a>
+  </p>
+</template>
+
--- a/src/views/example/create.vue
+++ b/src/views/example/create.vue
--- a/src/views/example/edit.vue
+++ b/src/views/example/edit.vue
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="app-container">
+
+    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+      <el-table-column align="center" label="ID" width="80">
+        <template slot-scope="scope">
+          <span>{{scope.row.id}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="180px" align="center" label="Date">
+        <template slot-scope="scope">
+          <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="120px" align="center" label="Author">
+        <template slot-scope="scope">
+          <span>{{scope.row.author}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="100px" label="Importance">
+        <template slot-scope="scope">
+          <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
+        </template>
+      </el-table-column>
+
+      <el-table-column class-name="status-col" label="Status" width="110">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column min-width="300px" label="Title">
+        <template slot-scope="scope">
+
+          <router-link class="link-type" :to="'/example/edit/'+scope.row.id">
+            <span>{{ scope.row.title }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Actions" width="120">
+        <template slot-scope="scope">
+          <router-link :to="'/example/edit/'+scope.row.id">
+            <el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination-container">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
+        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/article'
+
+export default {
+  name: 'articleList',
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 10
+      }
+    }
+  },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.items
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
--- a/src/views/example/table/index.vue
+++ b/src/views/example/table/index.vue
@@ -1,18 +0,0 @@
-<template>
-  <transition name="fade" mode="out-in">
-    <keep-alive :include='cachedViews'>
-      <router-view></router-view>
-    </keep-alive>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'TableMain',
-  computed: {
-    cachedViews() {
-      return this.$store.state.tagsView.cachedViews
-    }
-  }
-}
-</script>
--- a/src/views/excel/exportExcel.vue
+++ b/src/views/excel/exportExcel.vue
@@ -1,9 +1,17 @@
 <template>
- <!-- $t is vue-i18n global function to translate lang -->
+  <!-- $t is vue-i18n global function to translate lang -->
  <div class="app-container">
+
+    <label class="radio-label" style="padding-left:0;">Filename: </label>
    <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
-    <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
-    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
+    <label class="radio-label">Cell Auto Width: </label>
+    <el-radio-group v-model="autoWidth">
+      <el-radio :label="true" border>True</el-radio>
+      <el-radio :label="false" border>False</el-radio>
+    </el-radio-group>
+    <el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
+
+    <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column align="center" label='Id' width="95">
        <template slot-scope="scope">
          {{scope.$index}}
@@ -45,7 +53,8 @@ export default {
      list: null,
      listLoading: true,
      downloadLoading: false,
-      filename: ''
+      filename: '',
+      autoWidth: true
    }
  },
  created() {
@@ -66,7 +75,12 @@ export default {
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list = this.list
        const data = this.formatJson(filterVal, list)
-        excel.export_json_to_excel(tHeader, data, this.filename)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: this.filename,
+          autoWidth: this.autoWidth
+        })
        this.downloadLoading = false
      })
    },
@@ -82,3 +96,13 @@ export default {
  }
 }
 </script>
+
+<style>
+.radio-label {
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  padding: 0 12px 0 30px;
+}
+</style>
+
--- a/src/views/excel/selectExcel.vue
+++ b/src/views/excel/selectExcel.vue
@@ -3,7 +3,7 @@
    <!-- $t is vue-i18n global function to translate lang -->
    <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
    <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button>
-    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
+    <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
      ref="multipleTable">
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column align="center" label='Id' width="95">
@@ -72,7 +72,11 @@ export default {
          const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
          const list = this.multipleSelection
          const data = this.formatJson(filterVal, list)
-          excel.export_json_to_excel(tHeader, data, this.filename)
+          excel.export_json_to_excel({
+            header: tHeader,
+            data,
+            filename: this.filename
+          })
          this.$refs.multipleTable.clearSelection()
          this.downloadLoading = false
        })
--- a/src/views/excel/uploadExcel.vue
+++ b/src/views/excel/uploadExcel.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <upload-excel-component @on-selected-file='selected'></upload-excel-component>
+    <upload-excel-component :on-success='handleSuccess' :before-upload="beforeUpload"></upload-excel-component>
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
      </el-table-column>
@@ -21,9 +21,22 @@ export default {
    }
  },
  methods: {
-    selected(data) {
-      this.tableData = data.results
-      this.tableHeader = data.header
+    beforeUpload(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1
+
+      if (isLt1M) {
+        return true
+      }
+
+      this.$message({
+        message: 'Please do not upload files larger than 1m in size.',
+        type: 'warning'
+      })
+      return false
+    },
+    handleSuccess({ results, header }) {
+      this.tableData = results
+      this.tableHeader = header
    }
  }
 }
--- a/src/views/guide/defineSteps.js
+++ b/src/views/guide/defineSteps.js
@@ -0,0 +1,52 @@
+const steps = [
+  {
+    element: '.hamburger-container',
+    popover: {
+      title: 'Hamburger',
+      description: 'Open && Close sidebar',
+      position: 'bottom'
+    }
+  },
+  {
+    element: '.breadcrumb-container',
+    popover: {
+      title: 'Breadcrumb',
+      description: 'Indicate the current page location',
+      position: 'bottom'
+    }
+  },
+  {
+    element: '.screenfull',
+    popover: {
+      title: 'Screenfull',
+      description: 'Bring the page into fullscreen',
+      position: 'left'
+    }
+  },
+  {
+    element: '.international-icon',
+    popover: {
+      title: 'Switch language',
+      description: 'Switch the system language',
+      position: 'left'
+    }
+  },
+  {
+    element: '.theme-switch',
+    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',
+      position: 'bottom'
+    }
+  }
+]
+
+export default steps
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="app-container">
+    <p class="warn-content">
+      {{$t('guide.description')}}
+      <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
+      </a>
+    </p>
+    <el-button icon='el-icon-question' type="primary" @click.prevent.stop="guide">{{$t('guide.button')}}</el-button>
+  </div>
+</template>
+
+<script>
+import * as Driver from 'driver.js' // import driver.js
+import 'driver.js/dist/driver.min.css' // import driver.js css
+import steps from './defineSteps'
+
+export default {
+  name: 'guide',
+  data() {
+    return {
+      driver: null
+    }
+  },
+  mounted() {
+    this.driver = new Driver()
+  },
+  methods: {
+    guide() {
+      this.driver.defineSteps(steps)
+      this.driver.start()
+    }
+  }
+}
+</script>
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -1,16 +1,18 @@
 <template>
-	<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
-		<sidebar class="sidebar-container"></sidebar>
-		<div class="main-container">
-			<navbar></navbar>
-			<tags-view></tags-view>
-			<app-main></app-main>
-		</div>
-	</div>
+  <div class="app-wrapper" :class="classObj">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
+    <sidebar class="sidebar-container"></sidebar>
+    <div class="main-container">
+      <navbar></navbar>
+      <tags-view></tags-view>
+      <app-main></app-main>
+    </div>
+  </div>
 </template>

 <script>
 import { Navbar, Sidebar, AppMain, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler'

 export default {
  name: 'layout',
@@ -20,20 +22,50 @@ export default {
    AppMain,
    TagsView
  },
+  mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
    }
  }
 }
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
-	@import "src/styles/mixin.scss";
-	.app-wrapper {
-	  @include clearfix;
-	  position: relative;
-	  height: 100%;
-	  width: 100%;
-	}
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
 </style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Pan	f0a01f0fd1	[release] 3.7.2	2018-07-13 13:38:43 +08:00
博文	aa7eab58f9	refactor(SidebarItem): optimizate SidebarItem (#845 ) * refactor(sidebar-item): optimizate SiderbarItem. * chore: update nested examples. * fix: fix a wrong path. * fix: fix a transition bug. * fix: fix a wrong path. * perf: using "router" mode of el-menu. * Revert "perf: using "router" mode of el-menu." This reverts commit `cef02a30b0`. * fix: complement i18n text.	2018-07-13 11:23:06 +08:00
花裤衩	77cb6b1f43	fix[excel]: default filename bug && format code (#857 ) * fix filename bug * format * format	2018-07-11 14:16:28 +08:00
iGoo丶	5fbf1cf5da	修正README.zh-CN.md (#856 )	2018-07-11 00:18:34 +08:00
Pan	6a5197ad51	perf[css]: refine style	2018-07-10 13:22:16 +08:00
Pan	9b7a9a64e5	fix[css]: css bug in mobile #852	2018-07-10 13:02:19 +08:00
Pan	89ce53e185	fix[TagsView]: fix contextmenu position bug #850	2018-07-09 17:25:45 +08:00
Pan	9e04f58163	perf[login]: i18n of input placeholder #844	2018-07-07 01:44:29 +08:00
花裤衩	d98c5032f8	refine style (#843 ) * refine style * refine 404 style * refine	2018-07-06 11:19:53 +08:00
ZYSzys	a575670cef	perf[ArticleDetail]: refine el-col :span (#841 )	2018-07-06 10:07:43 +08:00
花裤衩	44fa96f142	chore: add lint-staged (#818 )	2018-07-03 16:31:29 +08:00
Pan	e4481a9d34	fix[build.js]: fixed build bug in preview mode #819	2018-07-02 14:02:42 +08:00
Pan	572a2d9c34	perf[Tinymce]: set nonbreaking_force_tab to true	2018-06-30 17:26:31 +08:00
Pan	5070e20dea	update docs	2018-06-28 13:20:44 +08:00
Pan	59789d92cf	perf[uploadExcel]: fix typo	2018-06-28 09:53:55 +08:00
Pan	775f6f5f3a	[release] 3.7.1	2018-06-27 10:37:49 +08:00
Pan	2687b2eb3c	perf[v-loading]: remove .body modifier #779	2018-06-26 17:10:21 +08:00
Pan	76327a8f26	update doc	2018-06-25 15:04:40 +08:00
Pan	03b708870b	update doc	2018-06-25 14:54:02 +08:00
花裤衩	bdc31cea1a	chore: use Runtime-only (#799 ) Detail see [Runtime-Compiler-vs-Runtime-only](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only)	2018-06-25 11:17:47 +08:00
Liu Xinyu	ae2ca072f5	fix: typo in readme (#798 )	2018-06-25 10:09:19 +08:00
花裤衩	d995cdb332	add[example]: add nested routes example (#789 )	2018-06-21 14:26:25 +08:00
Pan	cbc3ddd827	perf[uploadExcel]: add beforeUpload hock	2018-06-20 13:29:57 +08:00
HiiTea	9cf00fd63a	fix typo (#784 )	2018-06-19 17:53:30 +08:00
Pan	03691739e1	add:[permission]: add checkPermission function	2018-06-19 17:52:05 +08:00
Pan	3f479664b6	perf[utils.js]: Add code comments to deepClone and remove redundant code	2018-06-19 11:26:46 +08:00
临书	cbee7b6f20	fix[TagView-component]: loss route querystring when operating tags (#768 )	2018-06-13 16:57:07 +08:00
临书	2a590a2087	Support route query in TagView (#765 )	2018-06-12 13:53:56 +08:00
Pan	c93fcefe54	perf[UploadExcel-component]: tweaks	2018-06-12 10:53:08 +08:00
Pan	9f8ac37497	perf[UploadExcel-component]: set readerData to promise	2018-06-12 09:56:53 +08:00
Pan	8c685cc4c6	doc: add code comments to request.js	2018-06-11 13:04:11 +08:00
kuviki	e40fd27775	Fix typo (#747 )	2018-06-07 13:26:10 +08:00
Pan	f3ccd9f04e	perf[Tinymce]: remove legacyoutput #745	2018-06-06 19:46:31 +08:00
Pan	914a4ec62c	chore: assetsPublicPath	2018-06-04 13:07:53 +08:00
Pan	739aef4387	Remove redundant code	2018-06-01 17:04:33 +08:00
Insua	a7942636c6	fix(Tinymce): When content is null,set content to '' to avoid error (#732 ) When get rich editor value(null) from backend,it will occur error ``` Error in nextTick: "TypeError: Cannot read property 'replace' of null" ``` So I set val to '' to avoid it	2018-06-01 15:38:08 +08:00
Pan	31d9da8b9f	[release] 3.7.0	2018-06-01 14:11:02 +08:00
Pan	600e75d0a2	bump jsonlint #728	2018-06-01 13:34:45 +08:00
Pan	9ba1ea6933	perf[el-dragDialog]: add dragDialog callback function	2018-06-01 10:38:27 +08:00
Pan	320e941d9a	fix[Sticky]: fixed bug in resize #725	2018-05-31 17:16:24 +08:00
花裤衩	d0f6d3f1f6	chore: use babel-plugin-dynamic-import-node to lazy-loading (#727 ) detail see https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/lazy-loading?id=%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD	2018-05-31 16:53:08 +08:00
Pan	0375542009	fix[Sticky]: fixed bug in resize #724	2018-05-31 13:22:12 +08:00
Pan	03e5f762b3	fix[Sticky]: fixed bug in resize #721	2018-05-31 10:50:38 +08:00
Heedong Im	bd0227feed	Upgrade vue-loader (#723 ) The vue-loader build error caused by Prettier have been fixed	2018-05-31 10:08:00 +08:00
Pan	20aad46416	fix[permission]: directive demo typo	2018-05-30 15:27:44 +08:00
花裤衩	4fc25241fe	refactor example demo (#713 ) * refactor: Adjust the example directory structure * perf form demo * refine editor-slide-upload css * refine demo	2018-05-30 15:25:08 +08:00
Pan	6327869106	perf[transition]: refine transition animation	2018-05-29 14:31:55 +08:00
Pan	c861dd10cf	fix: [404.vue]: return-home button href bug	2018-05-28 15:33:47 +08:00
花裤衩	0a196f79ba	Add guide page #534 (#707 ) detail see #534	2018-05-28 14:36:06 +08:00
Pan	d2d323bb02	fix: [sidebar.css] : style bug in windows #702	2018-05-28 11:01:07 +08:00
Pan	66613f0373	perf[filter]: remove duplicate code #661	2018-05-12 23:17:14 +08:00
Pan	6795c26d02	fix[Tinymce]: custom-btn bug in fullscreen	2018-05-09 14:36:17 +08:00
花裤衩	597df4844a	feature[permission]: add v-permission (#653 )	2018-05-08 22:15:34 +08:00
Pan	1e103cf151	perf[dashboard]: add resonsive dashboard	2018-05-05 15:42:46 +08:00
花裤衩	99d53ee0ca	refactor[ScrollBar]: use el-scrollbar (#646 )	2018-05-05 15:26:08 +08:00
Pan	f9d510ea78	perf[el-dragDialog]: use curring	2018-05-04 10:26:29 +08:00
Pan	9fbb028124	perf[permission]: add the verification of roles	2018-05-02 17:37:47 +08:00
Pan	9b5f0160af	[release] 3.6.6	2018-05-02 14:46:31 +08:00
花裤衩	0e4ea0871c	feat[sidebar]: add resonsive sidebar (#636 )	2018-05-02 14:43:20 +08:00
Pan	88429bd809	Fix typo	2018-05-02 10:29:21 +08:00
xVirus	62a9565f86	siderbar.css add namespace (#622 ) 1. 原来的普通导航栏样式会使用 siderbar 的样式，背景黑底。 2. 修改后，sidebar 样式不变，普通导航栏可以正常使用。	2018-05-02 10:27:48 +08:00
Pan	f663b23b29	perf[el-dragDialog]: add the verification of moving edges	2018-04-30 14:58:08 +08:00
Pan	afd255d5ba	fix[el-dargDialog]: fixed drag bug in IE	2018-04-29 22:38:59 +08:00
Pan	b7c8079350	doc: update package.json	2018-04-26 17:31:37 +08:00
Yuga Sun	543a9928cf	feat: add draggable kanban using vue-draggable (#625 )	2018-04-25 22:05:07 +08:00
Pan	8f37950589	perf[Tinymce]: remove autosize plugin	2018-04-19 18:33:12 +08:00
Pan	6821eac35b	fix[complexTable]: fixed export_json_to_excel bug	2018-04-19 13:24:35 +08:00
Pan	cc5e62d5f5	fix[contextmenu]: adjust contextmenu z-index	2018-04-18 17:00:43 +08:00
Pan	0cccc636b8	perf[sidebar.css]: perf collapse transition Pan committed	2018-04-18 15:24:38 +08:00
Pan	563ce873bd	perf[Tinymce]: remove fullpage plugin	2018-04-17 10:19:01 +08:00
Pan	44e94b2d16	doc: add gitter	2018-04-16 18:09:53 +08:00
Pan	a160848367	fix typo	2018-04-15 21:01:03 +08:00
Pan	7099e6a3eb	doc: update readme	2018-04-13 13:36:07 +08:00
花裤衩	14fee27a92	feature: add drag dialog (#477 )	2018-04-13 13:32:53 +08:00
Pan	7003a79ef6	[release] 3.6.5	2018-04-13 10:28:52 +08:00
花裤衩	c5faa63ee5	Update to Element ui@2.3.0 (#596 ) * update element-ui && refactor sidebar.css * format	2018-04-13 10:23:05 +08:00
weiwei Wang	d29a9486a2	[bug]: 修复401页面dialog里的动图在小屏不居中 (#585 )	2018-04-11 10:05:35 +08:00
weiqinl	01442ce4d7	Fixed doc (#578 ) 优雅的使用 icon 此文档地址更新	2018-04-09 09:39:04 +08:00
Pan	f28a7149fb	fixed[Tinymce]: remove bbcode plugin	2018-04-07 00:38:32 +08:00
Pan	51ad902d8f	css[elment-ui.scss]: perf css	2018-04-07 00:35:18 +08:00
linlinjava	3cff6dcf4c	fix[BackToTop]: 数组/对象的默认值应当由一个工厂函数返回。 (#571 )	2018-04-06 12:40:58 +08:00
Pan	afe975b3c2	fix[UploadExcel]: fix can't select the same excel	2018-03-30 17:08:01 +08:00
Pan	d0eebf83c4	[release] 3.6.4	2018-03-26 13:55:28 +08:00
花裤衩	a55b149b27	perf[excel]: refactor excel (#536 )	2018-03-26 13:54:19 +08:00
Pan	fc19121311	fix[TodoList]: fixed css bug with z-index #535	2018-03-26 13:23:42 +08:00
Pan	de06619266	fix:[menu]: some bug in only has one showing child #484	2018-03-22 13:55:39 +08:00
Yuga Sun	88c28f5d7e	perf: change in operation to Object.keys (#518 )	2018-03-20 17:27:42 +08:00
Yuga Sun	26b84847dd	fix: change tab char to 2 spaces (#522 )	2018-03-20 17:21:39 +08:00
Pan	3cc3e134c2	perf:[upload]: refine component name	2018-03-19 17:34:28 +08:00
Pan	2afb1dfabb	fix:[ImageCropper]: $emit close	2018-03-19 17:33:23 +08:00
Pan	5fe3d70246	perf[editor-dashboard]: refine css	2018-03-19 17:28:24 +08:00
Pan	4aa9345d90	fix[Tinmyce]: fiexd fullscreen ui bug	2018-03-19 17:19:13 +08:00
amedora	0fcbf4b53b	fix: misplaced script tag (#507 )	2018-03-14 13:13:58 +08:00
Pan	8142c06a99	[release] 3.6.3	2018-03-14 09:51:53 +08:00
Pan	c398ee0ddc	perf[Charts]: add resize mixin	2018-03-13 18:36:11 +08:00
Pan	a633729215	perf[i18n]: TagsView contextmenu	2018-03-13 18:18:27 +08:00
Pan	f9c4dd7af3	Fix typo	2018-03-13 18:01:42 +08:00
Pan	5f4ce7fc71	update[ImageCropper]: update vue-image-crop-upload to new version	2018-03-13 17:57:05 +08:00
Pan	01928cd4ec	fix[Icons]: copy bug	2018-03-08 17:27:00 +08:00
Pan	27effcc54c	perf[Tinymce]: getContent	2018-03-08 16:51:09 +08:00
Pan	7cacd5a4ac	perf[Tinymce]: add SetContent listener	2018-03-07 09:57:45 +08:00
Pan	31b7fa6f55	perf[Tinymce]: set dialog append-to-body	2018-03-06 17:09:56 +08:00
Pan	2cb6211cd6	Update README.md	2018-03-05 17:21:19 +08:00
Yusril Herlian Syah	ebb0b4a0ff	Fix typo (#479 )	2018-03-02 15:23:32 +08:00
happystory	c356695f2e	perf[typo]: style guide fixe (#476 )	2018-03-01 11:43:47 +08:00
花裤衩	112e3b977c	Update README.md	2018-03-01 10:41:09 +08:00
Pan	ae41459cb1	type	2018-02-27 10:21:53 +08:00
Pan	aa592cfb69	pref[hamburger]: remove redundant class	2018-02-26 11:23:06 +08:00
Pan	9205a85c2d	perf[pagination]: remove current-page sync do not use sync	2018-02-22 18:35:51 +08:00
Pan	6938dd3caf	Revert "perf[pagination]: Avoid repeating trigger requests" This reverts commit `398d59d78a`.	2018-02-22 18:29:09 +08:00
Pan	398d59d78a	perf[pagination]: Avoid repeating trigger requests	2018-02-07 11:06:28 +08:00
Pan	dc35d1ae92	[doc]: fixed typo	2018-02-06 18:46:47 +08:00
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1525760397212" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2919" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M860 504c-19.9 0-36 16.1-36 36 0 1.4 0.1 2.7 0.2 4h-0.2v344H136V200h376c19.9 0 36-16.1 36-36s-16.1-36-36-36H136c-39.8 0-72 32.2-72 72v688c0 39.8 32.2 72 72 72h688c39.8 0 72-32.2 72-72V544h-0.2c0.1-1.3 0.2-2.6 0.2-4 0-19.9-16.1-36-36-36z" p-id="2920"></path><path d="M1002.7 100.3L923.4 21c-28.1-28.1-73.9-27.9-102 0.2L424.2 418.4c-2.9 2.9-5.2 6.4-6.8 10.2L317.6 664c-5.6 13.2-1.7 26.5 6.8 35.1 8.5 8.6 21.9 12.5 35.2 6.9l235.5-99.7c3.8-1.6 7.2-3.9 10.2-6.8l397.2-397.2c28.1-28.1 28.3-73.9 0.2-102zM559.8 543l-137.4 58.2 58.2-137.4L759.4 185l79.2 79.2L559.8 543z m391.7-391.7l-62 62-79.2-79.2 62-62 0.2-0.2 79.2 79.2-0.2 0.2z" p-id="2921"></path></svg>
				`@@ -1 +0,0 @@`
				`module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+`
				`@@ -1 +0,0 @@`
				`module.exports = file => () => import('@/views/' + file + '.vue')`