[release] 3.7.0

bump jsonlint #728
perf[el-dragDialog]: add dragDialog callback function
2018-06-01 14:11:02 +08:00 · 2018-06-01 13:34:45 +08:00 · 2018-06-01 10:38:27 +08:00 · 2018-05-31 17:16:24 +08:00 · 2018-05-31 16:53:08 +08:00 · 2018-05-31 13:22:12 +08:00
75 changed files with 1305 additions and 521 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/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
    <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">
+    <img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
@@ -30,6 +30,8 @@ English | [简体中文](./README.zh-CN.md)

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

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

 - [Donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
@@ -39,7 +41,7 @@ English | [简体中文](./README.zh-CN.md)
 - 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+**
+**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**

 ## Preparation

@@ -70,6 +72,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
 - Drag and drop list
 - Svg Sprite
 - Dashboard
+- Guide Page
 - Mock data
 - Echarts
 - Clipboard
@@ -86,6 +89,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
 - Form example
 - Two-step login
 - SplitPane
+- Drag Dialog
 - Dropzone
 - Sticky
 - CountTo
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -7,7 +7,7 @@
    <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">
+    <img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
@@ -30,6 +30,8 @@

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

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

 - [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate)
@@ -38,7 +40,7 @@
 - 模板建议使用: [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+**
+**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**

 ## 前序准备

@@ -52,7 +54,6 @@
 - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
 - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)

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

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

@@ -83,6 +84,7 @@
 - 列表拖拽
 - Svg Sprite 图标
 - Dashboard
+- 引导页
 - 本地mock数据
 - Echarts 图表
 - Clipboard(剪贴复制)
@@ -99,6 +101,7 @@
 - Form example
 - 二步登录
 - SplitPane
+- 拖拽 Dialog
 - Dropzone
 - Sticky
 - CountTo
--- a/package.json
+++ b/package.json
@@ -1,28 +1,42 @@
 {
  "name": "vue-element-admin",
-  "version": "3.6.4",
+  "version": "3.7.0",
  "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"
  },
+  "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",
+    "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",
@@ -37,7 +51,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 +61,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",
@@ -81,7 +96,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/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/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/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
@@ -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,7 +43,8 @@ export default {
    return {
      hasChange: false,
      hasInit: false,
-      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+      tinymceId: this.id || 'vue-tinymce-' + +new Date(),
+      fullscreen: false
    }
  },
  watch: {
@@ -91,6 +92,11 @@ export default {
            this.hasChange = true
            this.$emit('input', editor.getContent())
          })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
+          })
        }
        // 整合七牛上传
        // images_dataimg_filter(img) {
@@ -168,6 +174,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 legacyoutput 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/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -1,6 +1,6 @@
 <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" class="c-hide" @change="handkeFileChange">
    <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>
@@ -51,7 +51,9 @@ export default {
    handkeFileChange(e) {
      const files = e.target.files
      const itemFile = files[0] // only use files[0]
+      if (!itemFile) return
      this.readerData(itemFile)
+      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
    },
    readerData(itemFile) {
      const reader = new FileReader()
--- 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/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,6 +21,8 @@ export default {
    countTo: 'CountTo',
    componentMixin: 'Mixin',
    backToTop: 'BackToTop',
+    dragDialog: 'Drag Dialog',
+    dragKanban: 'Drag Kanban',
    charts: 'Charts',
    keyboardChart: 'Keyboard Chart',
    lineChart: 'Line Chart',
@@ -32,8 +37,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 +78,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.',
--- 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,6 +21,8 @@ export default {
    countTo: 'CountTo',
    componentMixin: '小组件',
    backToTop: '返回顶部',
+    dragDialog: '拖拽 Dialog',
+    dragKanban: '可拖拽看板',
    charts: '图表',
    keyboardChart: '键盘图表',
    lineChart: '折线图',
@@ -32,8 +37,9 @@ export default {
    customTreeTable: '自定义树表',
    tab: 'Tab',
    form: '表单',
-    createForm: '创建表单',
-    editForm: '编辑表单',
+    createArticle: '创建文章',
+    editArticle: '编辑文章',
+    articleList: '文章列表',
    errorPages: '错误页面',
    page401: '401',
    page404: '404',
@@ -72,6 +78,10 @@ export default {
    roles: '你的权限',
    switchRoles: '切换权限'
  },
+  guide: {
+    description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
+    button: '打开引导'
+  },
  components: {
    documentation: '文档',
    tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
--- 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
@@ -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/index.js
+++ b/src/router/index.js
@@ -1,13 +1,10 @@
 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
@@ -28,17 +25,17 @@ import Layout from '../views/layout/Layout'
  }
 **/
 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,55 @@ 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: '/form',
-    component: Layout,
-    redirect: 'noredirect',
-    name: 'form',
-    meta: {
-      title: 'form',
-      icon: 'form'
-    },
-    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: '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' }}
    ]
  },

@@ -188,8 +209,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 +218,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 +231,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 +243,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/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
@@ -73,3 +73,10 @@
     }
   }
 }
