[release] 3.3.0

doc: update readme
perf[tags-view]:refine the style && format code
2017-12-13 18:35:38 +08:00 · 2017-12-13 18:35:07 +08:00 · 2017-12-13 18:33:12 +08:00 · 2017-12-13 17:43:03 +08:00 · 2017-12-13 13:52:14 +08:00 · 2017-12-12 18:14:31 +08:00
48 changed files with 715 additions and 458 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+node_js: stable
+script: npm run test
+notifications:
+  email: false
--- a/README.md
+++ b/README.md
@@ -5,15 +5,16 @@
 # vue-element-admin

 [![vue](https://img.shields.io/badge/vue-2.5.9-brightgreen.svg)](https://github.com/vuejs/vue)
-[![element-ui](https://img.shields.io/badge/element--ui-2.0.5-brightgreen.svg)](https://github.com/ElemeFE/element)
+[![element-ui](https://img.shields.io/badge/element--ui-2.0.7-brightgreen.svg)](https://github.com/ElemeFE/element)
+[![Build Status](https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master)](https://travis-ci.org/PanJiaChen/vue-element-admin)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
 [![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()

-A magical vue admin.
+**A magical vue admin.**

 - [线上地址](http://panjiachen.github.io/vue-element-admin)

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

 - [English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md)

@@ -38,14 +39,15 @@ A magical vue admin.
 - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
 - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
 - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- - [手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- - [手摸手，带你封装一个vue component](https://segmentfault.com/a/1190000009090836)
+ - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+ - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
+ - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)

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

 或者可以加入该 **[圈子](https://jianshiapp.com/circles/1209)** 讨论问题

- **如有问题请先看上述文章和Wiki，若不能满足，欢迎 issue 和 pr**
+ **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**

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

@@ -60,7 +62,7 @@ A magical vue admin.
 - 动态面包屑
 - 国际化多语言
 - 多种动态换肤
- 快捷导航(标签页)
+- 快捷导航(标签页 支持右键操作)
 - 富文本编辑器
 - Markdown编辑器
 - JSON编辑器
@@ -96,7 +98,8 @@ A magical vue admin.

    # 安装依赖
    npm install
-    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
+    
+    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
    npm install --registry=https://registry.npm.taobao.org

    # 本地开发 开启服务
@@ -113,6 +116,8 @@ A magical vue admin.
    npm run build:prod
 ```

+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
+
 ## 目录结构
 ```shell
 ├── build                      // 构建相关  
@@ -149,9 +154,6 @@ A magical vue admin.
 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).

-## 状态管理
-后台只有user和app配置相关状态使用vuex存在全局，其它数据都由每个业务页面自己管理。
-
 ## [查看更多demo](http://panjiachen.github.io/vue-element-admin)
 ![](https://wpimg.wallstcn.com/1bc334a6-32a8-4f29-a037-ac3f5ce32588.png)

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-element-admin",
-  "version": "3.0.0",
+  "version": "3.3.0",
  "description": "A Vue.js admin",
  "author": "Pan <panfree23@gmail.com>",
  "license": "MIT",
@@ -10,7 +10,8 @@
    "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",
    "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js",
-    "lint": "eslint --ext .js,.vue src"
+    "lint": "eslint --ext .js,.vue src",
+    "test": "npm run lint"
  },
  "dependencies": {
    "axios": "0.17.1",
@@ -18,7 +19,7 @@
    "codemirror": "5.31.0",
    "dropzone": "5.2.0",
    "echarts": "3.8.5",
-    "element-ui": "2.0.5",
+    "element-ui": "2.0.7",
    "file-saver": "1.3.3",
    "font-awesome": "4.7.0",
    "js-cookie": "2.2.0",
--- a/src/api/article.js
+++ b/src/api/article.js
@@ -23,3 +23,18 @@ export function fetchPv(pv) {
  })
 }

+export function createArticle(data) {
+  return request({
+    url: '/article/create',
+    method: 'post',
+    data
+  })
+}
+
+export function updateArticle(data) {
+  return request({
+    url: '/article/update',
+    method: 'post',
+    data
+  })
+}
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -10,6 +10,8 @@
 </template>

 <script>
+import { generateTitle } from '@/utils/i18n'
+
 export default {
  created() {
    this.getBreadcrumb()
@@ -25,6 +27,7 @@ export default {
    }
  },
  methods: {
+    generateTitle,
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)
      const first = matched[0]
@@ -32,9 +35,6 @@ export default {
        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
      }
      this.levelList = matched
-    },
-    generateTitle(title) {
-      return this.$t('route.' + title)
    }
  }
 }
--- a/src/components/ErrLog/index.vue
+++ b/src/components/ErrLog/index.vue
@@ -1,56 +0,0 @@
-<template>
-	<div>
-		<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
-			<el-button size="small" type="primary">
-				<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
-				  xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
-					<path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
-					  p-id="1864"></path>
-				</svg>
-			</el-button>
-		</el-badge>
-		<el-dialog title="bug日志" :visible.sync="dialogTableVisible">
-			<el-table :data="logsList">
-				<el-table-column label="message">
-					<template slot-scope="scope">
-						<div>msg:{{ scope.row.err.message }}</div>
-						<br/>
-						<div>url: {{scope.row.url}}</div>
-					</template>
-				</el-table-column>
-				<el-table-column label="stack">
-					<template slot-scope="scope">
-						{{ scope.row.err.stack}}
-					</template>
-				</el-table-column>
-
-			</el-table>
-		</el-dialog>
-	</div>
-</template>
-
-<script>
-export default {
-  name: 'errLog',
-  props: {
-    logsList: {
-      type: Array
-    }
-  },
-  data() {
-    return {
-      dialogTableVisible: false
-    }
-  }
-}
-</script>
-
-<style scoped>
-.bug-svg {
-	width: 1em;
-	height: 1em;
-	vertical-align: -0.15em;
-	fill: currentColor;
-	overflow: hidden;
-}
-</style>
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
+      <el-button size="small" type="danger" class="bug-btn">
+        <svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
+          xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
+          <path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
+            p-id="1864"></path>
+        </svg>
+      </el-button>
+    </el-badge>
+
+    <el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
+      <el-table :data="logsList" border>
+        <el-table-column label="Message">
+          <template slot-scope="scope">
+            <div>
+              <span class="message-title">Msg:</span>
+              <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
+            </div>
+            <br/>
+            <div>
+              <span class="message-title" style="padding-right: 10px;">Info: </span>
+              <el-tag type="warning">{{scope.row.vm.$vnode.tag}} error in {{scope.row.info}}</el-tag>
+            </div>
+            <br/>
+            <div>
+              <span class="message-title" style="padding-right: 16px;">Url: </span>
+              <el-tag type="success">{{scope.row.url}}</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="Stack">
+          <template slot-scope="scope">
+            {{ scope.row.err.stack}}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'errorLog',
+  props: {
+    logsList: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      dialogTableVisible: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bug-btn.el-button--small {
+  padding: 9px 10px;
+}
+.bug-svg {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+.message-title {
+  font-size: 16px;
+  color: #333;
+  font-weight: bold;
+  padding-right: 8px;
+}
+</style>
--- a/src/components/ScrollBar/index.vue
+++ b/src/components/ScrollBar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
@@ -8,6 +8,7 @@

 <script>
 const delta = 15
+
 export default {
  name: 'scrollBar',
  data() {
@@ -17,19 +18,19 @@ export default {
  },
  methods: {
    handleScroll(e) {
-      e.preventDefault()
+      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 (e.wheelDelta > 0) {
-        this.top = Math.min(0, this.top + e.wheelDelta)
+      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 + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
+            this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
          }
        } else {
          this.top = 0
--- a/src/components/ScrollPane/index.vue
+++ b/src/components/ScrollPane/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
      <slot></slot>
    </div>
@@ -7,6 +7,8 @@
 </template>

 <script>
+const padding = 15 // tag's padding
+
 export default {
  name: 'scrollPane',
  data() {
@@ -16,24 +18,42 @@ export default {
  },
  methods: {
    handleScroll(e) {
-      e.preventDefault()
+      const eventDelta = e.wheelDelta || -e.deltaY * 3
      const $container = this.$refs.scrollContainer
      const $containerWidth = $container.offsetWidth
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperWidth = $wrapper.offsetWidth
-      if (e.wheelDelta > 0) {
-        this.left = Math.min(0, this.left + e.wheelDelta)
+
+      if (eventDelta > 0) {
+        this.left = Math.min(0, this.left + eventDelta)
      } else {
-        if ($containerWidth - 100 < $wrapperWidth) {
-          if (this.left < -($wrapperWidth - $containerWidth + 100)) {
+        if ($containerWidth - padding < $wrapperWidth) {
+          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
            this.left = this.left
          } else {
-            this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - 100)
+            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
          }
        } else {
          this.left = 0
        }
      }
+    },
+    moveToTarget($target) {
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      const $targetLeft = $target.offsetLeft
+      const $targetWidth = $target.offsetWidth
+
+      if ($targetLeft < -this.left) {
+        // tag in the left
+        this.left = -$targetLeft + padding
+      } else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
+        // tag in the current view
+        // eslint-disable-line
+      } else {
+        // tag in the right
+        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
+      }
    }
  }
 }
@@ -43,6 +63,8 @@ export default {
 .scroll-container {
  white-space: nowrap;
  position: relative;
+  overflow: hidden;
+  width: 100%;
  .scroll-wrapper {
    position: absolute;
  }
--- a/src/components/Share/dropdownMenu.vue
+++ b/src/components/Share/dropdownMenu.vue
@@ -35,7 +35,7 @@ export default {
 </script>

 <style rel="stylesheet/scss" lang="scss" >
-$n: 5; //和items.length 相同
+$n: 6; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
  width: 250px;
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -33,9 +33,18 @@ export default {
      height: undefined,
      child: null,
      stickyHeight: 0
-
    }
  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  activated() {
+    this.handleScroll()
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
  methods: {
    sticky() {
      if (this.active) {
@@ -62,13 +71,6 @@ export default {
      }
      this.reset()
    }
-  },
-  mounted() {
-    this.height = this.$el.getBoundingClientRect().height
-    window.addEventListener('scroll', this.handleScroll)
-  },
-  destroyed() {
-    window.removeEventListener('scroll', this.handleScroll)
  }
 }
 </script>
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -6,8 +6,8 @@
 </template>

 <script>
-import { getVersion } from '@/utils/index.js'
-const version = getVersion('element-ui') // element-ui version from package.json
+
+const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color

 export default {
--- a/src/errorLog.js
+++ b/src/errorLog.js
@@ -1,14 +1,17 @@
 import Vue from 'vue'
-import errLog from '@/store/errLog'
+import store from './store'

-// 生产环境错误日志
-if (process.env.NODE_ENV === 'production') {
-  Vue.config.errorHandler = function(err, vm) {
-    console.log(err, window.location.href)
-    errLog.pushLog({
+// you can set only in production env show the error-log
+// if (process.env.NODE_ENV === 'production') {
+Vue.config.errorHandler = function(err, vm, info, a) {
+  Vue.nextTick(() => {
+    store.dispatch('addErrorLog', {
      err,
-      url: window.location.href,
-      vm
+      vm,
+      info,
+      url: window.location.href
    })
-  }
+    console.error(err, info)
+  })
 }
+// }
--- a/src/mock/article.js
+++ b/src/mock/article.js
@@ -60,5 +60,11 @@ export default {
    status: 'published',
    tags: [],
    title: 'vue-element-admin'
+  }),
+  createArticle: () => ({
+    data: 'success'
+  }),
+  updateArticle: () => ({
+    data: 'success'
  })
 }
--- a/src/mock/index.js
+++ b/src/mock/index.js
@@ -4,9 +4,9 @@ import articleAPI from './article'
 import remoteSearchAPI from './remoteSearch'
 import transactionAPI from './transaction'

-Mock.setup({
-  timeout: '350-600'
-})
+// Mock.setup({
+//   timeout: '350-600'
+// })

 // 登录相关
 Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
@@ -17,6 +17,8 @@ Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
 Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
 Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
 Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
+Mock.mock(/\/article\/create/, 'post', articleAPI.createArticle)
+Mock.mock(/\/article\/update/, 'post', articleAPI.updateArticle)

 // 搜索相关
 Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,7 +26,7 @@ router.beforeEach((to, from, next) => {
          const roles = res.data.role
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
-            next({ ...to }) // hack方法 确保addRoutes已完成
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
--- a/src/store/errLog.js
+++ b/src/store/errLog.js
@@ -1,13 +0,0 @@
-const errLog = {
-  state: {
-    errLog: []
-  },
-  pushLog(log) {
-    this.state.errLog.unshift(log)
-  },
-  clearLog() {
-    this.state.errLog = []
-  }
-}
-
-export default errLog
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,8 +1,8 @@
 const getters = {
  sidebar: state => state.app.sidebar,
  language: state => state.app.language,
-  visitedViews: state => state.app.visitedViews,
-  cachedViews: state => state.app.cachedViews,
+  visitedViews: state => state.tagsView.visitedViews,
+  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
@@ -11,6 +11,7 @@ const getters = {
  roles: state => state.user.roles,
  setting: state => state.user.setting,
  permission_routers: state => state.permission.routers,
-  addRouters: state => state.permission.addRouters
+  addRouters: state => state.permission.addRouters,
+  errorLogs: state => state.errorLog.logs
 }
 export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
-import user from './modules/user'
+import errorLog from './modules/errorLog'
 import permission from './modules/permission'
+import tagsView from './modules/tagsView'
+import user from './modules/user'
 import getters from './getters'

 Vue.use(Vuex)
@@ -10,8 +12,10 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
  modules: {
    app,
-    user,
-    permission
+    errorLog,
+    permission,
+    tagsView,
+    user
  },
  getters
 })
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -5,9 +5,7 @@ const app = {
    sidebar: {
      opened: !+Cookies.get('sidebarStatus')
    },
-    language: Cookies.get('language') || 'zh',
-    visitedViews: [],
-    cachedViews: []
+    language: Cookies.get('language') || 'zh'
  },
  mutations: {
    TOGGLE_SIDEBAR: state => {
@@ -21,32 +19,6 @@ const app = {
    SET_LANGUAGE: (state, language) => {
      state.language = language
      Cookies.set('language', language)
-    },
-    ADD_VISITED_VIEWS: (state, view) => {
-      if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push({
-        name: view.name,
-        path: view.path,
-        title: view.meta.title || 'no-name'
-      })
-      if (!view.meta.noCache) {
-        state.cachedViews.push(view.name)
-      }
-    },
-    DEL_VISITED_VIEWS: (state, view) => {
-      for (const [i, v] of state.visitedViews.entries()) {
-        if (v.path === view.path) {
-          state.visitedViews.splice(i, 1)
-          break
-        }
-      }
-      for (const i of state.cachedViews) {
-        if (i === view.name) {
-          const index = state.cachedViews.indexOf(i)
-          state.cachedViews.splice(index, 1)
-          break
-        }
-      }
    }
  },
  actions: {
@@ -55,15 +27,6 @@ const app = {
    },
    setLanguage({ commit }, language) {
      commit('SET_LANGUAGE', language)
-    },
-    addVisitedViews({ commit }, view) {
-      commit('ADD_VISITED_VIEWS', view)
-    },
-    delVisitedViews({ commit, state }, view) {
-      return new Promise((resolve) => {
-        commit('DEL_VISITED_VIEWS', view)
-        resolve([...state.visitedViews])
-      })
    }
  }
 }
--- a/src/store/modules/errorLog.js
+++ b/src/store/modules/errorLog.js
@@ -0,0 +1,17 @@
+const errorLog = {
+  state: {
+    logs: []
+  },
+  mutations: {
+    ADD_ERROR_LOG: (state, log) => {
+      state.logs.push(log)
+    }
+  },
+  actions: {
+    addErrorLog({ commit }, log) {
+      commit('ADD_ERROR_LOG', log)
+    }
+  }
+}
+
+export default errorLog
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -0,0 +1,78 @@
+const tagsView = {
+  state: {
+    visitedViews: [],
+    cachedViews: []
+  },
+  mutations: {
+    ADD_VISITED_VIEWS: (state, view) => {
+      if (state.visitedViews.some(v => v.path === view.path)) return
+      state.visitedViews.push({
+        name: view.name,
+        path: view.path,
+        title: view.meta.title || 'no-name'
+      })
+      if (!view.meta.noCache) {
+        state.cachedViews.push(view.name)
+      }
+    },
+    DEL_VISITED_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews.splice(i, 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews.splice(index, 1)
+          break
+        }
+      }
+    },
+    DEL_OTHERS_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews = state.visitedViews.slice(i, i + 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews = state.cachedViews.slice(index, i + 1)
+          break
+        }
+      }
+    },
+    DEL_ALL_VIEWS: (state) => {
+      state.visitedViews = []
+      state.cachedViews = []
+    }
+  },
+  actions: {
+    addVisitedViews({ commit }, view) {
+      commit('ADD_VISITED_VIEWS', view)
+    },
+    delVisitedViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_VISITED_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delOthersViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_OTHERS_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delAllViews({ commit, state }) {
+      return new Promise((resolve) => {
+        commit('DEL_ALL_VIEWS')
+        resolve([...state.visitedViews])
+      })
+    }
+  }
+}
+
+export default tagsView
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -18,8 +18,8 @@

 .small-padding {
   .cell {
-     padding-left: 8px;
-     padding-right: 8px;
+     padding-left: 5px;
+     padding-right: 5px;
   }
 }

--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -98,10 +98,11 @@ div:focus{

 code {
  background: #eef1f6;
-  padding: 15px 10px;
+  padding: 15px 16px;
  margin-bottom: 20px;
  display: block;
  line-height: 36px;
+  font-size: 14px;
  a {
    color: #337ab7;
    cursor: pointer;
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -0,0 +1,3 @@
+export function generateTitle(title) {
+  return this.$t('route.' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -265,10 +265,3 @@ export function deepClone(source) {
  }
  return targetObj
 }
-
-// get dependencies verison from package.json by webpack.DefinePlugin
-export function getVersion(name) {
-  import('../../package').then(p => {
-    return p.dependencies[name]
-  })
-}
--- a/src/views/components-demo/dndList.vue
+++ b/src/views/components-demo/dndList.vue
@@ -14,7 +14,7 @@ import DndList from '@/components/DndList'
 import { fetchList } from '@/api/article'

 export default {
-  name: 'dnd-list-demo',
+  name: 'dndList-demo',
  components: { DndList },
  data() {
    return {
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -86,7 +86,7 @@
          <div slot="header" class="clearfix">
            <span>Share</span>
          </div>
-          <div class="component-item" style="height:360px;">
+          <div class="component-item" style="height:420px;">
            <dropdown-menu style="margin:0 auto;" title='系列文章' :items='articleList'></dropdown-menu>
          </div>
        </el-card>
@@ -134,7 +134,8 @@ export default {
        { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
        { 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: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
+        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
      ]
    }
  }
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card class="box-card" style="margin-left:8px;">
+  <el-card class="box-card-component" style="margin-left:8px;">
    <div slot="header" class="box-card-header">
      <img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'>
    </div>
@@ -62,50 +62,57 @@ export default {
 </script>

 <style rel="stylesheet/scss" lang="scss" >
-.box-card {
+.box-card-component{
  .el-card__header {
    padding: 0px!important;
  }
 }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
-.box-card-header {
-  position: relative;
-  height: 220px;
-  img {
-    width: 100%;
-    height: 100%;
-    transition: all 0.2s linear;
-    &:hover {
-      transform: scale(1.1, 1.1);
-      filter: contrast(130%);
+.box-card-component {
+  .box-card-header {
+    position: relative;
+    height: 220px;
+    img {
+      width: 100%;
+      height: 100%;
+      transition: all 0.2s linear;
+      &:hover {
+        transform: scale(1.1, 1.1);
+        filter: contrast(130%);
+      }
+    }
+  }
+  .mallki-text {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .panThumb {
+    z-index: 100;
+    height: 70px!important;
+    width: 70px!important;
+    position: absolute!important;
+    top: -45px;
+    left: 0px;
+    border: 5px solid #ffffff;
+    background-color: #fff;
+    margin: auto;
+    box-shadow: none!important;
+    /deep/ .pan-info {
+      box-shadow: none!important;
+    }
+  }
+  .progress-item {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+  @media only screen and (max-width: 1510px){
+    .mallki-text{
+      display: none;
    }
  }
 }
-.mallki-text {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  font-size: 20px;
-  font-weight: bold;
-}
-.panThumb {
-  z-index: 100;
-  height: 70px!important;
-  width: 70px!important;
-  position: absolute!important;
-  top: -45px;
-  left: 0px;
-  border: 5px solid #ffffff;
-  background-color: #fff;
-  margin: auto;
-  box-shadow: none!important;
-  /deep/ .pan-info{
-    box-shadow: none!important;
-  }
-}
-.progress-item {
-  margin-bottom: 10px;
-  font-size: 14px;
-}
 </style>
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row class="panel-group" :gutter="40">
-    <el-col :span="6">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class='card-panel' @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
@@ -11,7 +11,7 @@
        </div>
      </div>
    </el-col>
-    <el-col :span="6">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="message" class-name="card-panel-icon" />
@@ -22,7 +22,7 @@
        </div>
      </div>
    </el-col>
-    <el-col :span="6">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
@@ -33,7 +33,7 @@
        </div>
      </div>
    </el-col>
-    <el-col :span="6">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shoppingCard">
          <svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
@@ -64,7 +64,10 @@ export default {

 <style rel="stylesheet/scss" lang="scss" scoped>
 .panel-group {
-  margin-top: 20px;
+  margin-top: 18px;
+  .card-panel-col{
+    margin-bottom: 32px;
+  }
  .card-panel {
    height: 108px;
    cursor: pointer;
@@ -132,5 +135,4 @@ export default {
    }
  }
 }
-
 </style>
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@@ -246,16 +246,12 @@
 		margin: 0;
 		padding: 0;
 		list-style: none;
-		position: absolute;
-		right: 0;
-		left: -20px;
 	}
 	.filters li {
 		display: inline;
 	}
 	.filters li a {
 		color: inherit;
-		margin: 3px;
 		font-size: 12px;
 		padding: 3px 7px;
 		text-decoration: none;
--- 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">
+  <el-table :data="list" style="width: 100%;padding-top: 15px;">
+    <el-table-column label="Order_No" show-overflow-tooltip>
      <template slot-scope="scope">
        {{scope.row.order_no}}
      </template>
@@ -10,16 +10,11 @@
        ¥{{scope.row.price | toThousandslsFilter}}
      </template>
    </el-table-column>
-    <el-table-column label="Status"  width="100" align="center">
+    <el-table-column label="Status" width="100" align="center">
      <template slot-scope="scope">
-        <el-tag  :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
+        <el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
      </template>
    </el-table-column>
-    <!-- <el-table-column label="Username"  width="135" align="center">
-      <template slot-scope="scope">
-        {{scope.row.username}}
-      </template>
-    </el-table-column> -->
  </el-table>
 </template>

--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -4,36 +4,36 @@

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

-    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"></line-chart>
    </el-row>

-    <el-row style="margin-top:30px;" :gutter="30">
-      <el-col :span="8">
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart></raddar-chart>
        </div>
      </el-col>
-      <el-col :span="8">
+      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart></pie-chart>
        </div>
      </el-col>
-      <el-col :span="8">
+      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart></bar-chart>
        </div>
      </el-col>
    </el-row>

-    <el-row style="margin-top:30px;">
-      <el-col :span="12" style="padding-right:8px;">
+    <el-row :gutter="8">
+      <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 :span="6">
-        <todo-list style="margin:0 8px;"></todo-list>
+      <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
+        <todo-list></todo-list>
      </el-col>
-      <el-col :span="6">
+      <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
        <box-card></box-card>
      </el-col>
    </el-row>
@@ -99,11 +99,12 @@ export default {

 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard-editor-container {
-  padding: 30px;
+  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
-    padding: 15px 15px 0;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
  }
 }
 </style>
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -6,8 +6,8 @@

 <script>
 import { mapGetters } from 'vuex'
-import adminDashboard from './admin/index'
-import editorDashboard from './editor/index'
+import adminDashboard from './admin'
+import editorDashboard from './editor'

 export default {
  name: 'dashboard',
@@ -23,10 +23,9 @@ export default {
    ])
  },
  created() {
-    if (this.roles.indexOf('admin') >= 0) {
-      return
+    if (!this.roles.includes('admin')) {
+      this.currentRole = 'editorDashboard'
    }
-    this.currentRole = 'editorDashboard'
  }
 }
 </script>
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -19,7 +19,8 @@ export default {
        { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
        { 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: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
+        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
      ]
    }
  }
--- a/src/views/errorLog/errorTestA.vue
+++ b/src/views/errorLog/errorTestA.vue
@@ -5,3 +5,9 @@
    <!--error code-->
  </div>
 </template>
+
+<script>
+export default {
+  name: 'errorTestA'
+}
+</script>
--- a/src/views/errorLog/errorTestB.vue
+++ b/src/views/errorLog/errorTestB.vue
@@ -0,0 +1,11 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.b = b // eslint-disable-line
+  }
+}
+</script>
--- a/src/views/errorLog/index.vue
+++ b/src/views/errorLog/index.vue
@@ -1,21 +1,26 @@
 <template>
  <div class="errPage-container">
-    <err-code></err-code>
+    <errorA></errorA>
+    <errorB></errorB>

    <h3>请点击右上角bug小图表</h3>
    <code>
-      现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在Vue官网提供了一个方法来捕获处理异常
+      现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常.
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">文档介绍</a>
    </code>
-    <a href="#"><img src='http://panjiachen.github.io/images/errHandler.png'></a>
+    <a href="#">
+      <img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>
+    </a>
  </div>
 </template>

 <script>
-import errCode from './errcode'
+import errorA from './errorTestA'
+import errorB from './errorTestB'

 export default {
  name: 'errorLog',
-  components: { errCode }
+  components: { errorA, errorB }
 }
 </script>

--- a/src/views/example/table/complexTable.vue
+++ b/src/views/example/table/complexTable.vue
@@ -3,127 +3,111 @@
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="标题" v-model="listQuery.title">
      </el-input>
-
      <el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" placeholder="重要性">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
-
      <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" placeholder="类型">
        <el-option v-for="item in  calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
        </el-option>
      </el-select>
-
      <el-select @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.sort" placeholder="排序">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
        </el-option>
      </el-select>
-
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加</el-button>
-      <el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
+      <el-button class="filter-item" type="primary" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
      <el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
    </div>

-    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
-
+    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
+      style="width: 100%">
      <el-table-column align="center" label="序号" width="65">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
-
      <el-table-column width="180px" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
-
      <el-table-column min-width="150px" label="标题">
        <template slot-scope="scope">
          <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
          <el-tag>{{scope.row.type | typeFilter}}</el-tag>
        </template>
      </el-table-column>
-
      <el-table-column width="110px" align="center" label="作者">
        <template slot-scope="scope">
          <span>{{scope.row.author}}</span>
        </template>
      </el-table-column>
-
      <el-table-column width="110px" v-if='showAuditor' align="center" label="审核人">
        <template slot-scope="scope">
          <span style='color:red;'>{{scope.row.auditor}}</span>
        </template>
      </el-table-column>
-
      <el-table-column width="80px" label="重要性">
        <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 align="center" label="阅读数" width="95">
        <template slot-scope="scope">
-          <span class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span>
+          <span v-if="scope.row.pageviews" class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span>
+          <span v-else>无</span>
        </template>
      </el-table-column>
-
      <el-table-column class-name="status-col" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
-
-      <el-table-column align="center" label="操作" width="150">
+      <el-table-column align="center" label="操作" width="220" class-name="small-padding">
        <template slot-scope="scope">
-          <el-button v-if="scope.row.status!='published'" size="small" type="success" @click="handleModifyStatus(scope.row,'published')">发布
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">发布
          </el-button>
-          <el-button v-if="scope.row.status!='draft'" size="small" @click="handleModifyStatus(scope.row,'draft')">草稿
+          <el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">草稿
          </el-button>
-          <el-button v-if="scope.row.status!='deleted'" size="small" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
+          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
          </el-button>
        </template>
      </el-table-column>
-
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form class="small-space" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
-        <el-form-item label="类型">
+      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
+        <el-form-item label="类型" prop="type">
          <el-select class="filter-item" v-model="temp.type" placeholder="请选择">
            <el-option v-for="item in  calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
-
+        <el-form-item label="时间" prop="timestamp">
+          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="temp.title"></el-input>
+        </el-form-item>
        <el-form-item label="状态">
          <el-select class="filter-item" v-model="temp.status" placeholder="请选择">
            <el-option v-for="item in  statusOptions" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
-
-        <el-form-item label="时间">
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="选择日期时间">
-          </el-date-picker>
-        </el-form-item>
-
-        <el-form-item label="标题">
-          <el-input v-model="temp.title"></el-input>
-        </el-form-item>
-
        <el-form-item label="重要性">
          <el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
        </el-form-item>
-
        <el-form-item label="点评">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="temp.remark">
          </el-input>
@@ -131,8 +115,8 @@
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button v-if="dialogStatus=='create'" type="primary" @click="create">确 定</el-button>
-        <el-button v-else type="primary" @click="update">确 定</el-button>
+        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确 定</el-button>
+        <el-button v-else type="primary" @click="updateData">确 定</el-button>
      </div>
    </el-dialog>

@@ -150,8 +134,8 @@
 </template>

 <script>
-import { fetchList, fetchPv } from '@/api/article'
-import waves from '@/directive/waves/index.js' // 水波纹指令
+import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
+import waves from '@/directive/waves' // 水波纹指令
 import { parseTime } from '@/utils'

 const calendarTypeOptions = [
@@ -161,7 +145,7 @@ const calendarTypeOptions = [
  { key: 'EU', display_name: '欧元区' }
 ]

-// arr to obj
+// arr to obj ,such as { CN : "中国", US : "美国" }
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
@@ -174,6 +158,7 @@ export default {
  },
  data() {
    return {
+      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
@@ -185,19 +170,20 @@ export default {
        type: undefined,
        sort: '+id'
      },
-      temp: {
-        id: undefined,
-        importance: 0,
-        remark: '',
-        timestamp: 0,
-        title: '',
-        type: '',
-        status: 'published'
-      },
      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      sortOptions: [{ label: '按ID升序列', key: '+id' }, { label: '按ID降序', key: '-id' }],
      statusOptions: ['published', 'draft', 'deleted'],
+      showAuditor: false,
+      temp: {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        type: '',
+        status: 'published'
+      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
@@ -206,8 +192,11 @@ export default {
      },
      dialogPvVisible: false,
      pvData: [],
-      showAuditor: false,
-      tableKey: 0
+      rules: {
+        type: [{ required: true, message: 'type is required', trigger: 'change' }],
+        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
+        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
+      }
    }
  },
  filters: {
@@ -247,15 +236,6 @@ export default {
      this.listQuery.page = val
      this.getList()
    },
-    timeFilter(time) {
-      if (!time[0]) {
-        this.listQuery.start = undefined
-        this.listQuery.end = undefined
-        return
-      }
-      this.listQuery.start = parseInt(+time[0] / 1000)
-      this.listQuery.end = parseInt((+time[1] + 3600 * 1000 * 24) / 1000)
-    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
@@ -263,15 +243,75 @@ export default {
      })
      row.status = status
    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        status: 'published',
+        type: ''
+      }
+    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
+          this.temp.author = '原创作者'
+          createArticle(this.temp).then(() => {
+            this.list.unshift(this.temp)
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '创建成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
    },
    handleUpdate(row) {
-      this.temp = Object.assign({}, row)
+      this.temp = Object.assign({}, row) // copy obj
+      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
+          updateArticle(tempData).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.temp.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.temp)
+                break
+              }
+            }
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '更新成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
    },
    handleDelete(row) {
      this.$notify({
@@ -283,47 +323,6 @@ export default {
      const index = this.list.indexOf(row)
      this.list.splice(index, 1)
    },
-    create() {
-      this.temp.id = parseInt(Math.random() * 100) + 1024
-      this.temp.timestamp = +new Date()
-      this.temp.author = '原创作者'
-      this.list.unshift(this.temp)
-      this.dialogFormVisible = false
-      this.$notify({
-        title: '成功',
-        message: '创建成功',
-        type: 'success',
-        duration: 2000
-      })
-    },
-    update() {
-      this.temp.timestamp = +this.temp.timestamp
-      for (const v of this.list) {
-        if (v.id === this.temp.id) {
-          const index = this.list.indexOf(v)
-          this.list.splice(index, 1, this.temp)
-          break
-        }
-      }
-      this.dialogFormVisible = false
-      this.$notify({
-        title: '成功',
-        message: '更新成功',
-        type: 'success',
-        duration: 2000
-      })
-    },
-    resetTemp() {
-      this.temp = {
-        id: undefined,
-        importance: 0,
-        remark: '',
-        timestamp: 0,
-        title: '',
-        status: 'published',
-        type: ''
-      }
-    },
    handleFetchPv(pv) {
      fetchPv(pv).then(response => {
        this.pvData = response.data.pvData
--- a/src/views/example/table/index.vue
+++ b/src/views/example/table/index.vue
@@ -11,7 +11,7 @@ export default {
  name: 'TableMain',
  computed: {
    cachedViews() {
-      return this.$store.state.app.cachedViews
+      return this.$store.state.tagsView.cachedViews
    }
  }
 }
--- a/src/views/example/table/inlineEditTable.vue
+++ b/src/views/example/table/inlineEditTable.vue
@@ -35,14 +35,18 @@

      <el-table-column min-width="300px" label="标题">
        <template slot-scope="scope">
-          <el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input>
-          <span v-show="!scope.row.edit">{{ scope.row.title }}</span>
+          <template v-if="scope.row.edit">
+            <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
+            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
+          </template>
+          <span v-else>{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="编辑" width="120">
        <template slot-scope="scope">
-          <el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
+          <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">完成</el-button>
+          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
        </template>
      </el-table-column>

@@ -84,12 +88,40 @@ export default {
      fetchList(this.listQuery).then(response => {
        const items = response.data.items
        this.list = items.map(v => {
-          this.$set(v, 'edit', false)
+          this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
+          v.originalTitle = v.title //  will be used when user click the cancel botton
          return v
        })
        this.listLoading = false
      })
+    },
+    cancelEdit(row) {
+      row.title = row.originalTitle
+      row.edit = false
+      this.$message({
+        message: 'The title has been restored to the original value',
+        type: 'warning'
+      })
+    },
+    confirmEdit(row) {
+      row.edit = false
+      row.originalTitle = row.title
+      this.$message({
+        message: 'The title has been edited',
+        type: 'success'
+      })
    }
  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 13px;
+}
+</style>
--- a/src/views/form/components/ArticleDetail.vue
+++ b/src/views/form/components/ArticleDetail.vue
@@ -133,6 +133,7 @@ import { fetchArticle } from '@/api/article'
 import { userSearch } from '@/api/remoteSearch'

 const defaultForm = {
+  status: 'draft',
  title: '', // 文章题目
  content: '', // 文章内容
  content_short: '', // 文章摘要
--- a/src/views/i18n-demo/index.vue
+++ b/src/views/i18n-demo/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <el-card class="box-card">
+  <div>
+    <el-card class="box-card" style="margin-top:40px;">
      <div slot="header" class="clearfix">
        <svg-icon icon-class="international" />
        <span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
@@ -13,29 +13,30 @@
        <el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
      </div>
    </el-card>
-    <el-row :gutter="20" style="margin:100px 50px 50px;">
+
+    <el-row :gutter="20" style="margin:100px 15px 50px;">
      <el-col :span="12">
        <div class="block">
          <el-date-picker v-model="date" type="date" :placeholder="$t('i18nView.datePlaceholder')"></el-date-picker>
        </div>
        <div class="block">
-          <el-pagination :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
+          <el-pagination background :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next"
            :total="400">
          </el-pagination>
        </div>
        <div class="block">
-          <el-button  size="small">{{$t('i18nView.default')}}</el-button>
-          <el-button size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
-          <el-button size="small" type="success">{{$t('i18nView.success')}}</el-button>
-          <el-button size="small" type="info">{{$t('i18nView.info')}}</el-button>
-          <el-button size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
-          <el-button size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
+          <el-button class="item-btn" size="small">{{$t('i18nView.default')}}</el-button>
+          <el-button class="item-btn" size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
+          <el-button class="item-btn" size="small" type="success">{{$t('i18nView.success')}}</el-button>
+          <el-button class="item-btn" size="small" type="info">{{$t('i18nView.info')}}</el-button>
+          <el-button class="item-btn" size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
+          <el-button class="item-btn" size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <el-table :data="tableData" fit highlight-current-row border style="width: 100%">
-          <el-table-column prop="date" :label="$t('i18nView.tableDate')" width="180"></el-table-column>
-          <el-table-column prop="name" :label="$t('i18nView.tableName')" width="180"></el-table-column>
+          <el-table-column prop="name" :label="$t('i18nView.tableName')" width="100" align="center"></el-table-column>
+          <el-table-column prop="date" :label="$t('i18nView.tableDate')" width="120" align="center"></el-table-column>
          <el-table-column prop="address" :label="$t('i18nView.tableAddress')"></el-table-column>
        </el-table>
      </el-col>
@@ -100,7 +101,10 @@ export default {
  width: 600px;
  margin: 20px auto;
 }
-
+.item-btn{
+  margin-bottom: 15px;
+  margin-left: 0px;
+}
 .block {
  padding: 25px;
 }
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -13,7 +13,8 @@ export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
-      return this.$store.state.app.cachedViews
+      // console.log(this.$store.state.tagsView.cachedViews)
+      return this.$store.state.tagsView.cachedViews
    }
    // key() {
    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -5,8 +5,7 @@
    <breadcrumb class="breadcrumb-container"></breadcrumb>

    <div class="right-menu">
-
-      <error-log v-if="log.length>0" class="errLog-container right-menu-item" :logsList="log"></error-log>
+      <error-log v-if="errorLogs.length>0" class="errLog-container right-menu-item" :logsList="errorLogs"></error-log>

      <el-tooltip effect="dark" content="全屏" placement="bottom">
        <screenfull class="screenfull right-menu-item"></screenfull>
@@ -57,8 +56,7 @@ import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import ThemePicker from '@/components/ThemePicker'
 import Screenfull from '@/components/Screenfull'
-import ErrorLog from '@/components/ErrLog'
-import errLogStore from 'store/errLog'
+import ErrorLog from '@/components/ErrorLog'

 export default {
  components: {
@@ -68,17 +66,13 @@ export default {
    ErrorLog,
    Screenfull
  },
-  data() {
-    return {
-      log: errLogStore.state.errLog
-    }
-  },
  computed: {
    ...mapGetters([
      'sidebar',
      'name',
      'avatar',
-      'language'
+      'language',
+      'errorLogs'
    ])
  },
  methods: {
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -1,21 +1,21 @@
 <template>
  <div class="menu-wrapper">
-    <template v-for="item in routes">
+    <template v-for="item in routes" v-if="!item.hidden&&item.children">

-      <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
+      <router-link v-if="item.children.length===1 && !item.children[0].children" :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'>
          <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>
        </el-menu-item>
      </router-link>

-      <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name||item.path" :key="item.name">
+      <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>
        </template>

-        <template v-if="!child.hidden" v-for="child in item.children">
+        <template v-for="child in item.children" v-if="!child.hidden">
          <sidebar-item class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>

          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
@@ -32,6 +32,8 @@
 </template>

 <script>
+import { generateTitle } from '@/utils/i18n'
+
 export default {
  name: 'SidebarItem',
  props: {
@@ -40,9 +42,7 @@ export default {
    }
  },
  methods: {
-    generateTitle(title) {
-      return this.$t('route.' + title)
-    }
+    generateTitle
  }
 }
 </script>
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -1,6 +1,6 @@
 <template>
  <scroll-bar>
-    <el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
+    <el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
      <sidebar-item :routes="permission_routers"></sidebar-item>
    </el-menu>
  </scroll-bar>
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -1,27 +1,84 @@
 <template>
-  <scroll-pane class='tags-view-container'>
-    <router-link class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
-      {{$t('route.'+tag.title)}}
-      <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
-    </router-link>
-  </scroll-pane>
+  <div class="tags-view-container">
+    <scroll-pane class='tags-view-wrapper' ref='scrollPane'>
+      <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
+        {{generateTitle(tag.title)}}
+        <span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
+      </router-link>
+    </scroll-pane>
+    <ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
+      <li @click="closeSelectedTag(selectedTag)">Close</li>
+      <li @click="closeOthersTags">Close Others</li>
+      <li @click="closeAllTags">Close All</li>
+    </ul>
+  </div>
 </template>

 <script>
 import ScrollPane from '@/components/ScrollPane'
+import { generateTitle } from '@/utils/i18n'

 export default {
  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {}
+    }
+  },
  computed: {
    visitedViews() {
-      return this.$store.state.app.visitedViews
+      return this.$store.state.tagsView.visitedViews
+    }
+  },
+  watch: {
+    $route() {
+      this.addViewTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        window.addEventListener('click', this.closeMenu)
+      } else {
+        window.removeEventListener('click', this.closeMenu)
+      }
    }
  },
  mounted() {
    this.addViewTags()
  },
  methods: {
-    closeViewTags(view, $event) {
+    generateTitle, // generateTitle by vue-i18n
+    generateRoute() {
+      if (this.$route.name) {
+        return this.$route
+      }
+      return false
+    },
+    isActive(route) {
+      return route.path === this.$route.path || route.name === this.$route.name
+    },
+    addViewTags() {
+      const route = this.generateRoute()
+      if (!route) {
+        return false
+      }
+      this.$store.dispatch('addVisitedViews', route)
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag.$el)
+            break
+          }
+        }
+      })
+    },
+    closeSelectedTag(view) {
      this.$store.dispatch('delVisitedViews', view).then((views) => {
        if (this.isActive(view)) {
          const latestView = views.slice(-1)[0]
@@ -32,29 +89,23 @@ export default {
          }
        }
      })
-      $event.preventDefault()
    },
-    generateRoute() {
-      if (this.$route.name) {
-        return this.$route
-      }
-      return false
+    closeOthersTags() {
+      this.$router.push(this.selectedTag.path)
+      this.$store.dispatch('delOthersViews', this.selectedTag)
    },
-    addViewTags() {
-      const route = this.generateRoute()
-      if (!route) {
-        return false
-      }
-      this.$store.dispatch('addVisitedViews', route)
+    closeAllTags() {
+      this.$store.dispatch('delAllViews')
+      this.$router.push('/')
    },
-    isActive(route) {
-      return route.path === this.$route.path || route.name === this.$route.name
-    }
-
-  },
-  watch: {
-    $route() {
-      this.addViewTags()
+    openMenu(tag, e) {
+      this.visible = true
+      this.selectedTag = tag
+      this.left = e.clientX
+      this.top = e.clientY
+    },
+    closeMenu() {
+      this.visible = false
    }
  }
 }
@@ -62,38 +113,61 @@ export default {

 <style rel="stylesheet/scss" lang="scss" scoped>
 .tags-view-container {
-  background: #fff;
-  height: 34px;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-  .tags-view-item {
-    display: inline-block;
-    position: relative;
-    height: 26px;
-    line-height: 26px;
-    border: 1px solid #d8dce5;
-    color: #495060;
+  .tags-view-wrapper {
    background: #fff;
-    padding: 0 8px;
-    font-size: 12px;
-    margin-left: 5px;
-    margin-top: 4px;
-    &:first-of-type {
-      margin-left: 15px;
+    height: 34px;
+    border-bottom: 1px solid #d8dce5;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 4px;
+      &:first-of-type {
+        margin-left: 15px;
+      }
+      &.active {
+        background-color: #42b983;
+        color: #fff;
+        border-color: #42b983;
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 2px;
+        }
+      }
    }
-    &.active {
-      background-color: #42b983;
-      color: #fff;
-      border-color: #42b983;
-      &::before {
-        content: '';
-        background: #fff;
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        position: relative;
-        margin-right: 2px;
+  }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 2;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
      }
    }
  }
@@ -101,7 +175,8 @@ export default {
 </style>

 <style rel="stylesheet/scss" lang="scss">
-.tags-view-container {
+//reset element css of el-icon-close
+.tags-view-wrapper {
  .tags-view-item {
    .el-icon-close {
      width: 16px;
Author	SHA1	Message	Date
Pan	f5563b4eed	[release] 3.3.0	2017-12-13 18:35:38 +08:00
Pan	0c80fba84c	doc: update readme	2017-12-13 18:35:07 +08:00
Pan	4d3bbae183	perf[tags-view]:refine the style && format code	2017-12-13 18:33:12 +08:00
leij1ang	b6d97f1806	feat[tags-view]: tags-view add contextmenu (#343 ) * add the menu by right-clicking the tags * bug fixed * refine	2017-12-13 17:43:03 +08:00
Pan	a68413cb8f	refactor[errorLog]: save the logs in vuex	2017-12-13 13:52:14 +08:00
Pan	f9aaaa9091	perf[errorLog]:optimized error-log	2017-12-12 18:14:31 +08:00
Pan	85492f148f	fix[scrollPane&&scrollBar]:fixed scroll bug in Firefox	2017-12-12 13:28:33 +08:00
Pan	b7ca786751	perf[chore]:set travis notifications:false	2017-12-11 14:20:23 +08:00
花裤衩	c32bd73b42	Update README.md	2017-12-11 14:06:14 +08:00
Pan	3aacd3cccd	add[chore]:add travis	2017-12-11 13:59:49 +08:00
Pan	e7f626f015	[release] 3.2.0	2017-12-08 18:20:15 +08:00
Pan	b53d0945ab	fix(dndList): fixed the name same as router	2017-12-08 18:09:15 +08:00
Pan	ca75f7bcbc	perf(tagsView):split to single modules	2017-12-08 16:17:40 +08:00
lvsmart	b7939165d1	get real version from node_modules	2017-12-08 11:49:34 +08:00
Pan	ebc2ac08b7	add(inlineEditable): add the calcel btn to restore the title	2017-12-08 11:07:20 +08:00
Pan	a9d2978c31	perf[permission]: set replace: true so the navigation will not leave a history record	2017-12-07 17:33:30 +08:00
Pan	a4597887ac	style:refine css	2017-12-07 16:03:07 +08:00
Pan	44b180a7b3	[release] 3.1.1	2017-12-06 14:19:06 +08:00
Pan	acebaeae0c	perf(i18n): add generateTitle to utils	2017-12-06 14:18:28 +08:00
Pan	d09923ff4f	fix[sidebar]:fixed when sidebar item only has one children but nested #327	2017-12-05 18:42:15 +08:00
Pan	fc1a13d10b	[release] 3.1.0	2017-12-05 11:41:57 +08:00
Pan	705b9ccefd	add(tags-view): moveToCurrentTag	2017-12-05 11:15:39 +08:00
Pan	c84964d77c	perf(sidebar): rm unique-opened	2017-12-04 17:33:58 +08:00
Pan	8f9de5c641	perf:refine dashboard responsive	2017-12-04 14:28:26 +08:00
Pan	96a7035b1d	doc:add new article	2017-12-01 17:48:22 +08:00
Pan	7f2bd58035	doc:add new article	2017-12-01 17:47:08 +08:00
Pan	b4b9d166c4	perf:el-agination add background	2017-11-30 18:18:36 +08:00
Pan	da24d61008	dump: update element-ui version	2017-11-30 18:17:54 +08:00
Pan	8ce571b61d	perf:rm mock api timeout	2017-11-30 18:04:00 +08:00
Pan	38192b828d	perf:refine complexTable demo	2017-11-30 18:02:31 +08:00
Pan	72f653dcc7	perf:refine article demo	2017-11-30 16:55:46 +08:00
donng	4dfa878fc6	index首页代码修改	2017-11-30 15:46:41 +08:00
Pan	cef1f11931	fix:fixed sticky component bug in keep-alive	2017-11-29 15:57:47 +08:00
Pan	443c7aed3c	style:fixed class conflict	2017-11-29 14:17:37 +08:00
Pan	0f5304112c	fix:fixed theme-picker bug	2017-11-29 14:11:25 +08:00
Pan	dd3e22d5a1	perf:change i18n-demo to resizeable	2017-11-29 11:33:11 +08:00
Pan	d99cb068aa	fix:fixed tags-view bug	2017-11-29 11:22:25 +08:00
Pan	394f366aac	doc:update readme	2017-11-29 11:21:48 +08:00