Merge branch 'refacor/style'

.babelrc

 {
   "presets": [
-    ["env", { "modules": false }],
+    ["env", {
+      "modules": false
+    }],
     "stage-2"
   ],
   "plugins": ["transform-runtime"],

.eslintrc.js

@@ -52,7 +52,7 @@ module.exports = {
         'no-class-assign': 2,
         'no-cond-assign': 2,
         'no-const-assign': 2,
-        'no-control-regex': 2,
+        'no-control-regex': 0,
         'no-delete-var': 2,
         'no-dupe-args': 2,
         'no-dupe-class-members': 2,

.gitignore

 .DS_Store
 node_modules/
 dist/
-static/ckeditor
 gifs/
 npm-debug.log
 test/unit/coverage

README.md

-# vue-element-admin #
+<p align="center">
+  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
+</p>
+
+# vue-element-admin 
 
 [![vue](https://img.shields.io/badge/vue-2.4.2-brightgreen.svg)](https://github.com/vuejs/vue)
 [![element-ui](https://img.shields.io/badge/element--ui-1.4.2-brightgreen.svg)](https://github.com/ElemeFE/element)

build/dev-server.js

@@ -34,12 +34,14 @@ var hotMiddleware = require('webpack-hot-middleware')(compiler, {
 });
 
 // force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-        hotMiddleware.publish({action: 'reload'});
-        cb()
-    })
-});
+// currently disabled until this is resolved:
+// https://github.com/jantimon/html-webpack-plugin/issues/680
+// compiler.plugin('compilation', function (compilation) {
+//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+//     hotMiddleware.publish({ action: 'reload' })
+//     cb()
+//   })
+// })
 
 // proxy api requests
 Object.keys(proxyTable).forEach(function (context) {

build/utils.js

@@ -20,9 +20,16 @@ exports.cssLoaders = function (options) {
     }
   }
 
+  var postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
   // generate loader string to be used with extract text plugin
   function generateLoaders (loader, loaderOptions) {
-    var loaders = [cssLoader]
+    var loaders = options.usePostCSS !== false ? [cssLoader, postcssLoader] : [cssLoader]
     if (loader) {
       loaders.push({
         loader: loader + '-loader',

build/webpack.dev.conf.js

@@ -18,9 +18,7 @@ function resolveApp(relativePath) {
 
 module.exports = merge(baseWebpackConfig, {
   module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.dev.cssSourceMap
-    })
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
   },
   // cheap-source-map is faster for development
   devtool: '#cheap-source-map',

build/webpack.prod.conf.js

@@ -19,7 +19,8 @@ var webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.build.productionSourceMap,
-      extract: true
+      extract: true,
+      usePostCSS: true
     })
   },
   devtool: config.build.productionSourceMap ? '#source-map' : false,
@@ -38,7 +39,8 @@ var webpackConfig = merge(baseWebpackConfig, {
       compress: {
         warnings: false
       },
-      sourceMap: true
+      sourceMap: true,
+      parallel: true
     }),
     // extract css into its own file
     new ExtractTextPlugin({
@@ -73,10 +75,12 @@ var webpackConfig = merge(baseWebpackConfig, {
     }),
     // cache Module Identifiers
     new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
     // split vendor js into its own file
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      minChunks: function (module, count) {
+      minChunks: function (module) {
         // any required modules inside node_modules are extracted to vendor
         return (
           module.resource &&
@@ -87,6 +91,12 @@ var webpackConfig = merge(baseWebpackConfig, {
         )
       }
     }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
     // split echarts into its own file
     new webpack.optimize.CommonsChunkPlugin({
       async: 'echarts',
@@ -103,12 +113,16 @@ var webpackConfig = merge(baseWebpackConfig, {
         return context && (context.indexOf('xlsx') >= 0);
       }
     }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
     new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
     }),
+
     // copy custom static assets
     new CopyWebpackPlugin([{
       from: path.resolve(__dirname, '../static'),

index.html

 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>Juicy</title>
-</head>
-<body>
-<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
-<div id="app"></div>
-<!-- built files will be auto injected -->
-</body>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<meta name="renderer" content="webkit">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+		<title>vue-element-admin</title>
+	</head>
+	<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
+	<body>
+		<div id="app"></div>
+		<!-- built files will be auto injected -->
+	</body>
 </html>

package.json

@@ -13,79 +13,82 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
-    "axios": "0.16.2",
+    "axios": "0.17.1",
     "clipboard": "1.7.1",
-    "codemirror": "5.26.0",
-    "dropzone": "5.1.0",
-    "echarts": "3.8.2",
-    "element-ui": "1.4.2",
+    "codemirror": "5.31.0",
+    "dropzone": "5.2.0",
+    "echarts": "3.8.5",
+    "element-ui": "2.0.5",
     "file-saver": "1.3.3",
-    "js-cookie": "2.1.4",
+    "font-awesome": "4.7.0",
+    "js-cookie": "2.2.0",
     "jsonlint": "1.6.2",
+    "jszip": "3.1.4",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "screenfull": "3.2.2",
-    "showdown": "1.7.1",
+    "screenfull": "3.3.2",
+    "showdown": "1.8.2",
     "simplemde": "1.11.2",
-    "sortablejs": "1.5.1",
-    "vue": "2.4.2",
-    "vue-count-to": "1.0.5",
-    "vue-multiselect": "2.0.2",
-    "vue-router": "2.7.0",
-    "vue-splitpane": "^1.0.0",
-    "vuedraggable": "2.14.1",
-    "vuex": "2.3.1",
-    "xlsx": "^0.10.8",
-    "jszip": "^3.1.4"
+    "sortablejs": "1.6.1",
+    "vue": "2.5.9",
+    "vue-count-to": "1.0.10",
+    "vue-i18n": "7.3.2",
+    "vue-multiselect": "2.0.6",
+    "vue-router": "3.0.1",
+    "vue-splitpane": "1.0.0",
+    "vuedraggable": "2.15.0",
+    "vuex": "3.0.1",
+    "xlsx": "^0.11.7"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.1",
-    "babel-core": "6.25.0",
-    "babel-eslint": "7.2.3",
-    "babel-loader": "7.0.0",
+    "autoprefixer": "7.1.6",
+    "babel-core": "6.26.0",
+    "babel-eslint": "8.0.2",
+    "babel-loader": "7.1.2",
     "babel-plugin-transform-runtime": "6.23.0",
-    "babel-preset-env": "1.5.2",
+    "babel-preset-env": "1.6.1",
     "babel-preset-stage-2": "6.24.1",
-    "babel-register": "6.24.1",
-    "chalk": "1.1.3",
-    "connect-history-api-fallback": "1.3.0",
-    "copy-webpack-plugin": "4.0.1",
-    "cross-env": "5.0.1",
-    "css-loader": "0.28.4",
-    "eslint": "3.19.0",
+    "babel-register": "6.26.0",
+    "chalk": "2.3.0",
+    "connect-history-api-fallback": "1.4.0",
+    "copy-webpack-plugin": "4.2.0",
+    "cross-env": "5.1.1",
+    "css-loader": "0.28.7",
+    "eslint": "4.11.0",
     "eslint-friendly-formatter": "3.0.0",
-    "eslint-import-resolver-webpack": "0.8.1",
-    "eslint-loader": "1.7.1",
-    "eslint-plugin-html": "3.0.0",
-    "eslint-plugin-import": "2.3.0",
+    "eslint-import-resolver-webpack": "0.8.3",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-html": "3.2.2",
+    "eslint-plugin-import": "2.8.0",
     "eventsource-polyfill": "0.9.6",
-    "express": "4.15.3",
-    "extract-text-webpack-plugin": "2.1.2",
+    "express": "4.16.2",
+    "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "0.11.2",
     "friendly-errors-webpack-plugin": "1.6.1",
     "function-bind": "1.1.0",
-    "html-webpack-plugin": "2.28.0",
+    "html-webpack-plugin": "2.30.0",
     "http-proxy-middleware": "0.17.4",
     "node-sass": "^4.5.0",
     "opn": "4.0.2",
-    "optimize-css-assets-webpack-plugin": "1.3.0",
+    "optimize-css-assets-webpack-plugin": "3.2.0",
     "ora": "1.1.0",
+    "postcss-loader": "^2.0.8",
     "pushstate-server": "2.1.0",
     "rimraf": "2.6.0",
-    "sass-loader": "6.0.5",
-    "script-loader": "0.7.0",
+    "sass-loader": "6.0.6",
+    "script-loader": "0.7.2",
     "semver": "5.3.0",
-    "style-loader": "0.17.0",
-    "svg-sprite-loader": "3.2.4",
-    "url-loader": "0.5.8",
-    "vue-loader": "13.0.4",
-    "vue-style-loader": "3.0.1",
-    "vue-template-compiler": "2.4.2",
-    "webpack": "2.6.1",
-    "webpack-bundle-analyzer": "2.8.2",
-    "webpack-dev-middleware": "1.10.2",
-    "webpack-hot-middleware": "2.18.0",
+    "style-loader": "0.19.0",
+    "svg-sprite-loader": "3.4.1",
+    "url-loader": "0.6.2",
+    "vue-loader": "13.5.0",
+    "vue-style-loader": "3.0.3",
+    "vue-template-compiler": "2.5.9",
+    "webpack": "3.8.1",
+    "webpack-bundle-analyzer": "2.9.0",
+    "webpack-dev-middleware": "1.12.0",
+    "webpack-hot-middleware": "2.20.0",
     "webpack-merge": "4.1.0"
   },
   "engines": {

src/App.vue

@@ -11,6 +11,6 @@
 </script>
 
 <style lang="scss">
-@import '~normalize.css/normalize.css';// normalize.css 样式格式化
-@import './styles/index.scss'; // 全局自定义的css样式
+@import '~normalize.css/normalize.css'; // normalize.css 样式格式化
+@import './styles/index.scss'; // 全局自定义样式
 </style>

src/api/article.js

-import fetch from '@/utils/fetch'
+import request from '@/utils/request'
 
 export function fetchList(query) {
-  return fetch({
+  return request({
     url: '/article/list',
     method: 'get',
     params: query
@@ -9,14 +9,14 @@ export function fetchList(query) {
 }
 
 export function fetchArticle() {
-  return fetch({
+  return request({
     url: '/article/detail',
     method: 'get'
   })
 }
 
 export function fetchPv(pv) {
-  return fetch({
+  return request({
     url: '/article/pv',
     method: 'get',
     params: { pv }

src/api/login.js

-import fetch from '@/utils/fetch'
+import request from '@/utils/request'
 
 export function loginByUsername(username, password) {
   const data = {
     username,
     password
   }
-  return fetch({
+  return request({
     url: '/login/login',
     method: 'post',
     data
@@ -13,14 +13,14 @@ export function loginByUsername(username, password) {
 }
 
 export function logout() {
-  return fetch({
+  return request({
     url: '/login/logout',
     method: 'post'
   })
 }
 
 export function getUserInfo(token) {
-  return fetch({
+  return request({
     url: '/user/info',
     method: 'get',
     params: { token }

src/api/qiniu.js

-import fetch from '@/utils/fetch'
+import request from '@/utils/request'
 
 export function getToken() {
-  return fetch({
+  return request({
     url: '/qiniu/upload/token', // 假地址 自行替换
     method: 'get'
   })

src/api/remoteSearch.js

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

src/api/transaction.js

+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/transaction/list',
+    method: 'get',
+    params: query
+  })
+}

src/views/layout/Levelbar.vue → src/components/Breadcrumb/index.vue

 <template>
-  <el-breadcrumb class="app-levelbar" separator="/">
-    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
-      <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.name}}</span>
-      <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
-    </el-breadcrumb-item>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
+        <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
+        <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
+      </el-breadcrumb-item>
+    </transition-group>
   </el-breadcrumb>
 </template>
 
@@ -17,26 +19,29 @@ export default {
       levelList: null
     }
   },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
   methods: {
     getBreadcrumb() {
       let matched = this.$route.matched.filter(item => item.name)
       const first = matched[0]
-      if (first && (first.name !== '首页' || first.path !== '')) {
-        matched = [{ name: '首页', path: '/' }].concat(matched)
+      if (first && first.name !== 'dashboard') {
+        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
       }
       this.levelList = matched
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
+    },
+    generateTitle(title) {
+      return this.$t('route.' + title)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .app-levelbar.el-breadcrumb {
+  .app-breadcrumb.el-breadcrumb {
     display: inline-block;
     font-size: 14px;
     line-height: 50px;

src/components/Charts/keyboard.vue

@@ -45,21 +45,22 @@ export default {
 
       const xAxisData = []
       const data = []
-      for (let i = 0; i < 30; i++) {
-        xAxisData.push(i + '号')
-        data.push(Math.round(Math.random() * 2 + 3))
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
       }
-
       this.chart.setOption(
         {
           backgroundColor: '#08263a',
-          tooltip: {
-            trigger: 'axis'
-          },
-          xAxis: {
+          xAxis: [{
             show: false,
             data: xAxisData
-          },
+          }, {
+            show: false,
+            data: xAxisData
+          }],
           visualMap: {
             show: false,
             min: 0,
@@ -84,28 +85,64 @@ export default {
                 color: '#08263f'
               }
             },
-            axisTick: {}
+            axisTick: {
+              show: false
+            }
           },
           series: [{
+            name: 'back',
             type: 'bar',
-            data,
-            name: '撸文数',
+            data: data2,
+            z: 1,
             itemStyle: {
               normal: {
+                opacity: 0.4,
                 barBorderRadius: 5,
-                shadowBlur: 10,
+                shadowBlur: 3,
                 shadowColor: '#111'
               }
+            }
+          }, {
+            name: 'Simulate Shadow',
+            type: 'line',
+            data,
+            z: 2,
+            showSymbol: false,
+            animationDelay: 0,
+            animationEasing: 'linear',
+            animationDuration: 1200,
+            lineStyle: {
+              normal: {
+                color: 'transparent'
+              }
             },
-            animationEasing: 'elasticOut',
-            animationEasingUpdate: 'elasticOut',
-            animationDelay(idx) {
-              return idx * 20
-            },
-            animationDelayUpdate(idx) {
-              return idx * 20
+            areaStyle: {
+              normal: {
+                color: '#08263a',
+                shadowBlur: 50,
+                shadowColor: '#000'
+              }
             }
-          }]
+          }, {
+            name: 'front',
+            type: 'bar',
+            data,
+            xAxisIndex: 1,
+            z: 3,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5
+              }
+            }
+          }],
+          animationEasing: 'elasticOut',
+          animationEasingUpdate: 'elasticOut',
+          animationDelay(idx) {
+            return idx * 20
+          },
+          animationDelayUpdate(idx) {
+            return idx * 20
+          }
         })
     }
   }

src/components/Charts/keyboard2.vue

-<template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-
-<script>
-import echarts from 'echarts'
-
-export default {
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
-
-      const xAxisData = []
-      const data = []
-      const data2 = []
-      for (let i = 0; i < 50; i++) {
-        xAxisData.push(i)
-        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
-        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
-      }
-      this.chart.setOption(
-        {
-          backgroundColor: '#08263a',
-          xAxis: [{
-            show: false,
-            data: xAxisData
-          }, {
-            show: false,
-            data: xAxisData
-          }],
-          visualMap: {
-            show: false,
-            min: 0,
-            max: 50,
-            dimension: 0,
-            inRange: {
-              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-            }
-          },
-          yAxis: {
-            axisLine: {
-              show: false
-            },
-            axisLabel: {
-              textStyle: {
-                color: '#4a657a'
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#08263f'
-              }
-            },
-            axisTick: {
-              show: false
-            }
-          },
-          series: [{
-            name: 'back',
-            type: 'bar',
-            data: data2,
-            z: 1,
-            itemStyle: {
-              normal: {
-                opacity: 0.4,
-                barBorderRadius: 5,
-                shadowBlur: 3,
-                shadowColor: '#111'
-              }
-            }
-          }, {
-            name: 'Simulate Shadow',
-            type: 'line',
-            data,
-            z: 2,
-            showSymbol: false,
-            animationDelay: 0,
-            animationEasing: 'linear',
-            animationDuration: 1200,
-            lineStyle: {
-              normal: {
-                color: 'transparent'
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: '#08263a',
-                shadowBlur: 50,
-                shadowColor: '#000'
-              }
-            }
-          }, {
-            name: 'front',
-            type: 'bar',
-            data,
-            xAxisIndex: 1,
-            z: 3,
-            itemStyle: {
-              normal: {
-                barBorderRadius: 5
-              }
-            }
-          }],
-          animationEasing: 'elasticOut',
-          animationEasingUpdate: 'elasticOut',
-          animationDelay(idx) {
-            return idx * 20
-          },
-          animationDelayUpdate(idx) {
-            return idx * 20
-          }
-        })
-    }
-  }
-}
-</script>

src/components/twoDndList/index.vue → src/components/DndList/index.vue

 <template>
-  <div class="twoDndList">
-    <div class="twoDndList-list" :style="{width:width1}">
+  <div class="dndList">
+    <div class="dndList-list" :style="{width:width1}">
       <h3>{{list1Title}}</h3>
       <draggable :list="list1" class="dragArea" :options="{group:'article'}">
         <div class="list-complete-item" v-for="element in list1" :key='element.id'>
@@ -13,7 +13,7 @@
         </div>
       </draggable>
     </div>
-    <div class="twoDndList-list" :style="{width:width2}">
+    <div class="dndList-list" :style="{width:width2}">
       <h3>{{list2Title}}</h3>
       <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
         <div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
@@ -28,7 +28,7 @@
 import draggable from 'vuedraggable'
 
 export default {
-  name: 'twoDndList',
+  name: 'DndList',
   components: { draggable },
   computed: {
     filterList2() {
@@ -97,7 +97,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.twoDndList {
+.dndList {
   background: #fff;
   padding-bottom: 40px;
   &:after {
@@ -105,7 +105,7 @@ export default {
     display: table;
     clear: both;
   }
-  .twoDndList-list {
+  .dndList-list {
     float: left;
     padding-bottom: 30px;
     &:first-of-type {

src/components/Dropzone/index.vue

@@ -7,7 +7,7 @@
 <script>
 import Dropzone from 'dropzone'
 import 'dropzone/dist/dropzone.css'
-  // import { getToken } from 'api/qiniu';
+// import { getToken } from 'api/qiniu';
 
 Dropzone.autoDiscover = false
 
@@ -59,18 +59,18 @@ export default {
       },
       accept: (file, done) => {
         /* 七牛*/
-            // const token = this.$store.getters.token;
-            // getToken(token).then(response => {
-            //   file.token = response.data.qiniu_token;
-            //   file.key = response.data.qiniu_key;
-            //   file.url = response.data.qiniu_url;
-            //   done();
-            // })
+        // const token = this.$store.getters.token;
+        // getToken(token).then(response => {
+        //   file.token = response.data.qiniu_token;
+        //   file.key = response.data.qiniu_key;
+        //   file.url = response.data.qiniu_url;
+        //   done();
+        // })
         done()
       },
       sending: (file, xhr, formData) => {
-            // formData.append('token', file.token);
-            // formData.append('key', file.key);
+        // formData.append('token', file.token);
+        // formData.append('key', file.key);
         vm.initOnce = false
       }
     })

src/components/ErrLog/index.vue

@@ -12,14 +12,14 @@
 		<el-dialog title="bug日志" :visible.sync="dialogTableVisible">
 			<el-table :data="logsList">
 				<el-table-column label="message">
-					<template scope="scope">
+					<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 scope="scope">
+					<template slot-scope="scope">
 						{{ scope.row.err.stack}}
 					</template>
 				</el-table-column>

src/components/Github/index.vue → src/components/GithubCorner/index.vue

 <template>
   <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
       aria-hidden="true">
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
@@ -11,3 +11,32 @@
   </a>
 </template>
 
+<style scoped>
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+</style>

src/components/Hamburger/index.vue

 <template>
-	<div>
-		<svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
-		  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
-			<path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
-			  p-id="1692"></path>
-			<path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
-			  p-id="1693"></path>
-			<path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
-			  p-id="1694"></path>
-		</svg>
-	</div>
+  <div>
+    <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+        p-id="1692"></path>
+      <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+        p-id="1693"></path>
+      <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+        p-id="1694"></path>
+    </svg>
+  </div>
 </template>
 
 <script>
@@ -34,13 +34,12 @@ export default {
 	cursor: pointer;
 	width: 20px;
 	height: 20px;
-	transform: rotate(0deg);
+	transform: rotate(90deg);
 	transition: .38s;
 	transform-origin: 50% 50%;
 }
 
 .hamburger.is-active {
-	transform: rotate(90deg);
+	transform: rotate(0deg);
 }
-
 </style>

src/components/ImageCropper/index.vue

@@ -105,7 +105,7 @@
 <script>
     /* eslint-disable */
     import {effectRipple, data2blob} from './utils';
-    import fetch from 'utils/fetch';
+    import request from 'utils/request';
     import langBag from './lang';
     const mimes = {
         'jpg': 'image/jpeg',
@@ -672,7 +672,7 @@
             that.loading = 1;
             that.setStep(3);
             that.$emit('crop-success', createImgUrl, field, ki);
-            fetch({
+            request({
                 url,
                 method: 'post',
                 data: fmData

src/components/JsonEditor/index.vue

 <template>
-  <div class='json-editor'>
-    <textarea ref='textarea'></textarea>
+  <div class="json-editor">
+    <textarea ref="textarea"></textarea>
   </div>
 </template>
 
@@ -57,7 +57,6 @@ export default {
 .CodeMirror {
   height: 100%;
 }
-
 .json-editor .cm-s-rubyblue span.cm-string {
   color: #F08047;
 }

src/components/MDinput/index.vue

@@ -71,6 +71,11 @@ export default {
       }
     }
   },
+  watch: {
+    value(newValue) {
+      this.currentValue = newValue
+    }
+  },
   data() {
     return {
       currentValue: this.value,
@@ -159,6 +164,7 @@ export default {
       .material-input__icon {
         position: absolute;
         left: 0;
+        line-height: $font-size-base;
         color: $color-blue;
         top: $spacer;
         width: $index-has-icon;

src/components/MarkdownEditor/index.vue

 <template>
-  <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
-    <textarea :id='id'>
+  <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
+    <textarea :id="id">
     </textarea>
   </div>
 </template>
 
 <script>
+import 'font-awesome/css/font-awesome.min.css'
 import 'simplemde/dist/simplemde.min.css'
 import SimpleMDE from 'simplemde'
 
@@ -14,8 +15,7 @@ export default {
   props: {
     value: String,
     id: {
-      type: String,
-      default: 'markdown-editor'
+      type: String
     },
     autofocus: {
       type: Boolean,
@@ -51,7 +51,8 @@ export default {
   },
   mounted() {
     this.simplemde = new SimpleMDE({
-      element: document.getElementById(this.id),
+      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
+      autoDownloadFontAwesome: false,
       autofocus: this.autofocus,
       toolbar: this.toolbar,
       spellChecker: false,
@@ -79,7 +80,6 @@ export default {
 
 <style>
 .simplemde-container .CodeMirror {
-  /*height: 150px;*/
   min-height: 150px;
 }
 
@@ -109,6 +109,11 @@ export default {
   font-weight: bold;
   color: #E61E1E;
 }
+
+.simplemde-container .editor-toolbar.fullscreen,
+.simplemde-container .CodeMirror-fullscreen {
+  z-index: 1003;
+}
 </style>
 
 

src/components/Screenfull/index.vue

 <template>
-  <svg @click='click' class="icon screenfull" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-    t="1497503607356" viewBox="0 0 1024 1024" version="1.1" p-id="4109" :fill='fill' :width="width" :height="height">
-    <path d="M604.157933 512l204.484208 204.484208 82.942037-82.942037c10.364045-10.952446 26.498514-13.83817 40.309054-8.067746 13.249769 5.742794 22.465664 18.99154 22.465664 33.977859l0 258.042008c0 20.168342-16.695241 36.863582-36.863582 36.863582L659.452283 954.357873c-14.986319 0-28.236088-9.215896-33.977859-23.025413-5.770424-13.249769-2.885723-29.384237 8.067746-39.748283l82.942037-82.942037L512 604.157933 307.515792 808.642141l82.942037 82.942037c10.952446 10.364045 13.83817 26.498514 8.067746 39.748283-5.742794 13.809517-18.99154 23.025413-33.977859 23.025413L106.504686 954.357873c-20.168342 0-36.863582-16.695241-36.863582-36.863582L69.641103 659.452283c0-14.986319 9.215896-28.236088 23.025413-33.977859 13.249769-5.770424 29.384237-2.8847 39.748283 8.067746l82.942037 82.942037 204.484208-204.484208L215.357859 307.515792l-82.942037 82.942037c-6.890944 6.918573-16.10684 10.952446-25.911136 10.952446-4.593622 0-9.804297-1.14815-13.83817-2.8847-13.809517-5.742794-23.025413-18.99154-23.025413-33.977859L69.641103 106.504686c0-20.168342 16.695241-36.863582 36.863582-36.863582L364.546693 69.641103c14.986319 0 28.236088 9.215896 33.977859 23.025413 5.770424 13.249769 2.8847 29.384237-8.067746 39.748283l-82.942037 82.942037 204.484208 204.484208L716.484208 215.357859l-82.942037-82.942037c-10.952446-10.364045-13.83817-26.498514-8.067746-39.748283 5.742794-13.809517 18.99154-23.025413 33.977859-23.025413l258.042008 0c20.168342 0 36.863582 16.695241 36.863582 36.863582l0 258.042008c0 14.986319-9.215896 28.236088-22.465664 33.977859-4.593622 1.736551-9.804297 2.8847-14.397918 2.8847-9.804297 0-19.020192-4.033873-25.911136-10.952446l-82.942037-82.942037L604.157933 512z"
-      p-id="4110" />
-  </svg>
+  <div>
+    <svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+      p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
+      <path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
+        p-id="2070"></path>
+      <path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
+        p-id="2071"></path>
+      <path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
+        p-id="2072"></path>
+      <path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
+        p-id="2073"></path>
+    </svg>
+  </div>
 </template>
 
 <script>
 import screenfull from 'screenfull'
 
 export default {
-  name: 'hamburger',
+  name: 'screenfull',
   props: {
     width: {
       type: Number,
@@ -46,9 +54,12 @@ export default {
 </script>
 
 <style scoped>
-.screenfull {
+.screenfull-svg {
   display: inline-block;
   cursor: pointer;
-  vertical-align: -0.15em;
+  fill: #5a5e66;;
+  width: 20px;
+  height: 20px;
+  vertical-align: 10px;
 }
 </style>

src/components/ScrollBar/index.vue

+<template>
+  <div class="scroll-container" ref="scrollContainer" @mousewheel="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) {
+      e.preventDefault()
+      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)
+      } 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)
+          }
+        } 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>

src/components/ScrollPane/index.vue

+<template>
+  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
+    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'scrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      e.preventDefault()
+      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)
+      } else {
+        if ($containerWidth - 100 < $wrapperWidth) {
+          if (this.left < -($wrapperWidth - $containerWidth + 100)) {
+            this.left = this.left
+          } else {
+            this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - 100)
+          }
+        } else {
+          this.left = 0
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  .scroll-wrapper {
+    position: absolute;
+  }
+}
+</style>

src/components/Share/dropdownMenu.vue

+<template>
+  <div class="share-dropdown-menu" :class="{active:isActive}">
+    <div class="share-dropdown-menu-wrapper">
+      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{title}}</span>
+      <div class="share-dropdown-menu-item" v-for="(item,index) of items" :key='index'>
+        <a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a>
+        <span v-else>{{item.title}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array
+    },
+    title: {
+      type: String,
+      default: 'vue'
+    }
+  },
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  methods: {
+    clickTitle() {
+      this.isActive = !this.isActive
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+$n: 5; //和items.length 相同
+$t: .1s;
+.share-dropdown-menu {
+  width: 250px;
+  position: relative;
+  z-index: 1;
+  &-title {
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    background: black;
+    color: white;
+    height: 60px;
+    line-height: 60px;
+    font-size: 20px;
+    text-align: center;
+    z-index: 2;
+    transform: translate3d(0,0,0);
+  }
+  &-wrapper {
+    position: relative;
+  }
+  &-item {
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    background: #e0e0e0;
+    line-height: 60px;
+    height: 60px;
+    cursor: pointer;
+    font-size: 20px;
+    opacity: 1;
+    transition: transform 0.28s ease;
+    &:hover {
+      background: black;
+      color: white;
+    }
+    @for $i from 1 through $n {
+      &:nth-of-type(#{$i}) {
+        z-index: -1;
+        transition-delay: $i*$t;
+        transform: translate3d(0, -60px, 0);
+      }
+    }
+  }
+  &.active {
+    .share-dropdown-menu-wrapper {
+      z-index: 1;
+    }
+    .share-dropdown-menu-item {
+      @for $i from 1 through $n {
+        &:nth-of-type(#{$i}) {
+         transition-delay: ($n - $i)*$t;
+          transform: translate3d(0, ($i - 1)*60px, 0);
+        }
+      }
+    }
+  }
+}
+</style>

src/components/SplitPane/Pane.vue

-<template>
-	<div :class="classes">
-		<slot></slot>
-	</div>
-</template>
-
-<script>
-export default {
-  name: 'Pane',
-  data() {
-    const classes = ['Pane', this.$parent.split, 'className']
-    return {
-      classes: classes.join(' '),
-      percent: 50
-    }
-  }
-}
-</script>
-
-<style scoped>
-.splitter-pane.vertical.splitter-paneL {
-    position: absolute;
-    left: 0px;
-    height: 100%;
-}
-
-.splitter-pane.vertical.splitter-paneR {
-    position: absolute;
-    right: 0px;
-    height: 100%;
-}
-
-.splitter-pane.horizontal.splitter-paneL {
-    position: absolute;
-    top: 0px;
-    width: 100%;
-}
-
-.splitter-pane.horizontal.splitter-paneR {
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-}
-</style>

src/components/SplitPane/Resizer.vue

-<template>
-	<div :class="classes" @mousedown="onMouseDown"></div>
-</template>
-
-<script>
-export default {
-  props: {
-    split: {
-      validator(value) {
-        return ['vertical', 'horizontal'].indexOf(value) >= 0
-      },
-      required: true
-    },
-    onMouseDown: {
-      type: Function,
-      required: true
-    }
-  },
-  data() {
-    const classes = ['Resizer', this.split, 'className']
-    return {
-      classes: classes.join(' ')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.Resizer {
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	background: #000;
-	position: absolute;
-	opacity: .2;
-	z-index: 1;
-	/*-moz-background-clip: padding;*/
-	/*-webkit-background-clip: padding;*/
-	/*background-clip: padding-box;*/
-}
-/*.Resizer:hover {*/
-/*-webkit-transition: all 2s ease;*/
-/*transition: all 2s ease;*/
-/*}*/
-
-.Resizer.horizontal {
-	height: 11px;
-	margin: -5px 0;
-	border-top: 5px solid rgba(255, 255, 255, 0);
-	border-bottom: 5px solid rgba(255, 255, 255, 0);
-	cursor: row-resize;
-	width: 100%;
-}
-
-.Resizer.horizontal:hover {
-	border-top: 5px solid rgba(0, 0, 0, 0.5);
-	border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-}
-
-.Resizer.vertical {
-	width: 11px;
-	height: 100%;
-	border-left: 5px solid rgba(255, 255, 255, 0);
-	border-right: 5px solid rgba(255, 255, 255, 0);
-	cursor: col-resize;
-}
-
-.Resizer.vertical:hover {
-	border-left: 5px solid rgba(0, 0, 0, 0.5);
-	border-right: 5px solid rgba(0, 0, 0, 0.5);
-}
-</style>

src/components/SplitPane/index.vue

-<template>
-  <div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp" @mousemove="onMouseMove">
-    <pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
-      <slot name="paneL"></slot>
-    </pane>
-    <resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown" @click="onClick"></resizer>
-    <pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
-      <slot name="paneR"></slot>
-    </pane>
-  </div>
-</template>
-
-<script>
-import Resizer from './Resizer'
-import Pane from './Pane'
-export default {
-  name: 'splitPane',
-  components: { Resizer, Pane },
-  props: {
-    margin: {
-      type: Number,
-      default: 10
-    },
-    split: {
-      validator(value) {
-        return ['vertical', 'horizontal'].indexOf(value) >= 0
-      },
-      required: true
-    }
-  },
-  data() {
-    return {
-      active: false,
-      hasMoved: false,
-      height: null,
-      percent: 50,
-      type: this.split === 'vertical' ? 'width' : 'height',
-      resizeType: this.split === 'vertical' ? 'left' : 'top'
-    }
-  },
-  computed: {
-    userSelect() {
-      return this.active ? 'none' : ''
-    },
-    cursor() {
-      return this.active ? 'col-resize' : ''
-    }
-  },
-  methods: {
-    onClick() {
-      if (!this.hasMoved) {
-        this.percent = 50
-        this.$emit('resize')
-      }
-    },
-    onMouseDown() {
-      this.active = true
-      this.hasMoved = false
-    },
-    onMouseUp() {
-      this.active = false
-    },
-    onMouseMove(e) {
-      if (e.buttons === 0 || e.which === 0) {
-        this.active = false
-      }
-      if (this.active) {
-        let offset = 0
-        let target = e.currentTarget
-        if (this.split === 'vertical') {
-          while (target) {
-            offset += target.offsetLeft
-            target = target.offsetParent
-          }
-        } else {
-          while (target) {
-            offset += target.offsetTop
-            target = target.offsetParent
-          }
-        }
-
-        const currentPage = this.split === 'vertical' ? e.pageX : e.pageY
-        const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight
-        const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
-        if (percent > this.margin && percent < 100 - this.margin) {
-          this.percent = percent
-        }
-        this.$emit('resize')
-        this.hasMoved = true
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.clearfix:after {
-  visibility: hidden;
-  display: block;
-  font-size: 0;
-  content: " ";
-  clear: both;
-  height: 0;
-}
-
-.vue-splitter-container {
-  height: 100%;
-  /*display: flex;*/
-  position: relative;
-}
-</style>

src/components/Icon-svg/index.vue → src/components/SvgIcon/index.vue

 <template>
-  <svg class="svg-icon" aria-hidden="true">
+  <svg :class="svgClass" aria-hidden="true">
     <use :xlink:href="iconName"></use>
   </svg>
 </template>
 
 <script>
 export default {
-  name: 'icon-svg',
+  name: 'svg-icon',
   props: {
     iconClass: {
       type: String,
       required: true
+    },
+    className: {
+      type: String
     }
   },
   computed: {
     iconName() {
       return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
     }
   }
 }
 </script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

src/components/TextHoverEffect/Mallki.vue

+<template>
+  <a class="link--mallki" :class="className" href="#">
+    {{text}}
+    <span :data-letters="text"></span>
+    <span :data-letters="text"></span>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    className: {
+      type: String
+    },
+    text: {
+      type: String,
+      default: 'vue-element-admin'
+    }
+  }
+}
+</script>
+
+
+<style>
+/* Mallki */
+.link--mallki {
+  font-weight: 800;
+  color: #4dd9d5;
+  font-family: 'Dosis', sans-serif;
+  -webkit-transition: color 0.5s 0.25s;
+  transition: color 0.5s 0.25s;
+  overflow: hidden;
+  position: relative;
+display: inline-block;
+    line-height: 1;
+        outline: none;
+    text-decoration: none;
+}
+
+.link--mallki:hover {
+  -webkit-transition: none;
+  transition: none;
+  color: transparent;
+}
+
+.link--mallki::before {
+  content: '';
+  width: 100%;
+  height: 6px;
+  margin: -3px 0 0 0;
+  background: #3888fa;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+  -webkit-transition: -webkit-transform 0.4s;
+  transition: transform 0.4s;
+  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+
+.link--mallki:hover::before {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.link--mallki span {
+  position: absolute;
+  height: 50%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.link--mallki span::before {
+  content: attr(data-letters);
+  color: red;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  color: #3888fa;
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: transform 0.5s;
+}
+
+.link--mallki span:nth-child(2) {
+  top: 50%;
+}
+
+.link--mallki span:first-child::before {
+  top: 0;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+}
+
+.link--mallki span:nth-child(2)::before {
+  bottom: 0;
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+}
+
+.link--mallki:hover span::before {
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+</style>

src/components/ThemePicker/index.vue

+<template>
+  <el-color-picker
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
+    v-model="theme"></el-color-picker>
+</template>
+
+<script>
+import { getVersion } from '@/utils/index.js'
+const version = getVersion('element-ui') // element-ui version from package.json
+const ORIGINAL_THEME = '#409EFF' // default color
+
+export default {
+  data() {
+    return {
+      chalk: '', // content of theme-chalk css
+      theme: ORIGINAL_THEME
+    }
+  },
+  watch: {
+    theme(val, oldVal) {
+      if (typeof val !== 'string') return
+      const themeCluster = this.getThemeCluster(val.replace('#', ''))
+      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
+      console.log(themeCluster, originalCluster)
+      const getHandler = (variable, id) => {
+        return () => {
+          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
+          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
+
+          let styleTag = document.getElementById(id)
+          if (!styleTag) {
+            styleTag = document.createElement('style')
+            styleTag.setAttribute('id', id)
+            document.head.appendChild(styleTag)
+          }
+          styleTag.innerText = newStyle
+        }
+      }
+
+      const chalkHandler = getHandler('chalk', 'chalk-style')
+
+      if (!this.chalk) {
+        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
+        this.getCSSString(url, chalkHandler, 'chalk')
+      } else {
+        chalkHandler()
+      }
+
+      const styles = [].slice.call(document.querySelectorAll('style'))
+        .filter(style => {
+          const text = style.innerText
+          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
+        })
+      styles.forEach(style => {
+        const { innerText } = style
+        if (typeof innerText !== 'string') return
+        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
+      })
+      this.$message({
+        message: '换肤成功',
+        type: 'success'
+      })
+    }
+  },
+
+  methods: {
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
+      })
+      return newStyle
+    },
+
+    getCSSString(url, callback, variable) {
+      const xhr = new XMLHttpRequest()
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
+          callback()
+        }
+      }
+      xhr.open('GET', url)
+      xhr.send()
+    },
+
+    getThemeCluster(theme) {
+      const tintColor = (color, tint) => {
+        let red = parseInt(color.slice(0, 2), 16)
+        let green = parseInt(color.slice(2, 4), 16)
+        let blue = parseInt(color.slice(4, 6), 16)
+
+        if (tint === 0) { // when primary color is in its rgb space
+          return [red, green, blue].join(',')
+        } else {
+          red += Math.round(tint * (255 - red))
+          green += Math.round(tint * (255 - green))
+          blue += Math.round(tint * (255 - blue))
+
+          red = red.toString(16)
+          green = green.toString(16)
+          blue = blue.toString(16)
+
+          return `#${red}${green}${blue}`
+        }
+      }
+
+      const shadeColor = (color, shade) => {
+        let red = parseInt(color.slice(0, 2), 16)
+        let green = parseInt(color.slice(2, 4), 16)
+        let blue = parseInt(color.slice(4, 6), 16)
+
+        red = Math.round((1 - shade) * red)
+        green = Math.round((1 - shade) * green)
+        blue = Math.round((1 - shade) * blue)
+
+        red = red.toString(16)
+        green = green.toString(16)
+        blue = blue.toString(16)
+
+        return `#${red}${green}${blue}`
+      }
+
+      const clusters = [theme]
+      for (let i = 0; i <= 9; i++) {
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
+      }
+      clusters.push(shadeColor(theme, 0.1))
+      return clusters
+    }
+  }
+}
+</script>
+
+<style>
+.theme-picker .el-color-picker__trigger {
+  vertical-align: middle;
+}
+
+.theme-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
+</style>

src/components/Tinymce/components/editorImage.vue

 <template>
-    <div class="upload-container">
-        <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
-        </el-button>
-        <el-dialog v-model="dialogVisible">
-            <el-upload
-                    class="editor-slide-upload"
-                    action="https://httpbin.org/post"
-                    :multiple="true"
-                    :file-list="fileList"
-                    :show-file-list="true"
-                    list-type="picture-card"
-                    :on-remove="handleRemove"
-                    :on-success="handleSuccess"
-                    :before-upload="beforeUpload">
-                <el-button size="small" type="primary">点击上传</el-button>
-            </el-upload>
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        </el-dialog>
-    </div>
+  <div class="upload-container">
+    <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
+        list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
+        <el-button size="small" type="primary">点击上传</el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </el-dialog>
+  </div>
 </template>
+
 <script>
 // import { getToken } from 'api/qiniu'
 

src/components/Tinymce/index.vue

 <template>
-  <div class='tinymce-container editor-container'>
-    <textarea class='tinymce-textarea' :id="tinymceId"></textarea>
+  <div class="tinymce-container editor-container">
+    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
     <div class="editor-custom-btn-container">
      <editorImage  color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
       </div>
@@ -52,104 +52,85 @@ export default {
     }
   },
   mounted() {
-    const _this = this
-    window.tinymce.init({
-      selector: `#${this.tinymceId}`,
-      height: this.height,
-      body_class: 'panel-body ',
-      object_resizing: false,
-      toolbar: this.toolbar,
-      menubar: this.menubar,
-      plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools',
-      end_container_on_empty_block: true,
-      powerpaste_word_import: 'clean',
-      code_dialog_height: 450,
-      code_dialog_width: 1000,
-      advlist_bullet_styles: 'square',
-      advlist_number_styles: 'default',
-      block_formats: '普通标签=p;小标题=h2;',
-      imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
-      imagetools_toolbar: 'watermark',
-      default_link_target: '_blank',
-      link_title: false,
-      init_instance_callback: editor => {
-        if (_this.value) {
-          editor.setContent(_this.value)
-        }
-        _this.hasInit = true
-        editor.on('NodeChange Change KeyUp', () => {
-          this.hasChange = true
-          this.$emit('input', editor.getContent({ format: 'raw' }))
-        })
-      },
-          // 整合七牛上传
-          // images_dataimg_filter(img) {
-          //   setTimeout(() => {
-          //     const $image = $(img);
-          //     $image.removeAttr('width');
-          //     $image.removeAttr('height');
-          //     if ($image[0].height && $image[0].width) {
-          //       $image.attr('data-wscntype', 'image');
-          //       $image.attr('data-wscnh', $image[0].height);
-          //       $image.attr('data-wscnw', $image[0].width);
-          //       $image.addClass('wscnph');
-          //     }
-          //   }, 0);
-          //   return img
-          // },
-          // images_upload_handler(blobInfo, success, failure, progress) {
-          //   progress(0);
-          //   const token = _this.$store.getters.token;
-          //   getToken(token).then(response => {
-          //     const url = response.data.qiniu_url;
-          //     const formData = new FormData();
-          //     formData.append('token', response.data.qiniu_token);
-          //     formData.append('key', response.data.qiniu_key);
-          //     formData.append('file', blobInfo.blob(), url);
-          //     upload(formData).then(() => {
-          //       success(url);
-          //       progress(100);
-          //     })
-          //   }).catch(err => {
-          //     failure('出现未知问题，刷新页面，或者联系程序员')
-          //     console.log(err);
-          //   });
-          // },
-      setup(editor) {
-        editor.addButton('h2', {
-          title: '小标题', // tooltip text seen on mouseover
-          text: '小标题',
-          onclick() {
-            editor.execCommand('mceToggleFormat', false, 'h2')
-          },
-          onPostRender() {
-            const btn = this
-            editor.on('init', () => {
-              editor.formatter.formatChanged('h2', state => {
-                btn.active(state)
-              })
-            })
-          }
-        })
-        editor.addButton('p', {
-          title: '正文',
-          text: '正文',
-          onclick() {
-            editor.execCommand('mceToggleFormat', false, 'p')
-          },
-          onPostRender() {
-            const btn = this
-            editor.on('init', () => {
-              editor.formatter.formatChanged('p', state => {
-                btn.active(state)
-              })
-            })
-          }
-        })
-      }
-    })
+    this.initTinymce()
+  },
+  activated() {
+    this.initTinymce()
+  },
+  deactivated() {
+    this.destroyTinymce()
   },
   methods: {
+    initTinymce() {
+      const _this = this
+      window.tinymce.init({
+        selector: `#${this.tinymceId}`,
+        height: this.height,
+        body_class: 'panel-body ',
+        object_resizing: false,
+        toolbar: this.toolbar,
+        menubar: this.menubar,
+        plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools',
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
+        imagetools_toolbar: 'watermark',
+        default_link_target: '_blank',
+        link_title: false,
+        init_instance_callback: editor => {
+          if (_this.value) {
+            editor.setContent(_this.value)
+          }
+          _this.hasInit = true
+          editor.on('NodeChange Change KeyUp', () => {
+            this.hasChange = true
+            this.$emit('input', editor.getContent({ format: 'raw' }))
+          })
+        }
+        // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img
+        // },
+        // images_upload_handler(blobInfo, success, failure, progress) {
+        //   progress(0);
+        //   const token = _this.$store.getters.token;
+        //   getToken(token).then(response => {
+        //     const url = response.data.qiniu_url;
+        //     const formData = new FormData();
+        //     formData.append('token', response.data.qiniu_token);
+        //     formData.append('key', response.data.qiniu_key);
+        //     formData.append('file', blobInfo.blob(), url);
+        //     upload(formData).then(() => {
+        //       success(url);
+        //       progress(100);
+        //     })
+        //   }).catch(err => {
+        //     failure('出现未知问题，刷新页面，或者联系程序员')
+        //     console.log(err);
+        //   });
+        // },
+      })
+    },
+    destroyTinymce() {
+      if (window.tinymce.get(this.tinymceId)) {
+        window.tinymce.get(this.tinymceId).destroy()
+      }
+    },
     setContent(value) {
       window.tinymce.get(this.tinymceId).setContent(value)
     },
@@ -164,7 +145,7 @@ export default {
     }
   },
   destroyed() {
-    window.tinymce.get(this.tinymceId).destroy()
+    this.destroyTinymce()
   }
 }
 </script>

src/directive/sticky.js

@@ -10,12 +10,12 @@ vueSticky.install = Vue => {
 
       elStyle.position = '-webkit-sticky'
       elStyle.position = 'sticky'
-        // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
-        // if (~elStyle.position.indexOf('sticky')) {
-        //     elStyle.top = `${stickyTop}px`;
-        //     elStyle.zIndex = zIndex;
-        //     return
-        // }
+      // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
+      // if (~elStyle.position.indexOf('sticky')) {
+      //     elStyle.top = `${stickyTop}px`;
+      //     elStyle.zIndex = zIndex;
+      //     return
+      // }
       const elHeight = el.getBoundingClientRect().height
       const elWidth = el.getBoundingClientRect().width
       elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`

src/filters/index.js

@@ -4,6 +4,7 @@ function pluralize(time, label) {
   }
   return time + label + 's'
 }
+
 export function timeAgo(time) {
   const between = Date.now() / 1000 - Number(time)
   if (between < 3600) {
@@ -77,12 +78,12 @@ export function formatTime(time, option) {
 /* 数字 格式化*/
 export function nFormatter(num, digits) {
   const si = [
-        { value: 1E18, symbol: 'E' },
-        { value: 1E15, symbol: 'P' },
-        { value: 1E12, symbol: 'T' },
-        { value: 1E9, symbol: 'G' },
-        { value: 1E6, symbol: 'M' },
-        { value: 1E3, symbol: 'k' }
+    { value: 1E18, symbol: 'E' },
+    { value: 1E15, symbol: 'P' },
+    { value: 1E12, symbol: 'T' },
+    { value: 1E9, symbol: 'G' },
+    { value: 1E6, symbol: 'M' },
+    { value: 1E3, symbol: 'k' }
   ]
   for (let i = 0; i < si.length; i++) {
     if (num >= si[i].value) {

src/icons/index.js

 import Vue from 'vue'
-import IconSvg from '@/components/Icon-svg'// svg组件
-import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for views/icons , you can delete it
-// register globally
+import SvgIcon from '@/components/SvgIcon'// svg组件
+import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it
 
-Vue.component('icon-svg', IconSvg)
+// register globally
+Vue.component('svg-icon', SvgIcon)
 
 const requireAll = requireContext => requireContext.keys().map(requireContext)
 const req = require.context('./svg', false, /\.svg$/)
 const iconMap = requireAll(req)
 
-generateIconsView.generate(iconMap) // just for views/icons , you can delete it
+generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

src/icons/svg/dashboard.svg

+<?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="1509611822979" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10379" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M219.428571 658.285714q0-30.285714-21.428571-51.714285T146.285714 585.142857t-51.714285 21.428572T73.142857 658.285714t21.428572 51.714286T146.285714 731.428571t51.714286-21.428571T219.428571 658.285714z m109.714286-256q0-30.285714-21.428571-51.714285T256 329.142857t-51.714286 21.428572T182.857143 402.285714t21.428571 51.714286T256 475.428571t51.714286-21.428571T329.142857 402.285714z m244.571429 274.857143l57.714285-218.285714q3.428571-14.857143-4.285714-27.714286T605.142857 414.285714t-27.428571 3.714286-17.142857 22.571429l-57.714286 218.285714q-34.285714 2.857143-61.142857 24.857143t-36 56.285714q-11.428571 44 11.428571 83.428571t66.857143 50.857143 83.428571-11.428571 50.857143-66.857143q9.142857-34.285714-3.428571-66.857143t-41.142857-52z m377.142857-18.857143q0-30.285714-21.428572-51.714285T877.714286 585.142857t-51.714286 21.428572-21.428571 51.714285 21.428571 51.714286 51.714286 21.428571 51.714285-21.428571 21.428572-51.714286z m-365.714286-365.714285q0-30.285714-21.428571-51.714286T512 219.428571t-51.714286 21.428572T438.857143 292.571429t21.428571 51.714285T512 365.714286t51.714286-21.428572T585.142857 292.571429z m256 109.714285q0-30.285714-21.428571-51.714285T768 329.142857t-51.714286 21.428572T694.857143 402.285714t21.428571 51.714286T768 475.428571t51.714286-21.428571T841.142857 402.285714z m182.857143 256q0 149.142857-80.571429 276-10.857143 16.571429-30.857142 16.571429H111.428571q-20 0-30.857142-16.571429Q0 808 0 658.285714q0-104 40.571429-198.857143t109.142857-163.428571 163.428571-109.142857 198.857143-40.571429 198.857143 40.571429 163.428571 109.142857 109.142857 163.428571 40.571429 198.857143z" p-id="10380"></path></svg>
\ No newline at end of file

src/icons/svg/documentation.svg

+<?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="1510826638494" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1669" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M743.253333 144.184889H374.499556v734.378667H743.253333a92.017778 92.017778 0 0 0 92.16-91.818667V235.975111a91.989333 91.989333 0 0 0-92.16-91.790222z m-0.398222 293.888c0.398222 20.48-1.507556 26.794667-9.756444 26.794667-3.612444 0.597333-9.415111-1.621333-17.863111-8.874667-12.657778-8.931556-21.504-16.753778-29.155556-21.617778-6.798222-5.888-17.550222-5.205333-24.291556 0-8.874667 4.949333-21.532444 15.872-28.814222 21.617778-8.988444 7.907556-15.018667 8.874667-17.180444 8.874667-8.618667 0-10.837333-7.424-10.496-26.794667l-0.312889-223.601778c0-21.162667 8.561778-24.376889 17.265778-24.376889h103.708444c10.552889 0 17.294222 4.835556 17.294222 24.376889l-0.398222 223.601778zM190.122667 235.975111V786.773333a92.046222 92.046222 0 0 0 92.188444 91.818667h46.08V144.184889h-46.08a92.017778 92.017778 0 0 0-92.188444 91.790222z" fill="" p-id="1670"></path></svg>

src/icons/svg/international.svg

+<?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="1509677746926" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1419" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M666.298182 824.087273c-12.567273-30.72-54.225455-83.316364-123.578182-156.392728-18.618182-19.549091-17.454545-34.443636-10.705455-78.894545v-5.12c4.421818-30.487273 12.101818-48.407273 114.501819-64.698182 52.130909-8.145455 65.629091 12.567273 84.712727 41.425455l6.283636 9.541818a101.003636 101.003636 0 0 0 51.432728 41.658182c9.076364 4.189091 20.247273 9.309091 35.374545 17.92C861.090909 649.774545 861.090909 672.814545 861.090909 723.549091v5.818182a215.272727 215.272727 0 0 1-41.425454 139.636363 472.436364 472.436364 0 0 1-152.203637 88.203637c27.927273-52.363636 6.516364-114.501818 0-132.421818zM512 40.96a468.014545 468.014545 0 0 1 203.869091 46.545455 434.501818 434.501818 0 0 0-102.865455 82.618181c-7.447273 10.24-13.730909 19.781818-19.781818 28.625455-19.549091 29.556364-29.090909 42.821818-46.545454 44.916364a200.843636 200.843636 0 0 1-33.745455 0c-34.210909-2.327273-80.756364-5.12-95.650909 35.374545-9.541818 25.832727-11.170909 95.650909 19.549091 131.956364a32.349091 32.349091 0 0 1 2.56 28.625454 56.087273 56.087273 0 0 1-16.523636 25.832727 151.505455 151.505455 0 0 1-23.272728-23.272727 151.272727 151.272727 0 0 0-66.56-52.829091c-10.007273-2.792727-21.178182-5.12-31.883636-7.447272-30.254545-6.283636-64.232727-13.498182-72.145455-30.487273a119.156364 119.156364 0 0 1-5.818181-46.545455 175.476364 175.476364 0 0 0-11.17091-74.007272 70.981818 70.981818 0 0 0-44.450909-39.563637A469.643636 469.643636 0 0 1 512 40.96zM0 512A512 512 0 1 0 512 0 512 512 0 0 0 0 512z" p-id="1420"></path></svg>
\ No newline at end of file

src/icons/svg/language.svg

+<?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="1509704884729" class="icon" style="" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6279" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="32"><defs><style type="text/css"></style></defs><path d="M729.6 294.4c19.2 57.6 44.8 102.4 89.6 147.2 38.4-38.4 64-89.6 83.2-147.2h-172.8zM307.2 614.4h166.4L390.4 390.4z" p-id="6280"></path><path d="M947.2 0h-768C108.8 0 51.2 57.6 51.2 128v768c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128V128c0-70.4-51.2-128-128-128zM633.6 825.6c-12.8 12.8-25.6 12.8-38.4 12.8-6.4 0-19.2 0-25.6-6.4s-12.8 0-12.8-6.4-6.4-12.8-12.8-25.6-6.4-19.2-12.8-32l-25.6-70.4H281.6L256 768c-12.8 25.6-19.2 44.8-25.6 57.6-6.4 12.8-19.2 12.8-38.4 12.8-12.8 0-25.6-6.4-38.4-12.8-12.8-12.8-19.2-19.2-19.2-32 0-6.4 0-12.8 6.4-25.6s6.4-19.2 12.8-32l140.8-358.4c6.4-12.8 6.4-25.6 12.8-38.4s12.8-25.6 19.2-32 12.8-19.2 25.6-25.6c12.8-6.4 25.6-6.4 38.4-6.4 12.8 0 25.6 0 38.4 6.4 12.8 6.4 19.2 12.8 25.6 25.6 6.4 6.4 12.8 19.2 19.2 32 6.4 12.8 12.8 25.6 19.2 44.8l140.8 352c12.8 25.6 19.2 44.8 19.2 57.6-6.4 6.4-12.8 19.2-19.2 32zM985.6 576c-70.4-25.6-121.6-57.6-166.4-96-44.8 44.8-102.4 76.8-172.8 96l-19.2-32c70.4-19.2 128-44.8 172.8-89.6-44.8-44.8-83.2-102.4-96-166.4h-64v-25.6h172.8c-12.8-19.2-25.6-44.8-38.4-64l19.2-6.4c12.8 19.2 32 44.8 44.8 70.4h160v32h-64c-19.2 64-51.2 121.6-89.6 160 44.8 38.4 96 70.4 166.4 89.6l-25.6 32z" p-id="6281"></path></svg>

src/icons/svg/message.svg

+<?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="1510727568680" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2026" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M0 202.7V631c0 83.3 68.3 150.7 152.6 150.7h228.9l8 190.3 224.9-190.3h257c84.3 0 152.6-67.4 152.6-150.7V202.7C1024 119.4 955.7 52 871.4 52H152.6C68.3 52 0 119.4 0 202.7z m658.6 237.9c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S771 512 730.9 512c-40.2 0-72.3-31.7-72.3-71.4z m-220.9 0c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S550.1 512 510 512c-40.2 0-72.3-31.7-72.3-71.4z m-216.8 0c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S333.3 512 293.1 512c-40.1 0-72.2-31.7-72.2-71.4z" p-id="2027"></path></svg>
\ No newline at end of file

src/icons/svg/money.svg

+<?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="1510727546462" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1764" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M463.3 958.3V772.1H228.8v-77.5h234.5v-80.5H228.8v-83.5H420L191.5 128h113.7L469 420.6c18.2 33.4 32.4 62.4 42.7 86.9 9-19.8 24.6-50.5 46.8-92.1L713.9 128h120.8L605.5 530.6h192.9v83.5H564.9v80.5h233.5v77.5H564.9v186.2H463.3z" p-id="1765"></path></svg>
\ No newline at end of file

src/icons/svg/peoples.svg

+<?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="1510727502091" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1640" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M765.184 873.941333c0 33.28-28.501333 60.288-63.829333 60.288L63.829333 934.229333C28.501333 934.229333 0 907.221333 0 873.941333c0-120.576 123.264-233.258667 249.216-277.674667-72.789333-42.496-121.728-118.058667-121.728-204.8L127.488 331.136c0-133.248 114.346667-241.365333 255.146667-241.365333s255.146667 108.117333 255.146667 241.365333l0 60.288c0 86.826667-48.981333 162.304-121.728 204.842667C641.962667 640.725333 765.184 753.365333 765.184 873.941333L765.184 873.941333z" p-id="1641"></path><path d="M848.256 870.570667l126.933333 0c27.008 0 48.810667-20.650667 48.810667-46.08 0-92.245333-94.293333-178.346667-190.549333-212.309333 55.637333-32.512 93.098667-90.282667 93.098667-156.672L926.549333 409.344c0-101.888-87.424-184.576-195.114667-184.576-13.397333 0-26.453333 1.28-39.125333 3.712 15.488 31.146667 24.149333 65.92 24.149333 102.613333l0 60.288c0 86.826667-24.448 152.746667-88.533333 204.842667C746.666667 625.365333 846.421333 751.018667 848.256 870.570667z" p-id="1642"></path></svg>
\ No newline at end of file

src/icons/svg/shoppingCard.svg

+<?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="1510727582324" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2288" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M347.136 783.36q19.456 0 36.864 7.168t30.72 19.968 20.48 30.208 7.168 36.864-7.168 36.864-20.48 30.208-30.72 20.48-36.864 7.68q-20.48 0-37.376-7.68t-30.208-20.48-20.48-30.208-7.168-36.864 7.168-36.864 20.48-30.208 30.208-19.968 37.376-7.168zM773.12 785.408q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM945.152 203.776q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-12.8 37.888-22.016 62.976-24.064 68.096-17.92 53.248q-13.312 40.96-33.792 56.832t-50.176 15.872l-34.816 0-66.56 0-87.04 0-95.232 0-253.952 0 15.36 92.16 516.096 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-95.232 0-117.76 0-119.808 0-98.304 0-56.32 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l22.528 0 20.48 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0z" p-id="2289"></path></svg>
\ No newline at end of file

src/lang/en.js

+export default {
+  route: {
+    dashboard: 'Dashboard',
+    introduction: 'Introduction',
+    documentation: 'Documentation',
+    permission: 'Permission',
+    icons: 'Icons',
+    components: 'Components',
+    componentIndex: 'Introduction',
+    tinymce: 'Tinymce',
+    markdown: 'Markdown',
+    jsonEditor: 'JSON Editor',
+    dndList: 'Dnd List',
+    splitPane: 'SplitPane',
+    avatarUpload: 'Avatar Upload',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'CountTo',
+    componentMixin: 'Mixin',
+    backToTop: 'BackToTop',
+    charts: 'Charts',
+    keyboardChart: 'Keyboard Chart',
+    lineChart: 'Line chart',
+    mixChart: 'Mix Chart',
+    example: 'Example',
+    Table: 'Table',
+    dynamicTable: 'Dynamic Table',
+    dragTable: 'Drag Table',
+    inlineEditTable: 'Inline Edit',
+    complexTable: 'Complex Table',
+    tab: 'Tab',
+    form: 'Form',
+    createForm: 'Create Form',
+    editForm: 'Edit Form',
+    errorPages: 'Error Pages',
+    page401: '401',
+    page404: '404',
+    errorLog: 'Error Log',
+    excel: 'Excel',
+    exportExcel: 'Export Excel',
+    selectExcel: 'Export Selected',
+    uploadExcel: 'Upload Excel',
+    exportZip: 'Zip',
+    theme: 'Theme',
+    clipboardDemo: 'Clipboard',
+    i18n: 'I18n'
+  }
+}

src/lang/index.js

+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Cookies from 'js-cookie'
+import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
+import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
+import enLocale from './en'
+import zhLocale from './zh'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    ...enLocale,
+    ...elementEnLocale
+  },
+  zh: {
+    ...zhLocale,
+    ...elementZhLocale
+  }
+}
+
+const i18n = new VueI18n({
+  locale: Cookies.get('language') || 'zh', // set locale
+  messages // set locale messages
+})
+
+export default i18n

src/lang/zh.js

+export default {
+  route: {
+    dashboard: '首页',
+    introduction: '简述',
+    documentation: '文档',
+    permission: '权限测试页',
+    icons: '图标',
+    components: '组件',
+    componentIndex: '介绍',
+    tinymce: '富文本编辑器',
+    markdown: 'Markdown',
+    jsonEditor: 'JSON编辑器',
+    dndList: '列表拖拽',
+    splitPane: 'Splitpane',
+    avatarUpload: '头像上传',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'CountTo',
+    componentMixin: '小组件',
+    backToTop: '返回顶部',
+    charts: '图表',
+    keyboardChart: '键盘图表',
+    lineChart: '折线图',
+    mixChart: '混合图表',
+    example: '综合实例',
+    Table: 'Table',
+    dynamicTable: '动态table',
+    dragTable: '拖拽table',
+    inlineEditTable: 'table内编辑',
+    complexTable: '综合table',
+    tab: 'Tab',
+    form: '表单',
+    createForm: '创建表单',
+    editForm: '编辑表单',
+    errorPages: '错误页面',
+    page401: '401',
+    page404: '404',
+    errorLog: '错误日志',
+    excel: 'excel',
+    exportExcel: 'export excel',
+    selectExcel: 'export selected',
+    uploadExcel: 'upload excel',
+    exportZip: 'zip',
+    theme: '换肤',
+    clipboardDemo: 'clipboard',
+    i18n: '国际化'
+  }
+}

src/main.js

 import Vue from 'vue'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import i18n from './lang' // 国际化
 import App from './App'
 import router from './router'
 import store from './store'
@@ -8,9 +9,11 @@ import * as filters from './filters' // 全局filter
 import './icons' // icon
 import './errorLog'// error log
 import './permission' // 权限
-import './mock'  // 该项目所有请求使用mockjs模拟
+import './mock' // 该项目所有请求使用mockjs模拟
 
-Vue.use(ElementUI)
+Vue.use(Element, {
+  i18n: (key, value) => i18n.t(key, value)
+})
 
 // register global utility filters.
 Object.keys(filters).forEach(key => {
@@ -23,6 +26,7 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   template: '<App/>',
   components: { App }
 })

src/mock/article.js

@@ -50,7 +50,7 @@ export default {
     author: { key: 'mockPan' },
     source_name: '原创作者',
     category_item: [{ key: 'global', name: '全球' }],
-    comment_disabled: false,
+    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(),
@@ -59,6 +59,6 @@ export default {
     source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
     status: 'published',
     tags: [],
-    title: ''
+    title: 'vue-element-admin'
   })
 }

src/mock/index.js

@@ -2,6 +2,7 @@ import Mock from 'mockjs'
 import loginAPI from './login'
 import articleAPI from './article'
 import remoteSearchAPI from './remoteSearch'
+import transactionAPI from './transaction'
 
 Mock.setup({
   timeout: '350-600'
@@ -20,4 +21,7 @@ Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
 // 搜索相关
 Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
 
+// 账单相关
+Mock.mock(/\/transaction\/list/, 'get', transactionAPI.getList)
+
 export default Mock

src/mock/login.js

@@ -14,13 +14,6 @@ const userMap = {
     introduction: '我是编辑',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Normal Editor'
-  },
-  developer: {
-    role: ['develop'],
-    token: 'develop',
-    introduction: '我是开发',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: '工程师小王'
   }
 }
 

src/mock/transaction.js

+import Mock from 'mockjs'
+
+const List = []
+const count = 20
+
+for (let i = 0; i < count; i++) {
+  List.push(Mock.mock({
+    order_no: '@guid()',
+    timestamp: +Mock.Random.date('T'),
+    username: '@name()',
+    price: '@float(1000, 15000, 0, 2)',
+    'status|1': ['success', 'pending']
+  }))
+}
+
+export default {
+  getList: () => {
+    return {
+      total: List.length,
+      items: List
+    }
+  }
+}

src/permission.js

@@ -12,8 +12,8 @@ function hasPermission(roles, permissionRoles) {
   return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }
 
-// register global progress.
 const whiteList = ['/login', '/authredirect']// 不重定向白名单
+
 router.beforeEach((to, from, next) => {
   NProgress.start() // 开启Progress
   if (getToken()) { // 判断是否有token

src/router/_import_development.js

-module.exports = file => require('@/views/' + file + '.vue').default  // vue-loader at least v13.0.0+
+module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

src/router/index.js

 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
+// 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 */
+/* Layout */
 import Layout from '../views/layout/Layout'
 
 /**
-* icon : the icon show in the sidebar
-* hidden : if `hidden:true` will not show in the sidebar
-* redirect : if `redirect:noredirect` will no redirct in the levelbar
-* noDropdown : if `noDropdown:true` will has no submenu
-* meta : { role: ['admin'] }  will control the page role
+* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
+* redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
+* name:'router-name'             the name is used by <keep-alive> (must set!!!)
+* meta : {
+    role: ['admin','editor']     will control the page role (you can set multiple roles)
+    title: 'title'               the name show in submenu and breadcrumb (recommend set)
+    icon: 'svg-name'             the icon show in the sidebar,
+    noCache: true                if fasle ,the page will no be cached(default is false)
+  }
 **/
 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('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: '/',
+    path: '',
     component: Layout,
-    redirect: '/dashboard',
-    name: '首页',
-    hidden: true,
-    children: [{ path: 'dashboard', component: _import('dashboard/index') }]
+    redirect: 'dashboard',
+    children: [{
+      path: 'dashboard',
+      component: _import('dashboard/index'),
+      name: 'dashboard',
+      meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
+    }]
   },
   {
-    path: '/introduction',
+    path: '/documentation',
     component: Layout,
-    redirect: '/introduction/index',
-    icon: 'people',
-    noDropdown: true,
-    children: [{ path: 'index', component: _import('introduction/index'), name: '简述' }]
+    redirect: '/documentation/index',
+    children: [{
+      path: 'index',
+      component: _import('documentation/index'),
+      name: 'documentation',
+      meta: { title: 'documentation', icon: 'documentation', noCache: true }
+    }]
   }
 ]
 
@@ -49,137 +60,178 @@ export const asyncRouterMap = [
     path: '/permission',
     component: Layout,
     redirect: '/permission/index',
-    name: '权限测试',
-    icon: 'lock',
     meta: { role: ['admin'] },
-    noDropdown: true,
-    children: [{ path: 'index', component: _import('permission/index'), name: '权限测试页', meta: { role: ['admin'] }}]
+    children: [{
+      path: 'index',
+      component: _import('permission/index'),
+      name: 'permission',
+      meta: {
+        title: 'permission',
+        icon: 'lock',
+        role: ['admin']
+      }
+    }]
   },
+
   {
     path: '/icon',
     component: Layout,
-    icon: 'icon',
-    noDropdown: true,
-    children: [{ path: 'index', component: _import('svg-icons/index'), name: 'icons' }]
+    children: [{
+      path: 'index',
+      component: _import('svg-icons/index'),
+      name: 'icons',
+      meta: { title: 'icons', icon: 'icon', noCache: true }
+    }]
   },
+
   {
     path: '/components',
     component: Layout,
-    redirect: '/components/index',
-    name: '组件',
-    icon: 'component',
+    redirect: 'noredirect',
+    name: 'component-demo',
+    meta: {
+      title: 'components',
+      icon: 'component'
+    },
     children: [
-      { path: 'index', component: _import('components/index'), name: '介绍 ' },
-      { path: 'tinymce', component: _import('components/tinymce'), name: '富文本编辑器' },
-      { path: 'markdown', component: _import('components/markdown'), name: 'Markdown' },
-      { path: 'jsoneditor', component: _import('components/jsonEditor'), name: 'JSON编辑器' },
-      { path: 'dndlist', component: _import('components/dndList'), name: '列表拖拽' },
-      { path: 'splitpane', component: _import('components/splitpane'), name: 'SplitPane' },
-      { path: 'avatarupload', component: _import('components/avatarUpload'), name: '头像上传' },
-      { path: 'dropzone', component: _import('components/dropzone'), name: 'Dropzone' },
-      { path: 'sticky', component: _import('components/sticky'), name: 'Sticky' },
-      { path: 'countto', component: _import('components/countTo'), name: 'CountTo' },
-      { path: 'mixin', component: _import('components/mixin'), name: '小组件' },
-      { path: 'backtotop', component: _import('components/backToTop'), name: '返回顶部' }
+      { 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: '/charts',
     component: Layout,
-    redirect: '/charts/index',
-    name: '图表',
-    icon: 'chart',
+    redirect: 'noredirect',
+    name: 'charts',
+    meta: {
+      title: 'charts',
+      icon: 'chart'
+    },
     children: [
-      { path: 'index', component: _import('charts/index'), name: '介绍' },
-      { path: 'keyboard', component: _import('charts/keyboard'), name: '键盘图表' },
-      { path: 'keyboard2', component: _import('charts/keyboard2'), name: '键盘图表2' },
-      { path: 'line', component: _import('charts/line'), name: '折线图' },
-      { path: 'mixchart', component: _import('charts/mixChart'), name: '混合图表' }
+      { 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: '/example',
     component: Layout,
-    redirect: 'noredirect',
-    name: '综合实例',
-    icon: 'example',
+    redirect: '/example/table/complex-table',
+    name: 'example',
+    meta: {
+      title: 'example',
+      icon: 'example'
+    },
     children: [
       {
         path: '/example/table',
         component: _import('example/table/index'),
-        redirect: '/example/table/table',
+        redirect: '/example/table/complex-table',
         name: 'Table',
-        icon: 'table',
+        meta: {
+          title: 'Table',
+          icon: 'table'
+        },
         children: [
-          { path: 'dynamictable', component: _import('example/table/dynamicTable/index'), name: '动态table' },
-          { path: 'dragtable', component: _import('example/table/dragTable'), name: '拖拽table' },
-          { path: 'inline_edit_table', component: _import('example/table/inlineEditTable'), name: 'table内编辑' },
-          { path: 'table', component: _import('example/table/table'), name: '综合table' }
+          { 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: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
         ]
       },
-      { path: 'form/edit', icon: 'form', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true }},
-      { path: 'form/create', icon: 'form', component: _import('example/form'), name: '创建Form' },
-      { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'Tab' }
+      { 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: '/error',
     component: Layout,
     redirect: 'noredirect',
-    name: '错误页面',
-    icon: '404',
+    name: 'errorPages',
+    meta: {
+      title: 'errorPages',
+      icon: '404'
+    },
     children: [
-      { path: '401', component: _import('errorPage/401'), name: '401' },
-      { path: '404', component: _import('errorPage/404'), name: '404' }
+      { 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: '/errlog',
+    path: '/error-log',
     component: Layout,
     redirect: 'noredirect',
-    name: 'errlog',
-    icon: 'bug',
-    noDropdown: true,
-    children: [{ path: 'log', component: _import('errlog/index'), name: '错误日志' }]
+    children: [{ path: 'log', component: _import('errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}]
   },
+
   {
     path: '/excel',
     component: Layout,
-    redirect: '/excel/download',
+    redirect: '/excel/export-excel',
     name: 'excel',
-    icon: 'excel',
+    meta: {
+      title: 'excel',
+      icon: 'excel'
+    },
     children: [
-      { path: 'download', component: _import('excel/index'), name: 'export excel' },
-      { path: 'download2', component: _import('excel/selectExcel'), name: 'export selected' },
-      { path: 'upload', component: _import('excel/uploadExcel'), name: 'upload excel' }
+      { 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: '/zip',
     component: Layout,
     redirect: '/zip/download',
-    name: 'zip',
-    icon: 'zip',
-    children: [
-      { path: 'download', component: _import('zip/index'), name: 'export zip' }
-    ]
+    children: [{ path: 'download', component: _import('zip/index'), name: 'exportZip', meta: { title: 'exportZip', icon: 'zip' }}]
   },
+
   {
     path: '/theme',
     component: Layout,
     redirect: 'noredirect',
-    name: 'theme',
-    icon: 'theme',
-    noDropdown: true,
-    children: [{ path: 'index', component: _import('theme/index'), name: '换肤' }]
+    children: [{ path: 'index', component: _import('theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}]
   },
+
   {
     path: '/clipboard',
     component: Layout,
     redirect: 'noredirect',
-    icon: 'clipboard',
-    noDropdown: true,
-    children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboard' }]
+    children: [{ path: 'index', component: _import('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' }}]
   },
 
   { path: '*', redirect: '/404', hidden: true }

src/store/getters.js

 const getters = {
   sidebar: state => state.app.sidebar,
+  language: state => state.app.language,
   visitedViews: state => state.app.visitedViews,
+  cachedViews: state => state.app.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,

src/store/modules/app.js

@@ -5,7 +5,9 @@ const app = {
     sidebar: {
       opened: !+Cookies.get('sidebarStatus')
     },
-    visitedViews: []
+    language: Cookies.get('language') || 'zh',
+    visitedViews: [],
+    cachedViews: []
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
@@ -16,25 +18,44 @@ const app = {
       }
       state.sidebar.opened = !state.sidebar.opened
     },
+    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 })
+      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) => {
-      let index
       for (const [i, v] of state.visitedViews.entries()) {
         if (v.path === view.path) {
-          index = i
+          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
         }
       }
-      state.visitedViews.splice(index, 1)
     }
   },
   actions: {
-    ToggleSideBar({ commit }) {
+    toggleSideBar({ commit }) {
       commit('TOGGLE_SIDEBAR')
     },
+    setLanguage({ commit }, language) {
+      commit('SET_LANGUAGE', language)
+    },
     addVisitedViews({ commit }, view) {
       commit('ADD_VISITED_VIEWS', view)
     },

src/store/modules/user.js

@@ -50,8 +50,8 @@ const user = {
       return new Promise((resolve, reject) => {
         loginByUsername(username, userInfo.password).then(response => {
           const data = response.data
-          setToken(response.data.token)
           commit('SET_TOKEN', data.token)
+          setToken(response.data.token)
           resolve()
         }).catch(error => {
           reject(error)

src/styles/btn.scss

-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
+@import './variables.scss';
 
 @mixin colorBtn($color) {
   background: $color;

src/styles/element-ui.scss

  //覆盖一些element-ui样式
- .block-checkbox {
-   display: block;
- }
-
- .operation-container {
-   .cell {
-     padding: 10px !important;
-   }
-   .el-button {
-     &:nth-child(3) {
-       margin-top: 10px;
-       margin-left: 0px;
-     }
-     &:nth-child(4) {
-       margin-top: 10px;
-     }
-   }
- }
 
  .el-upload {
    input[type="file"] {
@@ -30,7 +12,7 @@
 
  .cell {
    .el-tag {
-     margin-right: 8px;
+     margin-right: 0px;
    }
  }
 

src/styles/index.scss

+@import './variables.scss';
 @import './mixin.scss';
-@import './btn.scss';
+@import './transition.scss';
 @import './element-ui.scss';
 @import './sidebar.scss';
+@import './btn.scss';
+
 body {
+  height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -14,9 +18,14 @@ label {
 }
 
 html {
+  height: 100%;
   box-sizing: border-box;
 }
 
+#app{
+  height: 100%;
+}
+
 *,
 *:before,
 *:after {
@@ -44,6 +53,10 @@ a:hover {
   text-decoration: none;
 }
 
+div:focus{
+  outline: none;
+ }
+
 .fr {
   float: right;
 }
@@ -72,6 +85,17 @@ a:hover {
   display: block;
 }
 
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
 code {
   background: #eef1f6;
   padding: 15px 10px;
@@ -87,14 +111,17 @@ code {
   }
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: all .2s ease
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
+.warn-content{
+  background: rgba(66,185,131,.1);
+  border-radius: 2px;
+  padding: 16px;
+  padding: 1rem;
+  line-height: 1.6rem;
+  word-spacing: .05rem;
+  a{
+    color: #42b983;
+    font-weight: 600;
+  }
 }
 
 //main-container全局样式
@@ -119,14 +146,6 @@ code {
   text-align: center
 }
 
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
 .sub-navbar {
   height: 50px;
   line-height: 50px;
@@ -157,57 +176,6 @@ code {
   }
 }
 
-.publishedTag,
-.draftTag,
-.deletedTag {
-  color: #fff;
-  background-color: $panGreen;
-  line-height: 1;
-  text-align: center;
-  margin: 0;
-  padding: 8px 12px;
-  font-size: 14px;
-  border-radius: 4px;
-  position: absolute;
-  left: 20px;
-  top: 10px;
-}
-
-.draftTag {
-  background-color: $yellow;
-}
-
-.deletedTag {
-  background-color: $red;
-}
-
-.input-label {
-  font-size: 14px;
-  color: #48576a;
-  line-height: 1;
-  padding: 11px 5px 11px 0;
-}
-
-.clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-}
-
-.no-marginLeft {
-  .el-checkbox {
-    margin: 0 20px 15px 0;
-  }
-  .el-checkbox+.el-checkbox {
-    margin-left: 0px;
-  }
-}
-
 .filter-container {
   padding-bottom: 10px;
   .filter-item {
@@ -225,48 +193,3 @@ code {
 .multiselect--active {
   z-index: 1000 !important;
 }
-
-//refine simplemde
-.simplemde-container {
-  .editor-toolbar.fullscreen,
-  .CodeMirror-fullscreen {
-    z-index: 1003;
-  }
-}
-
-//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
-//github-corner
-.github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out
-}
-
-@keyframes octocat-wave {
-  0%,
-  100% {
-    transform: rotate(0)
-  }
-  20%,
-  60% {
-    transform: rotate(-25deg)
-  }
-  40%,
-  80% {
-    transform: rotate(10deg)
-  }
-}
-
-@media (max-width:500px) {
-  .github-corner:hover .octo-arm {
-    animation: none
-  }
-  .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
-  }
-}

src/styles/sidebar.scss

-// 侧边栏
-.sidebar-container>.el-menu {
-  width: 100%!important;
-  min-height: 100%;
-}
-
-.sidebar-container .svg-icon {
-  margin-right: 16px;
-}
-
-.hideSidebar .el-submenu>.el-submenu__title,
-.hideSidebar .submenu-title-noDropdown {
-  padding-left: 10px!important;
-}
-
-.hideSidebar .submenu-title-noDropdown span,
-.hideSidebar .el-submenu>.el-submenu__title>span {
-  height: 0;
-  width: 0;
-  overflow: hidden;
-  visibility: hidden;
-  display: inline-block;
-}
-
-.hideSidebar .nest-menu .el-submenu__title {
-  text-align: initial!important;
-  padding-left: 20px!important;
-  span {
-    height: auto;
-    width: auto;
-    visibility: visible;
-    display: inline;
+#app {
+  // 主体区域
+  .main-container {
+    min-height: 100%;
+    transition: margin-left 0.28s;
+    margin-left: 180px;
+  } // 侧边栏
+  .sidebar-container {
+    transition: width 0.28s;
+    width: 180px!important;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    a {
+      display: inline-block;
+      width: 100%;
+    }
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .el-menu {
+      border: none;
+      width: 100%;
+    }
   }
-  .el-submenu__icon-arrow {
-    display: block!important;
+  .hideSidebar {
+    .sidebar-container,.sidebar-container .el-menu {
+      width: 36px!important;
+      // overflow: inherit;
+    }
+    .main-container {
+      margin-left: 36px;
+    }
   }
-}
-
-.hideSidebar .menu-wrapper>.el-menu-item,
-.hideSidebar .submenu-title-noDropdown,
-.hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
-  text-align: center;
-}
-
-.hideSidebar .el-menu-item .el-submenu__icon-arrow,
-.hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
-  display: none;
-}
-
-.hideSidebar .submenu-title-noDropdown {
-  position: relative;
-  span {
-    transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
-    opacity: 0;
+  .hideSidebar {
+    .submenu-title-noDropdown {
+      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-submenu {
+      &>.el-submenu__title {
+        padding-left: 10px!important;
+        &>span {
+          display: none;
+        }
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+      .nest-menu {
+        .el-submenu__icon-arrow {
+          display: block!important;
+        }
+        span {
+          display: inline-block!important;
+        }
+      }
+    }
   }
-  &: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: #1f2d3d;
-      opacity: 1;
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-submenu .el-menu-item {
+    min-width: 180px!important;
+    background-color: $subMenuBg!important;
+    &:hover {
+      background-color: $menuHover!important;
     }
   }
-}
-
-.el-submenu .el-menu-item {
-  min-width: 180px!important;
+  .el-menu--collapse .el-menu .el-submenu{
+    min-width: 180px!important;
+  }
 }

src/styles/transition.scss

+//globl transition css
+
+/*fade*/
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/*fade*/
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+

src/styles/variables.scss

+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
+//sidebar
+$menuBg:#304156;
+$subMenuBg:#1f2d3d;
+$menuHover:#001528;

src/utils/clipboard.js

-import Clipboard from 'clipboard'
 import Vue from 'vue'
+import Clipboard from 'clipboard'
 
 function clipboardSuccess() {
   Vue.prototype.$message({

src/utils/index.js

@@ -2,266 +2,273 @@
  * Created by jiachenpan on 16/11/18.
  */
 
- export function parseTime(time, cFormat) {
-   if (arguments.length === 0) {
-     return null
-   }
-   const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-   let date
-   if (typeof time === 'object') {
-     date = time
-   } else {
-     if (('' + time).length === 10) time = parseInt(time) * 1000
-     date = new Date(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 parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000
+    date = new Date(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()
+export function formatTime(time, option) {
+  time = +time * 1000
+  const d = new Date(time)
+  const now = Date.now()
 
-   const diff = (now - d) / 1000
+  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() + '分'
-   }
- }
+  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 getQueryObject(url) {
-   url = url == null ? window.location.href : url
-   const search = url.substring(url.lastIndexOf('?') + 1)
-   const obj = {}
-   const reg = /([^?&=]+)=([^?&=]*)/g
-   search.replace(reg, (rs, $1, $2) => {
-     const name = decodeURIComponent($1)
-     let val = decodeURIComponent($2)
-     val = String(val)
-     obj[name] = val
-     return rs
-   })
-   return obj
- }
+export function getQueryObject(url) {
+  url = url == null ? window.location.href : url
+  const search = url.substring(url.lastIndexOf('?') + 1)
+  const obj = {}
+  const reg = /([^?&=]+)=([^?&=]*)/g
+  search.replace(reg, (rs, $1, $2) => {
+    const name = decodeURIComponent($1)
+    let val = decodeURIComponent($2)
+    val = String(val)
+    obj[name] = val
+    return rs
+  })
+  return obj
+}
 
 /**
  *get getByteLen
  * @param {Sting} val input value
  * @returns {number} output value
  */
- export function getByteLen(val) {
-   let len = 0
-   for (let i = 0; i < val.length; i++) {
-     if (val[i].match(/[^\x00-\xff]/ig) != null) {
-       len += 1
-     } else { len += 0.5 }
-   }
-   return Math.floor(len)
- }
+export function getByteLen(val) {
+  let len = 0
+  for (let i = 0; i < val.length; i++) {
+    if (val[i].match(/[^\x00-\xff]/ig) != null) {
+      len += 1
+    } else { len += 0.5 }
+  }
+  return Math.floor(len)
+}
 
- export function cleanArray(actual) {
-   const newArray = []
-   for (let i = 0; i < actual.length; i++) {
-     if (actual[i]) {
-       newArray.push(actual[i])
-     }
-   }
-   return newArray
- }
+export function cleanArray(actual) {
+  const newArray = []
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i])
+    }
+  }
+  return newArray
+}
 
- export function param(json) {
-   if (!json) return ''
-   return cleanArray(Object.keys(json).map(key => {
-     if (json[key] === undefined) return ''
-     return encodeURIComponent(key) + '=' +
+export function param(json) {
+  if (!json) return ''
+  return cleanArray(Object.keys(json).map(key => {
+    if (json[key] === undefined) return ''
+    return encodeURIComponent(key) + '=' +
             encodeURIComponent(json[key])
-   })).join('&')
- }
+  })).join('&')
+}
 
- export function param2Obj(url) {
-   const search = url.split('?')[1]
-   if (!search) {
-     return {}
-   }
-   return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
- }
+export function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
+}
 
- export function html2Text(val) {
-   const div = document.createElement('div')
-   div.innerHTML = val
-   return div.textContent || div.innerText
- }
+export function html2Text(val) {
+  const div = document.createElement('div')
+  div.innerHTML = val
+  return div.textContent || div.innerText
+}
 
- export function objectMerge(target, source) {
-    /* Merges two  objects,
+export function objectMerge(target, source) {
+  /* Merges two  objects,
      giving the last one precedence */
 
-   if (typeof target !== 'object') {
-     target = {}
-   }
-   if (Array.isArray(source)) {
-     return source.slice()
-   }
-   for (const property in source) {
-     if (source.hasOwnProperty(property)) {
-       const sourceProperty = source[property]
-       if (typeof sourceProperty === 'object') {
-         target[property] = objectMerge(target[property], sourceProperty)
-         continue
-       }
-       target[property] = sourceProperty
-     }
-   }
-   return target
- }
+  if (typeof target !== 'object') {
+    target = {}
+  }
+  if (Array.isArray(source)) {
+    return source.slice()
+  }
+  for (const property in source) {
+    if (source.hasOwnProperty(property)) {
+      const sourceProperty = source[property]
+      if (typeof sourceProperty === 'object') {
+        target[property] = objectMerge(target[property], sourceProperty)
+        continue
+      }
+      target[property] = sourceProperty
+    }
+  }
+  return target
+}
 
- export function scrollTo(element, to, duration) {
-   if (duration <= 0) return
-   const difference = to - element.scrollTop
-   const perTick = difference / duration * 10
-   setTimeout(() => {
-     console.log(new Date())
-     element.scrollTop = element.scrollTop + perTick
-     if (element.scrollTop === to) return
-     scrollTo(element, to, duration - 10)
-   }, 10)
- }
+export function scrollTo(element, to, duration) {
+  if (duration <= 0) return
+  const difference = to - element.scrollTop
+  const perTick = difference / duration * 10
+  setTimeout(() => {
+    console.log(new Date())
+    element.scrollTop = element.scrollTop + perTick
+    if (element.scrollTop === to) return
+    scrollTo(element, to, duration - 10)
+  }, 10)
+}
 
- export function toggleClass(element, className) {
-   if (!element || !className) {
-     return
-   }
-   let classString = element.className
-   const nameIndex = classString.indexOf(className)
-   if (nameIndex === -1) {
-     classString += '' + className
-   } else {
-     classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
-   }
-   element.className = classString
- }
+export function toggleClass(element, className) {
+  if (!element || !className) {
+    return
+  }
+  let classString = element.className
+  const nameIndex = classString.indexOf(className)
+  if (nameIndex === -1) {
+    classString += '' + className
+  } else {
+    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
+  }
+  element.className = classString
+}
 
- export const pickerOptions = [
-   {
-     text: '今天',
-     onClick(picker) {
-       const end = new Date()
-       const start = new Date(new Date().toDateString())
-       end.setTime(start.getTime())
-       picker.$emit('pick', [start, end])
-     }
-   }, {
-     text: '最近一周',
-     onClick(picker) {
-       const end = new Date(new Date().toDateString())
-       const start = new Date()
-       start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
-       picker.$emit('pick', [start, end])
-     }
-   }, {
-     text: '最近一个月',
-     onClick(picker) {
-       const end = new Date(new Date().toDateString())
-       const start = new Date()
-       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-       picker.$emit('pick', [start, end])
-     }
-   }, {
-     text: '最近三个月',
-     onClick(picker) {
-       const end = new Date(new Date().toDateString())
-       const start = new Date()
-       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-       picker.$emit('pick', [start, end])
-     }
-   }]
+export const pickerOptions = [
+  {
+    text: '今天',
+    onClick(picker) {
+      const end = new Date()
+      const start = new Date(new Date().toDateString())
+      end.setTime(start.getTime())
+      picker.$emit('pick', [start, end])
+    }
+  }, {
+    text: '最近一周',
+    onClick(picker) {
+      const end = new Date(new Date().toDateString())
+      const start = new Date()
+      start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
+      picker.$emit('pick', [start, end])
+    }
+  }, {
+    text: '最近一个月',
+    onClick(picker) {
+      const end = new Date(new Date().toDateString())
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+      picker.$emit('pick', [start, end])
+    }
+  }, {
+    text: '最近三个月',
+    onClick(picker) {
+      const end = new Date(new Date().toDateString())
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+      picker.$emit('pick', [start, end])
+    }
+  }]
 
- export function getTime(type) {
-   if (type === 'start') {
-     return new Date().getTime() - 3600 * 1000 * 24 * 90
-   } else {
-     return new Date(new Date().toDateString())
-   }
- }
+export function getTime(type) {
+  if (type === 'start') {
+    return new Date().getTime() - 3600 * 1000 * 24 * 90
+  } else {
+    return new Date(new Date().toDateString())
+  }
+}
 
- export function debounce(func, wait, immediate) {
-   let timeout, args, context, timestamp, result
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
 
-   const later = function() {
+  const later = function() {
     // 据上一次触发时间间隔
-     const last = +new Date() - timestamp
+    const last = +new Date() - timestamp
 
     // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
-     if (last < wait && last > 0) {
-       timeout = setTimeout(later, wait - last)
-     } else {
-       timeout = null
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
-       if (!immediate) {
-         result = func.apply(context, args)
-         if (!timeout) context = args = null
-       }
-     }
-   }
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
 
-   return function(...args) {
-     context = this
-     timestamp = +new Date()
-     const callNow = immediate && !timeout
+  return function(...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
     // 如果延时不存在，重新设定延时
-     if (!timeout) timeout = setTimeout(later, wait)
-     if (callNow) {
-       result = func.apply(context, args)
-       context = args = null
-     }
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
 
-     return result
-   }
- }
+    return result
+  }
+}
 
- export function deepClone(source) {
-   if (!source && typeof source !== 'object') {
-     throw new Error('error arguments', 'shallowClone')
-   }
-   const targetObj = source.constructor === Array ? [] : {}
-   for (const keys in source) {
-     if (source.hasOwnProperty(keys)) {
-       if (source[keys] && typeof source[keys] === 'object') {
-         targetObj[keys] = source[keys].constructor === Array ? [] : {}
-         targetObj[keys] = deepClone(source[keys])
-       } else {
-         targetObj[keys] = source[keys]
-       }
-     }
-   }
-   return targetObj
- }
+export function deepClone(source) {
+  if (!source && typeof source !== 'object') {
+    throw new Error('error arguments', 'shallowClone')
+  }
+  const targetObj = source.constructor === Array ? [] : {}
+  for (const keys in source) {
+    if (source.hasOwnProperty(keys)) {
+      if (source[keys] && typeof source[keys] === 'object') {
+        targetObj[keys] = source[keys].constructor === Array ? [] : {}
+        targetObj[keys] = deepClone(source[keys])
+      } else {
+        targetObj[keys] = source[keys]
+      }
+    }
+  }
+  return targetObj
+}
+
+// get dependencies verison from package.json by webpack.DefinePlugin
+export function getVersion(name) {
+  import('../../package').then(p => {
+    return p.dependencies[name]
+  })
+}

src/utils/openWindow.js

@@ -7,7 +7,7 @@
  */
 
 export default function openWindow(url, title, w, h) {
-      // Fixes dual-screen position                         Most browsers      Firefox
+  // Fixes dual-screen position                            Most browsers       Firefox
   const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
   const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
 

src/utils/fetch.js → src/utils/request.js

@@ -6,7 +6,7 @@ import { getToken } from '@/utils/auth'
 // 创建axios实例
 const service = axios.create({
   baseURL: process.env.BASE_API, // api的base_url
-  timeout: 5000                  // 请求超时时间
+  timeout: 5000 // 请求超时时间
 })
 
 // request拦截器
@@ -29,29 +29,29 @@ service.interceptors.response.use(
   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
-//  const res = response.data;
-//     if (res.code !== 20000) {
-//       Message({
-//         message: res.message,
-//         type: 'error',
-//         duration: 5 * 1000
-//       });
-//       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
-//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-//         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
-//           confirmButtonText: '重新登录',
-//           cancelButtonText: '取消',
-//           type: 'warning'
-//         }).then(() => {
-//           store.dispatch('FedLogOut').then(() => {
-//             location.reload();// 为了重新实例化vue-router对象 避免bug
-//           });
-//         })
-//       }
-//       return Promise.reject('error');
-//     } else {
-//       return response.data;
-//     }
+  //  const res = response.data;
+  //     if (res.code !== 20000) {
+  //       Message({
+  //         message: res.message,
+  //         type: 'error',
+  //         duration: 5 * 1000
+  //       });
+  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+  //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+  //           confirmButtonText: '重新登录',
+  //           cancelButtonText: '取消',
+  //           type: 'warning'
+  //         }).then(() => {
+  //           store.dispatch('FedLogOut').then(() => {
+  //             location.reload();// 为了重新实例化vue-router对象 避免bug
+  //           });
+  //         })
+  //       }
+  //       return Promise.reject('error');
+  //     } else {
+  //       return response.data;
+  //     }
   error => {
     console.log('err' + error)// for debug
     Message({
@@ -60,7 +60,6 @@ service.interceptors.response.use(
       duration: 5 * 1000
     })
     return Promise.reject(error)
-  }
-)
+  })
 
 export default service

src/utils/validate.js

@@ -31,3 +31,13 @@ export function validatAlphabets(str) {
   return reg.test(str)
 }
 
+/**
+ * validate email
+ * @param email
+ * @returns {boolean}
+ */
+export function validateEmail(email) {
+  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return re.test(email)
+}
+

src/vendor/Export2Excel.js

@@ -155,6 +155,6 @@ export function export_json_to_excel(th, jsonData, defaultTitle) {
     wb.Sheets[ws_name] = ws;
 
     var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
-    var title = defaultTitle || '列表'
+    var title = defaultTitle || 'excel-list'
     saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
 }

src/vendor/Export2Zip.js

@@ -4,8 +4,8 @@ import JSZip from 'jszip'
 
 export function export_txt_to_zip(th, jsonData, txtName, zipName) {
   const zip = new JSZip()
-  const txt_name = txtName || '文本'
-  const zip_name = zipName || '压缩包'
+  const txt_name = txtName || 'file'
+  const zip_name = zipName || 'file'
   const data = jsonData
   let txtData = `${th}\r\n`
   data.forEach((row) => {

src/views/charts/index.vue

-<template>
-  <div class="components-container" >
-    <code>
-      这里的所有的图表都基于ECharts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'> gallery</a><br/>其实ECharts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。<a target='_blank' class='lin' href="https://segmentfault.com/a/1190000009762198#articleHeader16">相关教程</a>
-    </code>
-  </div>
-</template>

src/views/charts/keyboard.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <keyboard-chart height='100%' width='100%'></keyboard-chart>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import keyboardChart from '@/components/Charts/keyboard'
+import Chart from '@/components/Charts/keyboard'
 
 export default {
-  components: { keyboardChart }
+  name: 'keyboardChart',
+  components: { Chart }
 }
 </script>
 

src/views/charts/keyboard2.vue

-<template>
-  <div class="components-container" style='height:100vh'>
-    <div class='chart-container'>
-      <keyboard-chart2 height='100%' width='100%'></keyboard-chart2>
-    </div>
-  </div>
-</template>
-
-<script>
-import keyboardChart2 from '@/components/Charts/keyboard2'
-
-export default {
-  components: { keyboardChart2 }
-}
-</script>
-
-<style scoped>
-.chart-container{
-  position: relative;
-  width: 100%;
-  height: 90%;
-}
-</style>
-

src/views/charts/line.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <line-marker height='100%' width='100%'></line-marker>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import lineMarker from '@/components/Charts/lineMarker'
+import Chart from '@/components/Charts/lineMarker'
 
 export default {
-  components: { lineMarker }
+  name: 'lineChart',
+  components: { Chart }
 }
 </script>
 

src/views/charts/mixChart.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <mix-chart height='100%' width='100%'></mix-chart>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import mixChart from '@/components/Charts/mixChart'
+import Chart from '@/components/Charts/mixChart'
 
 export default {
-  components: { mixChart }
+  name: 'mixChart',
+  components: { Chart }
 }
 </script>
 

src/views/clipboard/index.vue

@@ -15,9 +15,10 @@
 
 <script>
 import clip from '@/utils/clipboard' // use clipboard directly
-import clipboard from '@/directive/clipboard/index.js'  // use clipboard by v-directive
+import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
 
 export default {
+  name: 'clipboardDemo',
   directives: {
     clipboard
   },

src/views/components/avatarUpload.vue → src/views/components-demo/avatarUpload.vue

 <template>
   <div class="components-container">
-    <code>这里核心代码用的是<a class='link-type' href='//github.com/dai-siki/vue-image-crop-upload'> vue-image-crop-upload</a>
-    由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
+    <code>这里核心代码用的是
+      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>
+      由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
     </code>
 
-    <pan-thumb :image='image'></pan-thumb>
+    <pan-thumb :image="image"></pan-thumb>
 
     <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
     </el-button>
 
-    <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
+    <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
+      :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
   </div>
 </template>
 
@@ -18,6 +20,7 @@ import ImageCropper from '@/components/ImageCropper'
 import PanThumb from '@/components/PanThumb'
 
 export default {
+  name: 'avatarUpload-demo',
   components: { ImageCropper, PanThumb },
   data() {
     return {

src/views/components/backToTop.vue → src/views/components-demo/backToTop.vue

@@ -138,6 +138,7 @@
 import BackToTop from '@/components/BackToTop'
 
 export default {
+  name: 'backToTop-demo',
   components: { BackToTop },
   data() {
     return {

src/views/components/countTo.vue → src/views/components-demo/countTo.vue

 <template>
   <div class="components-container">
-    <code> <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>countTo component</a></code>
-
-    <count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
-      :separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false'></count-to>
-    <div style='margin-left: 25%;margin-top: 40px;'>
-      <label class="label" for="startValInput">startVal:  <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
-      <label class="label" for="endValInput">endVal:  <input type="number" v-model.number='setEndVal' name='endVaInput' /></label>
-      <label class="label" for="durationInput">duration:  <input type="number" v-model.number='setDuration' name='durationInput' /></label>
-      <div class="startBtn example-btn" @click='start'>开始</div>
-      <div class="pause-resume-btn example-btn" @click='pauseResume'>暂停/恢复</div>
+    <p class="warn-content">
+      <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
+    </p>
+    <count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals"
+      :separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to>
+    <div style="margin-left: 25%;margin-top: 40px;">
+      <label class="label" for="startValInput">startVal:
+        <input type="number" v-model.number="setStartVal" name="startValInput" />
+      </label>
+      <label class="label" for="endValInput">endVal:
+        <input type="number" v-model.number="setEndVal" name="endVaInput" />
+      </label>
+      <label class="label" for="durationInput">duration:
+        <input type="number" v-model.number="setDuration" name="durationInput" />
+      </label>
+      <div class="startBtn example-btn" @click="start">开始</div>
+      <div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
       <br/>
-      <label class="label" for="decimalsInput">decimals:  <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label>
-      <label class="label" for="separatorInput">separator:  <input v-model='setSeparator' name='separatorInput' /></label>
-      <label class="label" for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label>
-      <label class="label" for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label>
+      <label class="label" for="decimalsInput">decimals:
+        <input type="number" v-model.number="setDecimals" name="decimalsInput" />
+      </label>
+      <label class="label" for="separatorInput">separator:
+        <input v-model="setSeparator" name="separatorInput" />
+      </label>
+      <label class="label" for="prefixInput">prefix:
+        <input v-model="setPrefix" name="prefixInput" />
+      </label>
+      <label class="label" for="suffixInput">suffix:
+        <input v-model="setSuffix" name="suffixInput" />
+      </label>
     </div>
-    <code>&lt;count-to  :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27; :decimals=&#x27;{{_decimals}}&#x27;
-            :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27; :autoplay=false&gt;</code>
+    <code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27;
+      :decimals=&#x27;{{_decimals}}&#x27; :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27;
+      :autoplay=false&gt;</code>
   </div>
 </template>
 
@@ -25,6 +41,7 @@
 import countTo from 'vue-count-to'
 
 export default {
+  name: 'countTo-demo',
   components: { countTo },
   data() {
     return {

src/views/components/dndList.vue → src/views/components-demo/dndList.vue

 <template>
   <div class="components-container">
-    <code>drag-list base on <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a></code>
+    <code>drag-list base on
+      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
+    </code>
     <div class="editor-container">
-       <dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
+      <dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
     </div>
   </div>
 </template>
 
 <script>
-import DndList from '@/components/twoDndList'
+import DndList from '@/components/DndList'
 import { fetchList } from '@/api/article'
 
 export default {
+  name: 'dnd-list-demo',
   components: { DndList },
   data() {
     return {

src/views/components/dropzone.vue → src/views/components-demo/dropzone.vue

 <template>
   <div class="components-container">
     <code>
-      基于<a class='link-type' href='https://github.com/rowanwins/vue-dropzone'> dropzone </a>封装 ,
+      基于<a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>封装 ,
       由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
     </code>
     <div class="editor-container">
@@ -14,6 +14,7 @@
 import Dropzone from '@/components/Dropzone'
 
 export default {
+  name: 'dropzone-demo',
   components: { Dropzone },
   methods: {
     dropzoneS(file) {

src/views/components/jsonEditor.vue → src/views/components-demo/jsonEditor.vue

 <template>
-  <div class="components-container" style='height:100vh'>
-    <code>jsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
+  <div class="components-container" style="height:100vh">
+    <code>JsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value"></json-editor>
     </div>
@@ -8,12 +8,13 @@
 </template>
 
 <script>
-import jsonEditor from '@/components/JsonEditor'
+import JsonEditor from '@/components/JsonEditor'
 
 const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
 
 export default {
-  components: { jsonEditor },
+  name: 'jsonEditor-demo',
+  components: { JsonEditor },
   data() {
     return {
       value: JSON.parse(jsonData)

src/views/components/markdown.vue → src/views/components-demo/markdown.vue

 <template>
   <div class="components-container">
-    <code>Markdown 我们这里选用了 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader14'> 相关文章 </a></code>
+    <code>Markdown 我们这里选用了
+      <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下
+      <a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
+        相关文章 </a>
+    </code>
     <div class="editor-container">
-      <md-editor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></md-editor>
+      <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
     </div>
-    <el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button>
+    <el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">转为HTML</el-button>
     <div v-html="html"></div>
   </div>
 </template>
 
 <script>
-import MdEditor from '@/components/MarkdownEditor'
+import MarkdownEditor from '@/components/MarkdownEditor'
+
+const content = `
+**this is test**
+
+* vue
+* element
+* webpack
+
+## Simplemde
+`
 
 export default {
-  components: { MdEditor },
+  name: 'markdown-demo',
+  components: { MarkdownEditor },
   data() {
     return {
-      content: '## Simplemde',
+      content: content,
       html: ''
     }
   },

src/views/components-demo/mixin.vue

+<template>
+  <div class="mixin-components-container">
+    <el-row>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Buttons</span>
+        </div>
+        <div style="margin-bottom:50px;">
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
+          </el-col>
+        </div>
+      </el-card>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-top:50px;">
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Material Design 的input</span>
+          </div>
+          <div style="height:100px;">
+            <el-form :model="demo" :rules="demoRules">
+              <el-form-item prop="title">
+                <md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>图片hover效果</span>
+          </div>
+          <div class="component-item">
+            <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
+              vue-element-admin
+            </pan-thumb>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>水波纹 waves v-directive</span>
+          </div>
+          <div class="component-item">
+            <el-button v-waves type="primary">水波纹效果</el-button>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>hover text</span>
+          </div>
+          <div class="component-item">
+            <mallki className="mallki-text" text="vue-element-admin"></mallki>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-top:50px;">
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Share</span>
+          </div>
+          <div class="component-item" style="height:360px;">
+            <dropdown-menu style="margin:0 auto;" title='系列文章' :items='articleList'></dropdown-menu>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+import MdInput from '@/components/MDinput'
+import Mallki from '@/components/TextHoverEffect/Mallki'
+import DropdownMenu from '@/components/Share/dropdownMenu'
+import waves from '@/directive/waves/index.js' // 水波纹指令
+
+export default {
+  name: 'componentMixin-demo',
+  components: {
+    PanThumb,
+    MdInput,
+    Mallki,
+    DropdownMenu
+  },
+  directives: {
+    waves
+  },
+  data() {
+    const validate = (rule, value, callback) => {
+      if (value.length !== 6) {
+        callback(new Error('请输入六个字符'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      demo: {
+        title: ''
+      },
+      demoRules: {
+        title: [{ required: true, trigger: 'change', validator: validate }]
+      },
+      articleList: [
+        { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
+        { 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' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mixin-components-container {
+  background-color: #f0f2f5;
+  padding: 30px;
+  min-height: calc(100vh - 84px);
+}
+.component-item{
+  min-height: 100px;
+}
+</style>

src/views/components-demo/splitpane.vue

+<template>
+  <div class="components-container">
+    <code>splitPane 如果你用过
+      <a href="http://codepen.io/" target="_blank"> codepen</a>,
+      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>就不会陌生了
+      <a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地址</a>
+    </code>
+    <split-pane v-on:resize="resize" split="vertical">
+      <template slot="paneL">
+        <div class="left-container"></div>
+      </template>
+      <template slot="paneR">
+        <split-pane split="horizontal">
+          <template slot="paneL">
+            <div class="top-container"></div>
+          </template>
+          <template slot="paneR">
+            <div class="bottom-container"></div>
+          </template>
+        </split-pane>
+      </template>
+    </split-pane>
+  </div>
+</template>
+
+<script>
+import splitPane from 'vue-splitpane'
+
+export default {
+  name: 'splitpane-demo',
+  components: { splitPane },
+  methods: {
+    resize() {
+      console.log('resize')
+    }
+  }
+}
+</script>
+
+<style  scoped>
+	.components-container {
+	  position: relative;
+	  height: 100vh;
+	}
+
+	.left-container {
+	  background-color: #F38181;
+	  height: 100%;
+	}
+
+	.right-container {
+	  background-color: #FCE38A;
+	  height: 200px;
+	}
+
+	.top-container {
+	  background-color: #FCE38A;
+	  width: 100%;
+	  height: 100%;
+	}
+
+	.bottom-container {
+	  width: 100%;
+	  background-color: #95E1D3;
+	  height: 100%;
+	}
+</style>

src/views/components/sticky.vue → src/views/components-demo/sticky.vue

@@ -97,6 +97,7 @@
 import Sticky from '@/components/Sticky'
 
 export default {
+  name: 'sticky-demo',
   components: { Sticky },
   data() {
     return {
@@ -104,9 +105,9 @@ export default {
       url: '',
       platforms: ['a-platform'],
       platformsOptions: [
-            { key: 'a-platform', name: '平台A' },
-            { key: 'b-platform', name: '平台B' },
-            { key: 'c-platform', name: '平台C' }
+        { key: 'a-platform', name: '平台A' },
+        { key: 'b-platform', name: '平台B' },
+        { key: 'c-platform', name: '平台C' }
       ],
       pickerOptions: {
         disabledDate(time) {

src/views/components/tinymce.vue → src/views/components-demo/tinymce.vue

 <template>
   <div class="components-container">
-    <code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a> <a target='_blank' href='https://www.tinymce.com/'> 官网 </a></code>
+    <code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a>
+    </code>
     <div>
-      <tinymce :height='200' v-model="content"></tinymce>
+      <tinymce :height="200" v-model="content"></tinymce>
     </div>
-    <div class='editor-content' v-html='content'></div>
+    <div class="editor-content" v-html="content"></div>
   </div>
 </template>
 
@@ -12,6 +14,7 @@
 import Tinymce from '@/components/Tinymce'
 
 export default {
+  name: 'tinymce-demo',
   components: { Tinymce },
   data() {
     return {

src/views/components/index.vue

-<template>
-  <div class="components-container">
-    <code>这里暂时列出了自己在项目中用到的组件和一些自己封装的组件，如有补充可以提<a target='_blank' href='https://github.com/PanJiaChen/vue-element-admin/issues'> issue </a><br/>
-    我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，而且第三方封装的组件灵活性可控性都不高，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
-    </code>
-  </div>
-</template>

src/views/components/mixin.vue

-<template>
-  <div class="components-container">
-    <div class='component-item'>
-      <el-form :model="demo" :rules="demoRules">
-        <el-form-item prop="title">
-          <md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
-        </el-form-item>
-      </el-form>
-      <code class='code-part'>Material Design 的input</code>
-    </div>
-
-    <div class='component-item'>
-      <pan-thumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
-        上海花裤衩
-      </pan-thumb>
-      <code class='code-part'>图片hover效果</code>
-    </div>
-
-    <div class='component-item'>
-      <el-button v-waves type="primary">水波纹效果</el-button>
-      <code class='code-part'>水波纹 v-directive</code>
-    </div>
-  </div>
-</template>
-
-<script>
-import PanThumb from '@/components/PanThumb'
-import MdInput from '@/components/MDinput'
-import waves from '@/directive/waves/index.js' // 水波纹指令
-
-export default {
-  components: {
-    PanThumb,
-    MdInput
-  },
-  directives: {
-    waves
-  },
-  data() {
-    const validate = (rule, value, callback) => {
-      if (value.length !== 6) {
-        callback(new Error('请输入六个字符'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      demo: {
-        title: ''
-      },
-      demoRules: {
-        title: [{ required: true, trigger: 'change', validator: validate }]
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.component-item{
-  margin-top: 100px;
-}
-.code-part{
-  margin-top: 20px;
-}
-</style>

src/views/components/splitpane.vue

-<template>
-	<div class="components-container">
-		<code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'> codepen</a>,<a href='https://jsfiddle.net/' target='_blank'> jsfiddle </a>就不会陌生了
-      <a href='https://github.com/PanJiaChen/vue-split-pane' target='_blank'>项目地址</a>
-      </code>
-		<split-pane v-on:resize="resize" split="vertical">
-			<template slot="paneL">
-				<div class="left-container"></div>
-			</template>
-			<template slot="paneR">
-				<split-pane split="horizontal">
-					<template slot="paneL">
-						<div class="top-container"></div>
-					</template>
-					<template slot="paneR">
-						<div class="bottom-container">
-						</div>
-					</template>
-				</split-pane>
-			</template>
-		</split-pane>
-	</div>
-</template>
-
-<script>
-import splitPane from 'vue-splitpane'
-
-export default {
-  components: { splitPane },
-  methods: {
-    resize() {
-      console.log('resize')
-    }
-  }
-}
-</script>
-
-<style  scoped>
-	.components-container {
-		position: relative;
-		height: 100vh;
-	}
-
-	.left-container {
-		background-color: #F38181;
-		height: 100%;
-	}
-
-	.right-container {
-		background-color: #FCE38A;
-		height: 200px;
-	}
-
-	.top-container {
-		background-color: #FCE38A;
-		width: 100%;
-		height: 100%;
-	}
-
-	.bottom-container {
-		width: 100%;
-		background-color: #95E1D3;
-		height: 100%;
-	}
-</style>

src/views/dashboard/admin/barChart.vue → src/views/dashboard/admin/components/BarChart.vue

@@ -5,8 +5,10 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts 主题
+import { debounce } from '@/utils'
+
+const animationDuration = 6000
 
-const animationDuration = 3000
 export default {
   props: {
     className: {
@@ -29,11 +31,18 @@ export default {
   },
   mounted() {
     this.initChart()
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
+    window.removeEventListener('resize', this.__resizeHanlder)
     this.chart.dispose()
     this.chart = null
   },
@@ -49,8 +58,9 @@ export default {
           }
         },
         grid: {
-          left: '3%',
-          right: '4%',
+          top: 10,
+          left: '2%',
+          right: '2%',
           bottom: '3%',
           containLabel: true
         },
@@ -62,7 +72,10 @@ export default {
           }
         }],
         yAxis: [{
-          type: 'value'
+          type: 'value',
+          axisTick: {
+            show: false
+          }
         }],
         series: [{
           name: 'pageA',

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

+<template>
+  <el-card class="box-card" style="margin-left:8px;">
+    <div slot="header" class="box-card-header">
+      <img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'>
+    </div>
+    <div style="position:relative;">
+      <pan-thumb class="panThumb" :image="avatar"></pan-thumb>
+      <mallki className='mallki-text' text='vue-element-admin'></mallki>
+      <div style="padding-top:35px;" class='progress-item'>
+        <span>Vue</span>
+        <el-progress :percentage="70"></el-progress>
+      </div>
+      <div class='progress-item'>
+        <span>JavaScript</span>
+        <el-progress :percentage="18"></el-progress>
+      </div>
+      <div class='progress-item'>
+        <span>Css</span>
+        <el-progress :percentage="12"></el-progress>
+      </div>
+       <div class='progress-item'>
+        <span>ESLint</span>
+        <el-progress :percentage="100" status="success"></el-progress>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanThumb from '@/components/PanThumb'
+import Mallki from '@/components/TextHoverEffect/Mallki'
+
+export default {
+  components: { PanThumb, Mallki },
+
+  data() {
+    return {
+      statisticsData: {
+        article_count: 1024,
+        pageviews_count: 1024
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'avatar',
+      'roles'
+    ])
+  },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+.box-card {
+  .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%);
+    }
+  }
+}
+.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>

src/views/dashboard/admin/lineChart.vue → src/views/dashboard/admin/components/LineChart.vue

@@ -24,6 +24,9 @@ export default {
     autoResize: {
       type: Boolean,
       default: true
+    },
+    chartData: {
+      type: Object
     }
   },
   data() {
@@ -60,62 +63,87 @@ export default {
     this.chart.dispose()
     this.chart = null
   },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
   methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
+    setOptions({ expectedData, actualData } = {}) {
       this.chart.setOption({
         xAxis: {
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
         },
         grid: {
           left: 10,
           right: 10,
           bottom: 20,
+          top: 30,
           containLabel: true
         },
-
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
           }
         },
-        yAxis: {},
+        legend: {
+          data: ['expected', 'actual']
+        },
         series: [{
-          name: 'visitors',
-          itemStyle: {
+          name: 'expected', itemStyle: {
             normal: {
-              areaStyle: {}
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
             }
           },
           smooth: true,
           type: 'line',
-          data: [100, 120, 161, 134, 105, 160, 165],
-          animationDuration: 2600,
+          data: expectedData,
+          animationDuration: 2800,
           animationEasing: 'cubicInOut'
         },
         {
-          name: 'buyers',
+          name: 'actual',
           smooth: true,
           type: 'line',
           itemStyle: {
             normal: {
-              color: 'rgba(2, 197, 233, 0.2)',
+              color: '#3888fa',
               lineStyle: {
-                color: 'rgba(2, 197, 233, 0.2)'
+                color: '#3888fa',
+                width: 2
               },
               areaStyle: {
-                color: 'rgba(99,194,255, 0.6)'
+                color: '#f3f8ff'
               }
             }
           },
-          data: [120, 82, 91, 154, 162, 140, 130],
-          animationDuration: 2000,
+          data: actualData,
+          animationDuration: 2800,
           animationEasing: 'quadraticOut'
         }]
       })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
     }
   }
 }

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

+<template>
+  <el-row class="panel-group" :gutter="40">
+    <el-col :span="6">
+      <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" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">New Visits</div>
+          <count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="3600"></count-to>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <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" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">Messages</div>
+          <count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="4000"></count-to>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <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" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">Purchases</div>
+          <count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="4000"></count-to>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <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" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">Shoppings</div>
+          <count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="4600"></count-to>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.panel-group {
+  margin-top: 20px;
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+      .icon-people {
+         background: #40c9c6;
+      }
+      .icon-message {
+        background: #36a3f7;
+      }
+      .icon-money {
+        background: #f4516c;
+      }
+      .icon-shoppingCard {
+        background: #34bfa3
+      }
+    }
+    .icon-people {
+      color: #40c9c6;
+    }
+    .icon-message {
+      color: #36a3f7;
+    }
+    .icon-money {
+      color: #f4516c;
+    }
+    .icon-shoppingCard {
+      color: #34bfa3
+    }
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+</style>

src/views/dashboard/admin/pieChart.vue → src/views/dashboard/admin/components/PieChart.vue

@@ -5,6 +5,7 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts 主题
+import { debounce } from '@/utils'
 
 export default {
   props: {
@@ -28,11 +29,18 @@ export default {
   },
   mounted() {
     this.initChart()
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
+    window.removeEventListener('resize', this.__resizeHanlder)
     this.chart.dispose()
     this.chart = null
   },
@@ -41,18 +49,14 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
 
       this.chart.setOption({
-        title: {
-          text: 'WEEKLY WRITE ARTICLES',
-          x: 'center'
-        },
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         legend: {
-          x: 'center',
-          y: 'bottom',
-          data: ['industries', 'technology', 'forex', 'gold', 'forecasts', 'markets']
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
         },
         calculable: true,
         series: [
@@ -60,13 +64,14 @@ export default {
             name: 'WEEKLY WRITE ARTICLES',
             type: 'pie',
             roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
             data: [
-                { value: 320, name: 'industries' },
-                { value: 240, name: 'technology' },
-                { value: 149, name: 'forex' },
-                { value: 100, name: 'gold' },
-                { value: 59, name: 'forecasts' },
-                { value: 49, name: 'markets' }
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
             ],
             animationEasing: 'cubicInOut',
             animationDuration: 2600

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

+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts 主题
+import { debounce } from '@/utils'
+
+const animationDuration = 3000
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHanlder)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/components/TodoList/index.scss → src/views/dashboard/admin/components/TodoList/index.scss

@@ -4,10 +4,13 @@
 	color: #4d4d4d;
 	min-width: 230px;
 	max-width: 550px;
-	margin: 40PX auto 0;
+	margin: 0 auto ;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	font-weight: 300;
+	background: #fff;
+	z-index: 1;
+	position: relative;
 	button {
 		margin: 0;
 		padding: 0;
@@ -81,7 +84,7 @@
 		-moz-osx-font-smoothing: grayscale;
 	}
 	.new-todo {
-		padding: 16px 16px 16px 60px;
+		padding: 10px 16px 16px 60px;
 		border: none;
 		background: rgba(0, 0, 0, 0.003);
 		box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);

src/components/TodoList/index.vue → src/views/dashboard/admin/components/TodoList/index.vue

@@ -2,7 +2,7 @@
   <section class="todoapp">
     <!-- header -->
     <header class="header">
-      <input class="new-todo" autofocus autocomplete="off" placeholder="TODO LIST?" @keyup.enter="addTodo">
+      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
     </header>
     <!-- main section -->
     <section class="main" v-show="todos.length">
@@ -24,9 +24,9 @@
           <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
         </li>
       </ul>
-      <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
+      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
         Clear completed
-      </button>
+      </button> -->
     </footer>
   </section>
 </template>
@@ -43,7 +43,12 @@ const filters = {
 const defalutList = [
   { text: 'star this repository', done: false },
   { text: 'fork this repository', done: false },
-  { text: 'follow author', done: false }
+  { text: 'follow author', done: false },
+  { text: 'vue-element-admin', done: true },
+  { text: 'vue', done: true },
+  { text: 'element-ui', done: true },
+  { text: 'axios', done: true },
+  { text: 'webpack', done: true }
 ]
 export default {
   components: { Todo },
@@ -51,7 +56,8 @@ export default {
     return {
       visibility: 'all',
       filters,
-      todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
+      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
+      todos: defalutList
     }
   },
   computed: {

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

+<template>
+  <el-table :data="list" style="width: 100%;padding-top: 15px;" >
+    <el-table-column label="Order_No">
+      <template slot-scope="scope">
+        {{scope.row.order_no}}
+      </template>
+    </el-table-column>
+    <el-table-column label="Price" width="195" align="center">
+      <template slot-scope="scope">
+        ¥{{scope.row.price | toThousandslsFilter}}
+      </template>
+    </el-table-column>
+    <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>
+      </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>
+
+<script>
+import { fetchList } from '@/api/transaction'
+
+export default {
+  data() {
+    return {
+      list: null
+    }
+  },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      fetchList().then(response => {
+        this.list = response.data.items.slice(0, 7)
+      })
+    } }
+
+}
+</script>

src/views/dashboard/admin/index.vue

 <template>
-	<div class="dashboard-editor-container">
-		<github></github>
-		<el-row class="btn-group">
-			<el-col :span="4" class='text-center'>
-				<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
-			</el-col>
-			<el-col :span="4" class='text-center'>
-				<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
-			</el-col>
-			<el-col :span="4" class='text-center'>
-				<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
-			</el-col>
-			<el-col :span="4" class='text-center'>
-				<router-link class="pan-btn green-btn" to="/example/table/table">Table</router-link>
-			</el-col>
-			<el-col :span="4" class='text-center'>
-				<router-link class="pan-btn tiffany-btn" to="/example/form/edit">Form</router-link>
-			</el-col>
-			<el-col :span="4" class='text-center'>
-				<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
-			</el-col>
-		</el-row>
+  <div class="dashboard-editor-container">
+    <github-corner></github-corner>
 
-		<el-row>
-			<el-col :span="6">
-				<el-card class="box-card">
-					<div slot="header" class="box-card-header">
-						<pan-thumb class="panThumb" :image="avatar"> 你的权限:
-							<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
-						</pan-thumb>
-					</div>
-					<span class="display_name">{{name}}</span>
-					<div class="info-item">
-						<count-to class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></count-to>
-						<span class="info-item-text">文章</span>
-						<icon-svg icon-class="trendChart1" class="dashboard-editor-icon"></icon-svg>
-					</div>
-					<div class="info-item">
-						<count-to class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></count-to>
-						<span class="info-item-text">浏览量</span>
-						<icon-svg icon-class="trendChart2" class="dashboard-editor-icon"></icon-svg>
-					</div>
-				</el-card>
-			</el-col>
+    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
 
-			<el-col :span="8">
-				<pie-chart></pie-chart>
-			</el-col>
+    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
+      <line-chart :chart-data="lineChartData"></line-chart>
+    </el-row>
 
-			<el-col :span="10">
-				<bar-chart></bar-chart>
-			</el-col>
-		</el-row>
+    <el-row style="margin-top:30px;" :gutter="30">
+      <el-col :span="8">
+        <div class="chart-wrapper">
+          <raddar-chart></raddar-chart>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="chart-wrapper">
+          <pie-chart></pie-chart>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="chart-wrapper">
+          <bar-chart></bar-chart>
+        </div>
+      </el-col>
+    </el-row>
 
-		<el-row :gutter="20">
-			<el-col :span="15">
-				<line-chart></line-chart>
-			</el-col>
-			<el-col :span="9">
-				<todo-list></todo-list>
-			</el-col>
-		</el-row>
+    <el-row style="margin-top:30px;">
+      <el-col :span="12" style="padding-right:8px;">
+        <transaction-table></transaction-table>
+      </el-col>
+      <el-col :span="6">
+        <todo-list style="margin:0 8px;"></todo-list>
+      </el-col>
+      <el-col :span="6">
+        <box-card></box-card>
+      </el-col>
+    </el-row>
 
-	</div>
+  </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import countTo from 'vue-count-to'
-import panThumb from '@/components/PanThumb'
-import todoList from '@/components/TodoList'
-import Github from '@/components/Github'
-import pieChart from './pieChart'
-import barChart from './barChart'
-import lineChart from './lineChart'
+import GithubCorner from '@/components/GithubCorner'
+import PanelGroup from './components/PanelGroup'
+import LineChart from './components/LineChart'
+import RaddarChart from './components/RaddarChart'
+import PieChart from './components/PieChart'
+import BarChart from './components/BarChart'
+import TransactionTable from './components/TransactionTable'
+import TodoList from './components/TodoList'
+import BoxCard from './components/BoxCard'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
 
 export default {
   name: 'dashboard-admin',
-  components: { countTo, panThumb, todoList, Github, pieChart, lineChart, barChart },
+  components: {
+    GithubCorner,
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+    TransactionTable,
+    TodoList,
+    BoxCard
+  },
   data() {
     return {
-      statisticsData: {
-        article_count: 1024,
-        pageviews_count: 1024
-      }
+      lineChartData: lineChartData.newVisitis
     }
   },
-  computed: {
-    ...mapGetters([
-      'name',
-      'avatar',
-      'roles'
-    ])
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard-editor-container {
-    margin: 30px;
-    .btn-group {
-        margin-bottom: 60px;
-    }
-    .box-card-header {
-        position: relative;
-        height: 160px;
-    }
-    .panThumb {
-        z-index: 100;
-        height: 150px;
-        width: 150px;
-        position: absolute;
-        left: 0px;
-        right: 0px;
-        margin: auto;
-    }
-    .display_name{
-        font-size: 30px;
-        display: block;
-    }
-    .info-item{
-        display: inline-block;
-        margin-top: 10px;
-        font-size: 14px;
-        &:last-of-type{
-            margin-left: 15px;
-        }
-    }
+  padding: 30px;
+  background-color: rgb(240, 242, 245);
+  .chart-wrapper {
+    background: #fff;
+    padding: 15px 15px 0;
+  }
 }
 </style>

src/views/dashboard/editor/index.vue

@@ -4,14 +4,14 @@
       <pan-thumb style="float: left" :image="avatar"> 你的权限:
         <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
       </pan-thumb>
-      <github></github>
+      <github-corner></github-corner>
       <div class="info-container">
         <span class="display_name">{{name}}</span>
-        <span style='font-size:20px;padding-top:20px;display:inline-block;'>普通编辑dashboard</span>
+        <span style="font-size:20px;padding-top:20px;display:inline-block;">普通编辑dashboard</span>
       </div>
     </div>
     <div>
-      <img class='emptyGif' :src="emptyGif">
+      <img class="emptyGif" :src="emptyGif">
     </div>
   </div>
 </template>
@@ -19,11 +19,11 @@
 <script>
 import { mapGetters } from 'vuex'
 import PanThumb from '@/components/PanThumb'
-import Github from '@/components/Github'
+import GithubCorner from '@/components/GithubCorner'
 
 export default {
   name: 'dashboard-editor',
-  components: { PanThumb, Github },
+  components: { PanThumb, GithubCorner },
   data() {
     return {
       emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'

src/views/documentation/index.vue

+<template>
+  <div class="app-container documentation-container">
+    <a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">文档</a>
+    <a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">Github 地址</a>
+    <dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
+  </div>
+</template>
+
+<script>
+import DropdownMenu from '@/components/Share/dropdownMenu'
+
+export default {
+  name: 'clipboardDemo',
+  components: { DropdownMenu },
+  data() {
+    return {
+      articleList: [
+        { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
+        { 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' }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.documentation-container {
+  margin: 50px;
+  .document-btn {
+    float: left;
+    margin-left: 50px;
+    vertical-align: middle;
+    display: block;
+    cursor: pointer;
+    background: black;
+    color: white;
+    height: 60px;
+    width: 200px;
+    line-height: 60px;
+    font-size: 20px;
+    text-align: center;
+  }
+}
+</style>

src/views/errlog/index.vue → src/views/errorLog/index.vue

@@ -14,6 +14,7 @@
 import errCode from './errcode'
 
 export default {
+  name: 'errorLog',
   components: { errCode }
 }
 </script>

src/views/errorPage/401.vue

@@ -20,7 +20,7 @@
         <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
       </el-col>
     </el-row>
-    <el-dialog title="随便看" :visible.sync="dialogVisible" size="large">
+    <el-dialog title="随便看" :visible.sync="dialogVisible">
       <img class="pan-img" :src="ewizardClap">
     </el-dialog>
   </div>
@@ -30,6 +30,7 @@
 import errGif from '@/assets/401_images/401.gif'
 
 export default {
+  name: 'page401',
   data() {
     return {
       errGif: errGif + '?' + +new Date(),

src/views/errorPage/404.vue

 <template>
-  <div style="background:#f0f2f5;margin-top: -20px;">
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
     <div class="wscn-http404">
       <div class="pic-404">
         <img class="pic-404__parent" :src="img_404" alt="404">
@@ -9,7 +9,9 @@
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
+        <div class="bullshit__info">版权所有
+          <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
+        </div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
         <a href="/" class="bullshit__return-home">返回首页</a>
@@ -23,6 +25,7 @@ import img_404 from '@/assets/404_images/404.png'
 import img_404_cloud from '@/assets/404_images/404_cloud.png'
 
 export default {
+  name: 'page404',
   data() {
     return {
       img_404,

src/views/example/tab/components/tabPane.vue

 <template>
-  <el-table :data="list" border fit highlight-current-row style="width: 100%">
+  <el-table :data="list"border fit highlight-current-row style="width: 100%">
 
     <el-table-column align="center" label="序号" width="65"  v-loading="loading"
     element-loading-text="请给我点时间！">
-      <template scope="scope">
+      <template slot-scope="scope">
         <span>{{scope.row.id}}</span>
       </template>
     </el-table-column>
 
     <el-table-column width="180px" align="center" label="时间">
-      <template scope="scope">
+      <template slot-scope="scope">
         <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
       </template>
     </el-table-column>
 
     <el-table-column min-width="300px" label="标题">
-      <template scope="scope">
+      <template slot-scope="scope">
         <span>{{scope.row.title}}</span>
         <el-tag>{{scope.row.type}}</el-tag>
       </template>
     </el-table-column>
 
     <el-table-column width="110px" align="center" label="作者">
-      <template scope="scope">
+      <template slot-scope="scope">
         <span>{{scope.row.author}}</span>
       </template>
     </el-table-column>
 
     <el-table-column width="80px" label="重要性">
-      <template scope="scope">
-        <icon-svg v-for="n in +scope.row.importance" icon-class="star" :key="n"></icon-svg>
+      <template slot-scope="scope">
+        <svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
       </template>
     </el-table-column>
 
     <el-table-column align="center" label="阅读数" width="95">
-      <template scope="scope">
+      <template slot-scope="scope">
         <span>{{scope.row.pageviews}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column class-name="status-col" label="状态" width="90">
-      <template scope="scope">
+    <el-table-column class-name="status-col" label="状态" width="110">
+      <template slot-scope="scope">
         <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
       </template>
     </el-table-column>
@@ -74,7 +74,7 @@ export default {
     statusFilter(status) {
       const statusMap = {
         published: 'success',
-        draft: 'gray',
+        draft: 'info',
         deleted: 'danger'
       }
       return statusMap[status]

src/views/example/tab/index.vue

 <template>
   <div class="tab-container">
-    <el-tag type="primary">mounted times ：{{createdTimes}}</el-tag>
+    <el-tag>mounted times ：{{createdTimes}}</el-tag>
     <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>
@@ -15,7 +15,7 @@
 import tabPane from './components/tabPane'
 
 export default {
-  name: 'tabDemo',
+  name: 'tab',
   components: { tabPane },
   data() {
     return {

src/views/example/table/table.vue → src/views/example/table/complexTable.vue

@@ -19,65 +19,65 @@
         </el-option>
       </el-select>
 
-      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
-      <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
-      <el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
+      <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-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-column align="center" label="序号" width="65">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="时间">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="标题">
-        <template scope="scope">
+      <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 scope="scope">
+        <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 scope="scope">
+        <template slot-scope="scope">
           <span style='color:red;'>{{scope.row.auditor}}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="80px" label="重要性">
-        <template scope="scope">
-          <icon-svg v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></icon-svg>
+        <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 scope="scope">
+        <template slot-scope="scope">
           <span class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="状态" width="90">
-        <template scope="scope">
+      <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">
-        <template scope="scope">
+        <template slot-scope="scope">
           <el-button v-if="scope.row.status!='published'" size="small" type="success" @click="handleModifyStatus(scope.row,'published')">发布
           </el-button>
           <el-button v-if="scope.row.status!='draft'" size="small" @click="handleModifyStatus(scope.row,'draft')">草稿
@@ -121,7 +121,7 @@
         </el-form-item>
 
         <el-form-item label="重要性">
-          <el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
+          <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="点评">
@@ -136,7 +136,7 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="阅读数统计" :visible.sync="dialogPvVisible" size="small">
+    <el-dialog title="阅读数统计" :visible.sync="dialogPvVisible">
       <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
         <el-table-column prop="key" label="渠道"> </el-table-column>
         <el-table-column prop="pv" label="pv"> </el-table-column>
@@ -155,10 +155,10 @@ import waves from '@/directive/waves/index.js' // 水波纹指令
 import { parseTime } from '@/utils'
 
 const calendarTypeOptions = [
-      { key: 'CN', display_name: '中国' },
-      { key: 'US', display_name: '美国' },
-      { key: 'JP', display_name: '日本' },
-      { key: 'EU', display_name: '欧元区' }
+  { key: 'CN', display_name: '中国' },
+  { key: 'US', display_name: '美国' },
+  { key: 'JP', display_name: '日本' },
+  { key: 'EU', display_name: '欧元区' }
 ]
 
 // arr to obj
@@ -168,7 +168,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
 }, {})
 
 export default {
-  name: 'table_demo',
+  name: 'complexTable',
   directives: {
     waves
   },
@@ -214,7 +214,7 @@ export default {
     statusFilter(status) {
       const statusMap = {
         published: 'success',
-        draft: 'gray',
+        draft: 'info',
         deleted: 'danger'
       }
       return statusMap[status]

src/views/example/table/dragTable.vue

@@ -4,50 +4,50 @@
     <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
       <el-table-column align="center" label="序号" width="65">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="时间">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
       </el-table-column>
 
       <el-table-column min-width="300px" label="标题">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.title}}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="110px" align="center" label="作者">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="80px" label="重要性">
-        <template scope="scope">
-          <icon-svg v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></icon-svg>
+        <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 scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.pageviews}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="状态" width="90">
-        <template scope="scope">
+      <el-table-column class-name="status-col" label="状态" 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 align="center" label="拖拽" width="95">
-        <template scope="scope">
-          <icon-svg class='drag-handler' icon-class="drag"></icon-svg>
+        <template slot-scope="scope">
+          <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
         </template>
       </el-table-column>
 
@@ -64,7 +64,7 @@ import { fetchList } from '@/api/article'
 import Sortable from 'sortablejs'
 
 export default {
-  name: 'drag-table_demo',
+  name: 'dragTable',
   data() {
     return {
       list: null,
@@ -83,7 +83,7 @@ export default {
     statusFilter(status) {
       const statusMap = {
         published: 'success',
-        draft: 'gray',
+        draft: 'info',
         deleted: 'danger'
       }
       return statusMap[status]

src/views/example/table/dynamicTable/fixedThead.vue

@@ -9,10 +9,10 @@
       </el-checkbox-group>
     </div>
 
-    <el-table :data="tableData" :key='key' style="width: 100%">
+    <el-table :data="tableData" :key='key' border fit highlight-current-row style="width: 100%">
       <el-table-column prop="name" label="fruitName" width="180"></el-table-column>
       <el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row[fruit]}}
         </template>
       </el-table-column>

src/views/example/table/dynamicTable/index.vue

@@ -13,6 +13,7 @@ import fixedThead from './fixedThead'
 import unfixedThead from './unfixedThead'
 
 export default {
+  name: 'dynamicTable',
   components: { fixedThead, unfixedThead }
 }
 </script>

src/views/example/table/dynamicTable/unfixedThead.vue

@@ -9,11 +9,11 @@
       </el-checkbox-group>
     </div>
 
-    <el-table :data="tableData" style="width: 100%">
+    <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
       <el-table-column prop="name" label="fruitName" width="180">
       </el-table-column>
       <el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row[fruit]}}
         </template>
       </el-table-column>

src/views/example/table/index.vue

 <template>
-  <router-view></router-view>
+  <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.app.cachedViews
+    }
+  }
+}
+</script>

src/views/example/table/inlineEditTable.vue

@@ -4,44 +4,44 @@
     <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
       <el-table-column align="center" label="序号" width="80">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="时间">
-        <template scope="scope">
+        <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="作者">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="100px" label="重要性">
-        <template scope="scope">
-          <icon-svg v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></icon-svg>
+        <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="状态" width="100">
-        <template scope="scope">
+      <el-table-column class-name="status-col" label="状态" 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="标题">
-        <template scope="scope">
+        <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>
       </el-table-column>
 
       <el-table-column align="center" label="编辑" width="120">
-        <template scope="scope">
+        <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>
         </template>
       </el-table-column>
@@ -54,7 +54,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
-  name: 'inline_edit-table_demo',
+  name: 'inlineEditTable',
   data() {
     return {
       list: null,
@@ -69,7 +69,7 @@ export default {
     statusFilter(status) {
       const statusMap = {
         published: 'success',
-        draft: 'gray',
+        draft: 'info',
         deleted: 'danger'
       }
       return statusMap[status]

src/views/excel/index.vue → src/views/excel/exportExcel.vue

 <template>
   <div class="app-container">
+    <el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label='ID' width="95">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
       <el-table-column label="文章标题">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
       <el-table-column label="作者" width="95" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="阅读数" width="115" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
       <el-table-column align="center" prop="created_at" label="发布时间" width="220">
-        <template scope="scope">
+        <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
@@ -37,11 +38,13 @@ import { fetchList } from '@/api/article'
 import { parseTime } from 'utils'
 
 export default {
+  name: 'exportExcel',
   data() {
     return {
       list: null,
       listLoading: true,
-      downloadLoading: false
+      downloadLoading: false,
+      filename: ''
     }
   },
   created() {
@@ -63,7 +66,7 @@ export default {
         const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
         const list = this.list
         const data = this.formatJson(filterVal, list)
-        export_json_to_excel(tHeader, data, '列表excel')
+        export_json_to_excel(tHeader, data, this.filename)
         this.downloadLoading = false
       })
     },

src/views/excel/selectExcel.vue

 <template>
   <div class="app-container">
+    <el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
       ref="multipleTable">
       <el-table-column type="selection" align="center"></el-table-column>
       <el-table-column align="center" label='ID' width="95">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
       <el-table-column label="文章标题">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
       <el-table-column label="作者" width="95" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="阅读数" width="115" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
       <el-table-column align="center" prop="created_at" label="发布时间" width="220">
-        <template scope="scope">
+        <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>
         </template>
@@ -38,12 +39,14 @@
 import { fetchList } from '@/api/article'
 
 export default {
+  name: 'selectExcel',
   data() {
     return {
       list: null,
       listLoading: true,
       multipleSelection: [],
-      downloadLoading: false
+      downloadLoading: false,
+      filename: ''
     }
   },
   created() {
@@ -69,7 +72,7 @@ export default {
           const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
           const list = this.multipleSelection
           const data = this.formatJson(filterVal, list)
-          export_json_to_excel(tHeader, data, '列表excel')
+          export_json_to_excel(tHeader, data, this.filename)
           this.$refs.multipleTable.clearSelection()
           this.downloadLoading = false
         })

src/views/excel/uploadExcel.vue

 <template>
   <div class="app-container">
-    <upload-excel @on-selected-file='selected'></upload-excel>
+    <upload-excel-component @on-selected-file='selected'></upload-excel-component>
     <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
       <el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
       </el-table-column>
@@ -9,10 +9,11 @@
 </template>
 
 <script>
-import uploadExcel from 'components/UploadExcel/index.vue'
+import UploadExcelComponent from 'components/UploadExcel/index.vue'
 
 export default {
-  components: { uploadExcel },
+  name: 'uploadExcel',
+  components: { UploadExcelComponent },
   data() {
     return {
       tableData: [],

src/views/example/form.vue → src/views/form/components/ArticleDetail.vue

@@ -4,27 +4,28 @@
 
       <sticky :className="'sub-navbar '+postForm.status">
         <template v-if="fetchSuccess">
-          <div style="display:inline-block">
 
-            <el-dropdown trigger="click">
-              <router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create'}">
-                <el-button type="info">创建form</el-button>
-              </router-link>
-              <el-button>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
-              <el-dropdown-menu class="no-padding no-hover" 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>
-          </div>
+          <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>
-              平台<i class="el-icon-caret-bottom el-icon--right"></i>
+            <el-button>{{!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>平台
+              <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;">
@@ -37,7 +38,8 @@
 
           <el-dropdown trigger="click">
             <el-button>
-              外链<i class="el-icon-caret-bottom el-icon--right"></i>
+              外链
+              <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">
@@ -130,9 +132,28 @@ import { validateURL } from '@/utils/validate'
 import { fetchArticle } from '@/api/article'
 import { userSearch } from '@/api/remoteSearch'
 
+const defaultForm = {
+  title: '', // 文章题目
+  content: '', // 文章内容
+  content_short: '', // 文章摘要
+  source_uri: '', // 文章外链
+  image_uri: '', // 文章图片
+  source_name: '', // 文章外部作者
+  display_time: undefined, // 前台展示时间
+  id: undefined,
+  platforms: ['a-platform'],
+  comment_disabled: false
+}
+
 export default {
   name: 'articleDetail',
   components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     const validateRequire = (rule, value, callback) => {
       if (value === '') {
@@ -161,24 +182,14 @@ export default {
       }
     }
     return {
-      postForm: {
-        title: '', // 文章题目
-        content: '', // 文章内容
-        content_short: '', // 文章摘要
-        source_uri: '', // 文章外链
-        image_uri: '', // 文章图片
-        source_name: '', // 文章外部作者
-        display_time: undefined, // 前台展示时间
-        id: undefined,
-        platforms: ['a-platform']
-      },
+      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' }
+        { key: 'a-platform', name: 'a-platform' },
+        { key: 'b-platform', name: 'b-platform' },
+        { key: 'c-platform', name: 'c-platform' }
       ],
       rules: {
         image_uri: [{ validator: validateRequire }],
@@ -191,15 +202,13 @@ export default {
   computed: {
     contentShortLength() {
       return this.postForm.content_short.length
-    },
-    isEdit() {
-      return this.$route.meta.isEdit // 根据meta判断
-          // return this.$route.path.indexOf('edit') !== -1 // 根据路由判断
     }
   },
   created() {
     if (this.isEdit) {
       this.fetchData()
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
     }
   },
   methods: {

src/views/form/create.vue

+<template>
+  <article-detail :is-edit='false'></article-detail>
+</template>
+
+<script>
+import ArticleDetail from './components/ArticleDetail'
+
+export default {
+  name: 'createForm',
+  components: { ArticleDetail }
+}
+</script>
+

src/views/form/edit.vue

+<template>
+  <article-detail :is-edit='true'></article-detail>
+</template>
+
+<script>
+import ArticleDetail from './components/ArticleDetail'
+
+export default {
+  name: 'editForm',
+  components: { ArticleDetail }
+}
+</script>
+

src/views/i18n-demo/index.vue

+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <svg-icon icon-class="international" />
+        <span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
+      </div>
+      <div>
+        <el-radio-group v-model="lang" size="small">
+          <el-radio label="zh" border>简体中文</el-radio>
+          <el-radio label="en" border>English</el-radio>
+        </el-radio-group>
+        <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-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"
+            :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>
+        </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="address" :label="$t('i18nView.tableAddress')"></el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import local from './local'
+const viewName = 'i18nView'
+
+export default {
+  name: 'i18n',
+  data() {
+    return {
+      date: '',
+      currentPage: 5,
+      tableData: [{
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-04',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-01',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      }]
+    }
+  },
+  created() {
+    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
+      this.$i18n.mergeLocaleMessage('en', local.en)
+      this.$i18n.mergeLocaleMessage('zh', local.zh)
+    }
+  },
+  computed: {
+    lang: {
+      get() {
+        return this.$store.state.app.language
+      },
+      set(lang) {
+        this.$i18n.locale = lang
+        this.$store.dispatch('setLanguage', lang)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  width: 600px;
+  margin: 20px auto;
+}
+
+.block {
+  padding: 25px;
+}
+</style>

src/views/i18n-demo/local.js

+
+export default {
+  zh: {
+    i18nView: {
+      title: '切换语言',
+      note: '目前只翻译了当前页面和侧边栏和导航，未完待续，敬请期待...',
+      datePlaceholder: '请选择日期',
+      tableDate: '日期',
+      tableName: '姓名',
+      tableAddress: '地址',
+      default: '默认按钮',
+      primary: '主要按钮',
+      success: '成功按钮',
+      info: '信息按钮',
+      warning: '警告按钮',
+      danger: '危险按钮'
+    }
+
+  },
+  en: {
+    i18nView: {
+      title: 'Switch Language',
+      note: 'Currently only translated the i18n page and the sidebar and levelbar, please look forword to...',
+      datePlaceholder: 'Pick a day',
+      tableDate: 'tableDate',
+      tableName: 'tableName',
+      tableAddress: 'tableAddress',
+      default: 'default:',
+      primary: 'primary',
+      success: 'success',
+      info: 'info',
+      warning: 'warning',
+      danger: 'danger'
+    }
+  }
+}

src/views/introduction/index.vue

-<template>
-  <div class="app-container">
-    <div class="wrapper">
-      <code>
-      这半年来一直在用vue写管理后台，目前后台已经有百来个个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包.由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在次项目基础上改造开发时请移除mock文件。
-      写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
-        <ul>
-          <li><a target='_blank' class='lin' href="https://github.com/PanJiaChen/vue-element-admin/">项目地址</a></li>
-          <li><a target='_blank' class='lin' href="https://github.com/PanJiaChen/vue-element-admin/wiki">wiki</a></li>
-          <li><a target='_blank' href="https://juejin.im/post/59097cd7a22b9d0065fb61d2">手摸手，带你用 vue 撸后台 系列一(基础篇)</a></li>
-          <li><a target='_blank' href="https://juejin.im/post/591aa14f570c35006961acac">手摸手，带你用 vue 撸后台 系列二(登录权限篇)</a></li>
-          <li><a target='_blank' href="https://juejin.im/post/593121aa0ce4630057f70d35">手摸手，带你用 vue 撸后台 系列三 (实战篇)</a></li>
-           <li><a target='_blank' href="https://juejin.im/post/595b4d776fb9a06bbe7dba56">手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)</a></li>
-          <li><a target='_blank' href="https://segmentfault.com/a/1190000009090836">手摸手，带你封装一个vue component</a></li>
-        </ul>
-      </code>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-  .wrapper{
-    width: 800px;
-    margin: 30px auto;
-  }
-</style>

src/views/layout/AppMain.vue

-<template>
-	<section class="app-main" style="min-height: 100%">
-		<transition name="fade" mode="out-in">
-			<router-view :key="key"></router-view>
-		</transition>
-	</section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
-    }
-  }
-}
-</script>

src/views/layout/Layout.vue

@@ -3,20 +3,22 @@
 		<sidebar class="sidebar-container"></sidebar>
 		<div class="main-container">
 			<navbar></navbar>
+			<tags-view></tags-view>
 			<app-main></app-main>
 		</div>
 	</div>
 </template>
 
 <script>
-import { Navbar, Sidebar, AppMain } from 'views/layout'
+import { Navbar, Sidebar, AppMain, TagsView } from 'views/layout/components'
 
 export default {
   name: 'layout',
   components: {
     Navbar,
     Sidebar,
-    AppMain
+    AppMain,
+    TagsView
   },
   computed: {
     sidebar() {
@@ -29,35 +31,9 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import "src/styles/mixin.scss";
 	.app-wrapper {
-		@include clearfix;
-		position: relative;
-		height: 100%;
-		width: 100%;
-		&.hideSidebar {
-			.sidebar-container{
-				width:36px;
-				overflow: inherit;
-			}
-			.main-container {
-				margin-left: 36px;
-			}
-		}
-		.sidebar-container {
-			transition: width 0.28s ease-out;
-			width: 180px;
-			height: 100%;
-			position: fixed;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			z-index: 1001;
-			overflow-y: auto;
- 			&::-webkit-scrollbar {display:none}
-		}
-		.main-container {
-			min-height: 100%;
-			transition: margin-left 0.28s ease-out;
-			margin-left: 180px;
-		}
+	  @include clearfix;
+	  position: relative;
+	  height: 100%;
+	  width: 100%;
 	}
 </style>

src/views/layout/Navbar.vue

-<template>
-	<el-menu class="navbar" mode="horizontal">
-		<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
-		<levelbar></levelbar>
-		<tabs-view></tabs-view>
-		<error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
-		<screenfull class='screenfull'></screenfull>
-		<el-dropdown class="avatar-container" trigger="click">
-			<div class="avatar-wrapper">
-				<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
-				<i class="el-icon-caret-bottom"></i>
-			</div>
-			<el-dropdown-menu class="user-dropdown" slot="dropdown">
-				<router-link class='inlineBlock' to="/">
-					<el-dropdown-item>
-						首页
-					</el-dropdown-item>
-				</router-link>
-				<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
-					<el-dropdown-item>
-						项目地址
-					</el-dropdown-item>
-				</a>
-				<el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
-			</el-dropdown-menu>
-		</el-dropdown>
-	</el-menu>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Levelbar from './Levelbar'
-import TabsView from './TabsView'
-import Hamburger from 'components/Hamburger'
-import Screenfull from 'components/Screenfull'
-import ErrorLog from 'components/ErrLog'
-import errLogStore from 'store/errLog'
-
-export default {
-  components: {
-    Levelbar,
-    TabsView,
-    Hamburger,
-    ErrorLog,
-    Screenfull
-  },
-  data() {
-    return {
-      log: errLogStore.state.errLog
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'name',
-      'avatar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload()// 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.navbar {
-			height: 50px;
-			line-height: 50px;
-			border-radius: 0px !important;
-			.hamburger-container {
-					line-height: 58px;
-					height: 50px;
-					float: left;
-					padding: 0 10px;
-			}
-			.errLog-container {
-					display: inline-block;
-					position: absolute;
-					right: 150px;
-			}
-			.screenfull {
-					position: absolute;
-					right: 90px;
-					top: 16px;
-					color: red;
-			}
-			.avatar-container {
-					height: 50px;
-					display: inline-block;
-					position: absolute;
-					right: 35px;
-					.avatar-wrapper {
-							cursor: pointer;
-							margin-top: 5px;
-							position: relative;
-							.user-avatar {
-									width: 40px;
-									height: 40px;
-									border-radius: 10px;
-							}
-							.el-icon-caret-bottom {
-									position: absolute;
-									right: -20px;
-									top: 25px;
-									font-size: 12px;
-							}
-					}
-			}
-	}
-</style>
-
-
-

src/views/layout/SidebarItem.vue

-<template>
-  <div class='menu-wrapper'>
-    <template v-for="item in routes">
-
-      <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
-        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
-          <icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span>{{item.children[0].name}}</span>
-        </el-menu-item>
-      </router-link>
-
-      <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
-        <template slot="title">
-          <icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span>{{item.name}}</span>
-        </template>
-        <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]'> </sidebar-item>
-
-          <router-link v-else :to="item.path+'/'+child.path">
-            <el-menu-item :index="item.path+'/'+child.path">
-              <icon-svg v-if='child.icon' :icon-class="child.icon"></icon-svg><span>{{child.name}}</span>
-            </el-menu-item>
-          </router-link>
-
-        </template>
-
-      </el-submenu>
-
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SidebarItem',
-  props: {
-    routes: {
-      type: Array
-    }
-  }
-}
-</script>
-

src/views/layout/TabsView.vue

-<template>
-  <div class='tabs-view-container'>
-    <router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
-      <el-tag :closable="true" :type="isActive(tag.path)?'primary':''" @close='closeViewTabs(tag,$event)'>
-        {{tag.name}}
-      </el-tag>
-    </router-link>
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    visitedViews() {
-      return this.$store.state.app.visitedViews.slice(-6)
-    }
-  },
-  methods: {
-    closeViewTabs(view, $event) {
-      this.$store.dispatch('delVisitedViews', view).then((views) => {
-        if (this.isActive(view.path)) {
-          const latestView = views.slice(-1)[0]
-          if (latestView) {
-            this.$router.push(latestView.path)
-          } else {
-            this.$router.push('/')
-          }
-        }
-      })
-      $event.preventDefault()
-    },
-    generateRoute() {
-      if (this.$route.name) {
-        return this.$route
-      }
-      return false
-    },
-    addViewTabs() {
-      const route = this.generateRoute()
-      if (!route) {
-        return false
-      }
-      this.$store.dispatch('addVisitedViews', this.generateRoute())
-    },
-    isActive(path) {
-      return path === this.$route.path
-    }
-  },
-  watch: {
-    $route() {
-      this.addViewTabs()
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .tabs-view-container {
-    display: inline-block;
-    vertical-align: top;
-    margin-left: 10px;
-    .tabs-view {
-      margin-left: 10px;
-    }
-  }
-</style>

src/views/layout/components/AppMain.vue

+<template>
+  <section class="app-main" style="min-height: 100%">
+    <transition name="fade" mode="out-in">
+      <keep-alive :include="cachedViews">
+        <router-view></router-view>
+      </keep-alive>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    cachedViews() {
+      return this.$store.state.app.cachedViews
+    }
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
+}
+</script>

src/views/layout/components/Navbar.vue

+<template>
+  <el-menu class="navbar" mode="horizontal">
+    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+
+    <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>
+
+      <el-tooltip effect="dark" content="全屏" placement="bottom">
+        <screenfull class="screenfull right-menu-item"></screenfull>
+      </el-tooltip>
+
+      <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+        <div>
+          <svg-icon class-name='right-menu-item international-icon' icon-class="language" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
+          <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <el-tooltip effect="dark" content="换肤" placement="bottom">
+        <theme-picker class="theme-switch right-menu-item"></theme-picker>
+      </el-tooltip>
+
+      <el-dropdown class="avatar-container right-menu-item" trigger="click">
+        <div class="avatar-wrapper">
+          <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+          <i class="el-icon-caret-bottom"></i>
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <router-link to="/">
+            <el-dropdown-item>
+              首页
+            </el-dropdown-item>
+          </router-link>
+          <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
+            <el-dropdown-item>
+              项目地址
+            </el-dropdown-item>
+          </a>
+          <el-dropdown-item divided>
+            <span @click="logout" style="display:block;">退出登录</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </el-menu>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+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'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger,
+    ThemePicker,
+    ErrorLog,
+    Screenfull
+  },
+  data() {
+    return {
+      log: errLogStore.state.errLog
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'name',
+      'avatar',
+      'language'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('toggleSideBar')
+    },
+    handleSetLanguage(lang) {
+      this.$i18n.locale = lang
+      this.$store.dispatch('setLanguage', lang)
+      this.$message({
+        message: 'switch language success',
+        type: 'success'
+      })
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload()// 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  border-radius: 0px !important;
+  .hamburger-container {
+    line-height: 58px;
+    height: 50px;
+    float: left;
+    padding: 0 10px;
+  }
+  .breadcrumb-container{
+    float: left;
+  }
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+  .right-menu {
+    float: right;
+    height: 100%;
+    &:focus{
+     outline: none;
+    }
+    .right-menu-item {
+      display: inline-block;
+      margin: 0 8px;
+    }
+    .screenfull {
+      height: 20px;
+    }
+    .international{
+      vertical-align: top;
+      .international-icon{
+        font-size: 20px;
+        cursor: pointer;
+        vertical-align: -5px;
+      }
+    }
+    .theme-switch {
+      vertical-align: 15px;
+    }
+    .avatar-container {
+      height: 50px;
+      margin-right: 30px;
+      .avatar-wrapper {
+        cursor: pointer;
+        margin-top: 5px;
+        position: relative;
+        .user-avatar {
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+        .el-icon-caret-bottom {
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>
+
+
+

src/views/layout/components/Sidebar/SidebarItem.vue

+<template>
+  <div class="menu-wrapper">
+    <template v-for="item in routes">
+
+      <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :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">
+        <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">
+          <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">
+            <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>
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarItem',
+  props: {
+    routes: {
+      type: Array
+    }
+  },
+  methods: {
+    generateTitle(title) {
+      return this.$t('route.' + title)
+    }
+  }
+}
+</script>
+

src/views/layout/Sidebar.vue → src/views/layout/components/Sidebar/index.vue

 <template>
-    <el-menu mode="vertical" theme="dark" unique-opened :default-active="$route.path" :collapse="isCollapse">
-      <sidebar-item :routes='permission_routers'></sidebar-item>
+  <scroll-bar>
+    <el-menu mode="vertical" unique-opened :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>
 </template>
 
-
 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
+import ScrollBar from '@/components/ScrollBar'
+
 export default {
-  components: { SidebarItem },
+  components: { SidebarItem, ScrollBar },
   computed: {
     ...mapGetters([
       'permission_routers',

src/views/layout/components/TagsView.vue

+<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>
+</template>
+
+<script>
+import ScrollPane from '@/components/ScrollPane'
+
+export default {
+  components: { ScrollPane },
+  computed: {
+    visitedViews() {
+      return this.$store.state.app.visitedViews
+    }
+  },
+  mounted() {
+    this.addViewTags()
+  },
+  methods: {
+    closeViewTags(view, $event) {
+      this.$store.dispatch('delVisitedViews', view).then((views) => {
+        if (this.isActive(view)) {
+          const latestView = views.slice(-1)[0]
+          if (latestView) {
+            this.$router.push(latestView.path)
+          } else {
+            this.$router.push('/')
+          }
+        }
+      })
+      $event.preventDefault()
+    },
+    generateRoute() {
+      if (this.$route.name) {
+        return this.$route
+      }
+      return false
+    },
+    addViewTags() {
+      const route = this.generateRoute()
+      if (!route) {
+        return false
+      }
+      this.$store.dispatch('addVisitedViews', route)
+    },
+    isActive(route) {
+      return route.path === this.$route.path || route.name === this.$route.name
+    }
+
+  },
+  watch: {
+    $route() {
+      this.addViewTags()
+    }
+  }
+}
+</script>
+
+<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;
+    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;
+      }
+    }
+  }
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+.tags-view-container {
+  .tags-view-item {
+    .el-icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transform-origin: 100% 50%;
+      &:before {
+        transform: scale(.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+      &:hover {
+        background-color: #b4bccc;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/layout/index.js → src/views/layout/components/index.js

 export { default as Navbar } from './Navbar'
-
-export { default as Sidebar } from './Sidebar'
-
-export { default as Levelbar } from './Levelbar'
-
+export { default as Sidebar } from './Sidebar/index.vue'
+export { default as TagsView } from './TagsView'
 export { default as AppMain } from './AppMain'

src/views/login/index.vue

@@ -5,26 +5,26 @@
 
       <el-form-item prop="username">
         <span class="svg-container svg-container_login">
-          <icon-svg icon-class="user" />
+          <svg-icon icon-class="user" />
         </span>
         <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
       </el-form-item>
 
       <el-form-item prop="password">
         <span class="svg-container">
-          <icon-svg icon-class="password" />
+          <svg-icon icon-class="password" />
         </span>
         <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
           placeholder="密码" />
-        <span class='show-pwd' @click='showPwd'><icon-svg icon-class="eye" /></span>
+        <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
       </el-form-item>
 
       <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
 
-      <div class='tips'>账号:admin 密码随便填</div>
-      <div class='tips'>账号:editor  密码随便填</div>
+      <div class="tips">账号:admin 密码随便填</div>
+      <div class="tips">账号:editor  密码随便填</div>
 
-      <el-button class='thirdparty-button' type="primary" @click='showDialog=true'>打开第三方登录</el-button>
+      <el-button class="thirdparty-button" type="primary" @click="showDialog=true">打开第三方登录</el-button>
     </el-form>
 
     <el-dialog title="第三方验证" :visible.sync="showDialog">
@@ -87,7 +87,7 @@ export default {
           this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
             this.loading = false
             this.$router.push({ path: '/' })
-                // this.showDialog = true
+            // this.showDialog = true
           }).catch(() => {
             this.loading = false
           })
@@ -98,29 +98,29 @@ export default {
       })
     },
     afterQRScan() {
-          // const hash = window.location.hash.slice(1)
-          // const hashObj = getQueryObject(hash)
-          // const originUrl = window.location.origin
-          // history.replaceState({}, '', originUrl)
-          // const codeMap = {
-          //   wechat: 'code',
-          //   tencent: 'code'
-          // }
-          // const codeName = hashObj[codeMap[this.auth_type]]
-          // if (!codeName) {
-          //   alert('第三方登录失败')
-          // } else {
-          //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
-          //     this.$router.push({ path: '/' })
-          //   })
-          // }
+      // const hash = window.location.hash.slice(1)
+      // const hashObj = getQueryObject(hash)
+      // const originUrl = window.location.origin
+      // history.replaceState({}, '', originUrl)
+      // const codeMap = {
+      //   wechat: 'code',
+      //   tencent: 'code'
+      // }
+      // const codeName = hashObj[codeMap[this.auth_type]]
+      // if (!codeName) {
+      //   alert('第三方登录失败')
+      // } else {
+      //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
+      //     this.$router.push({ path: '/' })
+      //   })
+      // }
     }
   },
   created() {
-        // window.addEventListener('hashchange', this.afterQRScan)
+    // window.addEventListener('hashchange', this.afterQRScan)
   },
   destroyed() {
-        // window.removeEventListener('hashchange', this.afterQRScan)
+    // window.removeEventListener('hashchange', this.afterQRScan)
   }
 }
 </script>
@@ -197,6 +197,7 @@ export default {
       font-size: 16px;
       color: $dark_gray;
       cursor: pointer;
+      user-select:none;
     }
     .thirdparty-button{
       position: absolute;

src/views/login/socialsignin.vue

 <template>
   <div class="social-signup-container">
     <div class="sign-btn" @click="wechatHandleClick('wechat')">
-      <span class="wx-svg-container"><icon-svg icon-class="wechat" class="icon"></icon-svg></span> 微信
+      <span class="wx-svg-container"><svg-icon icon-class="wechat" class="icon"></svg-icon></span> 微信
     </div>
     <div class="sign-btn" @click="tencentHandleClick('tencent')">
-      <span class="qq-svg-container"><icon-svg icon-class="qq" class="icon"></icon-svg></span> QQ
+      <span class="qq-svg-container"><svg-icon icon-class="qq" class="icon"></svg-icon></span> QQ
     </div>
   </div>
 </template>

src/views/permission/index.vue

 <template>
   <div class="app-container">
-    <div style='margin-bottom:15px;'>你的权限： {{roles}}</div>
+    <div style="margin-bottom:15px;">你的权限： {{roles}}</div>
     切换权限：
     <el-radio-group v-model="role">
       <el-radio-button label="editor"></el-radio-button>
@@ -12,6 +12,7 @@
 import { mapGetters } from 'vuex'
 
 export default{
+  name: 'permission',
   data() {
     return {
       role: ''

src/views/svg-icons/index.vue

 <template>
   <div class="icons-container">
+    <p class="warn-content">
+      <a href="https://panjiachen.github.io/vue-element-admin-site/#/icon" target="_blank">添加和使用方式</a>
+    </p>
     <div class="icons-wrapper">
-      <div v-for='item of iconsMap' :key='item' class='icon-item' @click='handleClipboard(generateIconCode(item),$event)'>
-        <el-tooltip placement="top" effect="light">
+      <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
+        <el-tooltip placement="top">
           <div slot="content">
             {{generateIconCode(item)}}
           </div>
-          <icon-svg :icon-class="item" />
+          <div class="icon-item">
+            <svg-icon :icon-class="item" />
+            <span>{{item}}</span>
+          </div>
         </el-tooltip>
-        <span>{{item}}</span>
       </div>
     </div>
   </div>
@@ -16,9 +21,10 @@
 
 <script>
 import icons from './generateIconsView'
-import clipboard from '@/utils/clipboard' // use clipboard directly
+import clipboard from '@/utils/clipboard'
 
 export default {
+  name: 'icons',
   data() {
     return {
       iconsMap: []
@@ -32,7 +38,7 @@ export default {
   },
   methods: {
     generateIconCode(symbol) {
-      return `<icon-svg :icon-class="${symbol}" />`
+      return `<svg-icon icon-class="${symbol}" />`
     },
     handleClipboard(text, event) {
       clipboard(text, event)
@@ -43,19 +49,19 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .icons-container {
-  margin: 40px 20px 0;
+  margin: 10px 20px 0;
   overflow: hidden;
   .icons-wrapper {
     margin: 0 auto;
   }
   .icon-item {
     margin: 20px;
-    height: 137px;
+    height: 110px;
     text-align: center;
-    width: 120px;
+    width: 110px;
     float: left;
-    font-size: 40px;
-    color: #666;
+    font-size: 30px;
+    color: #24292e;
     cursor: pointer;
   }
   span {

src/views/theme/index.vue

@@ -3,23 +3,30 @@
     <el-card class="box-card">
       <div slot="header">
         <span style="line-height: 36px;">偏好设置</span>
-        <a class='link-type link-title' target="_blank" href='https://segmentfault.com/a/1190000009762198#articleHeader2'>动态换肤的教程</a>
+        <a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/#/theme'>换肤文档</a>
       </div>
       <div class="box-item">
         <span class="field-label">换肤:</span>
-        <el-switch v-model="theme" on-text="" off-text="">
-        </el-switch>
+        <el-switch v-model="theme"></el-switch>
       </div>
     </el-card>
 
     <div class="block">
-      <span class="demonstration">Button: </span>
-      <span class="wrapper">
+        <el-button type="primary">成功按钮</el-button>
         <el-button type="success">成功按钮</el-button>
         <el-button type="warning">警告按钮</el-button>
         <el-button type="danger">危险按钮</el-button>
         <el-button type="info">信息按钮</el-button>
-       </span>
+    </div>
+
+    <div class="block">
+      <el-button type="primary" icon="el-icon-edit"></el-button>
+      <el-button type="primary" icon="el-icon-share"></el-button>
+      <el-button type="primary" icon="el-icon-delete"></el-button>
+      <el-button type="primary" icon="el-icon-search">Search</el-button>
+      <el-button type="primary">Upload
+        <i class="el-icon-upload el-icon-right"></i>
+      </el-button>
     </div>
 
     <div class="block">
@@ -29,36 +36,38 @@
     </div>
 
     <div class="block">
-      <el-alert class='alert-item' title="成功提示的文案" type="success">
-      </el-alert>
-      <el-alert class='alert-item' title="消息提示的文案" type="info">
-      </el-alert>
-      <el-alert class='alert-item' title="警告提示的文案" type="warning">
-      </el-alert>
-      <el-alert class='alert-item' title="错误提示的文案" type="error">
-      </el-alert>
+      <el-radio-group v-model="radio">
+        <el-radio :label="3">Option A</el-radio>
+        <el-radio :label="6">Option B</el-radio>
+        <el-radio :label="9">Option C</el-radio>
+      </el-radio-group>
+    </div>
+
+    <div class="block">
+      <el-slider v-model="slideValue"></el-slider>
     </div>
 
   </div>
 </template>
 
-
 <script>
 import { toggleClass } from '@/utils'
 import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
 
 export default {
+  name: 'theme',
   data() {
     return {
       theme: false,
       tags: [
-        { name: '标签一', type: '' },
-        { name: '标签二', type: 'gray' },
-        { name: '标签三', type: 'primary' },
-        { name: '标签四', type: 'success' },
-        { name: '标签五', type: 'warning' },
-        { name: '标签六', type: 'danger' }
-      ]
+        { name: 'Tag One', type: '' },
+        { name: 'Tag Two', type: 'info' },
+        { name: 'Tag Three', type: 'success' },
+        { name: 'Tag Four', type: 'warning' },
+        { name: 'Tag Five', type: 'danger' }
+      ],
+      slideValue: 50,
+      radio: 3
     }
   },
   watch: {
@@ -70,20 +79,16 @@ export default {
 </script>
 
 <style scoped>
-  .box-card{
-    width: 400px;
-    margin: 20px auto;
-  }
-  .block{
-    padding: 30px 24px;
-  }
-  .alert-item{
-    margin-bottom: 10px;
-  }
-  .tag-item{
-    margin-right: 15px;
-  }
-  .link-title{
-    margin-left:35px;
-  }
+.box-card {
+  width: 400px;
+  margin: 20px auto;
+}
+
+.block {
+  padding: 30px 24px;
+}
+
+.tag-item {
+  margin-right: 15px;
+}
 </style>

src/views/zip/index.vue

 <template>
   <div class="app-container">
+    <el-input style='width:240px;' placeholder="请输入文件名(默认file)" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出zip</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label='ID' width="95">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
       <el-table-column label="文章标题">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
       <el-table-column label="作者" width="95" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="阅读数" width="115" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
       <el-table-column align="center" prop="created_at" label="发布时间" width="220">
-        <template scope="scope">
+        <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>
         </template>
@@ -36,11 +37,13 @@
 import { fetchList } from '@/api/article'
 
 export default {
+  name: 'exportZip',
   data() {
     return {
       list: null,
       listLoading: true,
-      downloadLoading: false
+      downloadLoading: false,
+      filename: ''
     }
   },
   created() {
@@ -62,7 +65,7 @@ export default {
         const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
         const list = this.list
         const data = this.formatJson(filterVal, list)
-        export_txt_to_zip(tHeader, data, '列表文本', '压缩文本')
+        export_txt_to_zip(tHeader, data, this.filename, this.filename)
         this.downloadLoading = false
       })
     },