+
+//dropdown
+ .el-dropdown-menu{
+  a{
+    display: block
+  }
+}
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -2,99 +2,117 @@
  // 主体区域
  .main-container {
    min-height: 100%;
-    transition: margin-left 0.28s;
+    transition: margin-left .28s;
    margin-left: 180px;
-  } // 侧边栏
+  }
+  // 侧边栏
  .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
@@ -261,3 +261,7 @@ export function deepClone(source) {
  })
  return targetObj
 }
+
+export function uniqueArr(arr) {
+  return Array.from(new Set(arr))
+}
--- 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/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/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -1,6 +1,6 @@
 <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}}
      </template>
@@ -42,7 +42,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
@@ -30,10 +30,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: 5}" 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: 5}" style="margin-bottom:30px;" >
        <box-card></box-card>
      </el-col>
    </el-row>
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -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/errorPage/401.vue
+++ b/src/views/errorPage/401.vue
@@ -65,6 +65,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
@@ -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>
--- 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>
+
+          <Warning />
+
          <el-col :span="21">
            <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-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="8">
+                  <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/#/zh-cn/tags-view?id=%E7%BC%93%E5%AD%98%E4%B8%8D%E9%80%82%E5%90%88%E5%9C%BA%E6%99%AF"
+      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/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,5 +1,6 @@
 <template>
-  <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
+  <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>
@@ -11,6 +12,7 @@

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

 export default {
  name: 'layout',
@@ -20,9 +22,25 @@ 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,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
    }
  }
 }
@@ -36,4 +54,13 @@ export default {
    height: 100%;
    width: 100%;
  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
 </style>
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -1,8 +1,8 @@
 <template>
  <section class="app-main" style="min-height: 100%">
-    <transition name="fade" mode="out-in">
+    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
-        <router-view></router-view>
+        <router-view :key="key"></router-view>
      </keep-alive>
    </transition>
  </section>
@@ -14,10 +14,10 @@ export default {
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
+    },
+    key() {
+      return this.$route.fullPath
    }
-    // key() {
-    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
-    // }
  }
 }
 </script>
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -2,17 +2,18 @@
  <div class="menu-wrapper">
    <template v-for="item in routes" v-if="!item.hidden&&item.children">

-      <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
+      <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
+        :key="item.children[0].name">
        <el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
-          <span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
+          <span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span>
        </el-menu-item>
      </router-link>

      <el-submenu v-else :index="item.name||item.path" :key="item.name">
        <template slot="title">
          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-          <span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
+          <span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
        </template>

        <template v-for="child in item.children" v-if="!child.hidden">
@@ -21,7 +22,7 @@
          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
            <el-menu-item :index="item.path+'/'+child.path">
              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
-              <span v-if="child.meta&&child.meta.title">{{generateTitle(child.meta.title)}}</span>
+              <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
            </el-menu-item>
          </router-link>
        </template>
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -1,18 +1,25 @@
 <template>
-  <scroll-bar>
-    <el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
+  <el-scrollbar wrapClass="scrollbar-wrapper">
+    <el-menu
+      mode="vertical"
+      :show-timeout="200"
+      :default-active="$route.path"
+      :collapse="isCollapse"
+      background-color="#304156"
+      text-color="#bfcbd9"
+      active-text-color="#409EFF"
+    >
      <sidebar-item :routes="permission_routers"></sidebar-item>
    </el-menu>
-  </scroll-bar>
+  </el-scrollbar>
 </template>

 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
-import ScrollBar from '@/components/ScrollBar'

 export default {
-  components: { SidebarItem, ScrollBar },
+  components: { SidebarItem },
  computed: {
    ...mapGetters([
      'permission_routers',
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -59,7 +59,7 @@ export default {
      return false
    },
    isActive(route) {
-      return route.path === this.$route.path || route.name === this.$route.name
+      return route.path === this.$route.path
    },
    addViewTags() {
      const route = this.generateRoute()
@@ -156,7 +156,7 @@ export default {
  .contextmenu {
    margin: 0;
    background: #fff;
-    z-index: 2;
+    z-index: 100;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
--- a/src/views/layout/mixin/ResizeHandler.js
+++ b/src/views/layout/mixin/ResizeHandler.js
@@ -0,0 +1,41 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 1024
+const RATIO = 3
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('closeSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('toggleDevice', 'mobile')
+      store.dispatch('closeSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - RATIO < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('closeSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
--- a/src/views/permission/components/SwitchRoles.vue
+++ b/src/views/permission/components/SwitchRoles.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
+    {{$t('permission.switchRoles')}}：
+    <el-radio-group v-model="switchRoles">
+      <el-radio-button label="editor"></el-radio-button>
+      <el-radio-button label="admin"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    roles() {
+      return this.$store.getters.roles
+    },
+    switchRoles: {
+      get() {
+        return this.roles[0]
+      },
+      set(val) {
+        this.$store.dispatch('ChangeRoles', val).then(() => {
+          this.$emit('change')
+        })
+      }
+    }
+  }
+}
+</script>
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+    <div :key="key" style="margin-top:30px;">
+      <span v-permission="['admin']" class="permission-alert">
+        Only
+        <el-tag class="permission-tag" size="small">admin</el-tag> can see this
+      </span>
+      <span v-permission="['editor']" class="permission-alert">
+        Only
+        <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+      </span>
+      <span v-permission="['admin','editor']" class="permission-alert">
+        Both
+        <el-tag class="permission-tag" size="small">admin</el-tag> and
+        <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import permission from '@/directive/permission/index.js' // 权限判断指令
+import SwitchRoles from './components/SwitchRoles'
+
+export default{
+  name: 'directivePermission',
+  components: { SwitchRoles },
+  directives: { permission },
+  data() {
+    return {
+      key: 1 // 为了能每次切换权限的时候重新初始化指令
+    }
+  },
+  methods: {
+    handleRolesChange() {
+      this.key++
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.app-container {
+  /deep/ .permission-alert {
+    width: 320px;
+    margin-top: 30px;
+    background-color: #f0f9eb;
+    color: #67c23a;
+    padding: 8px 16px;
+    border-radius: 4px;
+    display: block;
+  }
+  /deep/ .permission-tag{
+    background-color: #ecf5ff;
+  }
+}
+</style>
+
--- a/src/views/permission/index.vue
+++ b/src/views/permission/index.vue
@@ -1,34 +0,0 @@
-<template>
-  <div class="app-container">
-    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
-    {{$t('permission.switchRoles')}}：
-    <el-radio-group v-model="switchRoles">
-      <el-radio-button label="editor"></el-radio-button>
-    </el-radio-group>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default{
-  name: 'permission',
-  data() {
-    return {
-      switchRoles: ''
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'roles'
-    ])
-  },
-  watch: {
-    switchRoles(val) {
-      this.$store.dispatch('ChangeRoles', val).then(() => {
-        this.$router.push({ path: '/permission/index?' + +new Date() })
-      })
-    }
-  }
-}
-</script>
--- a/src/views/permission/page.vue
+++ b/src/views/permission/page.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+  </div>
+</template>
+
+<script>
+import SwitchRoles from './components/SwitchRoles'
+
+export default{
+  name: 'pagePermission',
+  components: { SwitchRoles },
+  methods: {
+    handleRolesChange() {
+      this.$router.push({ path: '/permission/index?' + +new Date() })
+    }
+  }
+}
+</script>
--- a/src/views/example/tab/components/tabPane.vue
+++ b/src/views/example/tab/components/tabPane.vue
--- a/src/views/example/tab/index.vue
+++ b/src/views/example/tab/index.vue
@@ -1,6 +1,8 @@
 <template>
  <div class="tab-container">
    <el-tag>mounted times ：{{createdTimes}}</el-tag>
+    <el-alert style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" :closable="false">
+    </el-alert>
    <el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
      <el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key='item.key' :name="item.key">
        <keep-alive>
--- a/src/views/example/table/complexTable.vue
+++ b/src/views/example/table/complexTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
      </el-input>
@@ -335,7 +335,11 @@ export default {
        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
        const data = this.formatJson(filterVal, this.list)
-        excel.export_json_to_excel(tHeader, data, 'table-list')
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: 'table-list'
+        })
        this.downloadLoading = false
      })
    },
--- a/src/views/example/table/dragTable.vue
+++ b/src/views/example/table/dragTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
    <!-- Note that row-key is necessary to get a correct row order. -->
    <el-table :data="list" row-key="id"  v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

--- a/src/views/example/table/dynamicTable/fixedThead.vue
+++ b/src/views/example/table/dynamicTable/fixedThead.vue
--- a/src/views/example/table/dynamicTable/index.vue
+++ b/src/views/example/table/dynamicTable/index.vue
--- a/src/views/example/table/dynamicTable/unfixedThead.vue
+++ b/src/views/example/table/dynamicTable/unfixedThead.vue
--- a/src/views/example/table/inlineEditTable.vue
+++ b/src/views/example/table/inlineEditTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">

    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

--- a/src/views/example/table/treeTable/customEval.js
+++ b/src/views/example/table/treeTable/customEval.js
--- a/src/views/example/table/treeTable/customTreeTable.vue
+++ b/src/views/example/table/treeTable/customTreeTable.vue
--- a/src/views/example/table/treeTable/treeTable.vue
+++ b/src/views/example/table/treeTable/treeTable.vue
Author	SHA1	Message	Date
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
				`@@ -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>