refactor:foramt views/component-demo

2017-11-17 17:51:41 +08:00
parent 46b4f74969
commit d20585a3f9
35 changed files with 289 additions and 446 deletions
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -1,6 +1,6 @@
 <template>
  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; 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"
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -1,6 +1,6 @@
 <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;
 }
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -1,6 +1,6 @@
 <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>
@@ -15,8 +15,7 @@ export default {
  props: {
    value: String,
    id: {
-      type: String,
-      default: 'markdown-editor'
+      type: String
    },
    autofocus: {
      type: Boolean,
@@ -52,7 +51,7 @@ 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,
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,6 +1,16 @@
 <template>
-<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>
+    <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>

--- a/src/components/SplitPane/Pane.vue
+++ b/src/components/SplitPane/Pane.vue
@@ -1,44 +0,0 @@
-<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>
--- a/src/components/SplitPane/Resizer.vue
+++ b/src/components/SplitPane/Resizer.vue
@@ -1,72 +0,0 @@
-<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>
--- a/src/components/SplitPane/index.vue
+++ b/src/components/SplitPane/index.vue
@@ -1,111 +0,0 @@
-<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>
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,6 +1,6 @@
 <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>
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg组件
-import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for views/icons , you can delete it
-// register globally
+import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it

+// 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
--- a/src/mock/login.js
+++ b/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: '工程师小王'
  }
 }

--- a/src/permission.js
+++ b/src/permission.js
@@ -11,8 +11,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
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,22 +87,23 @@ export const asyncRouterMap = [
  {
    path: '/components',
    component: Layout,
+    name: 'component-demo',
    meta: {
      title: 'components',
      icon: 'component'
    },
    children: [
-      { path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce', meta: { title: 'tinymce' }},
-      { path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown', meta: { title: 'markdown' }},
-      { path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor', meta: { title: 'jsonEditor' }},
-      { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList', meta: { title: 'dndList' }},
-      { path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane', meta: { title: 'splitPane' }},
-      { path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload', meta: { title: 'avatarUpload' }},
-      { path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone', meta: { title: 'dropzone' }},
-      { path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky', meta: { title: 'sticky' }},
-      { path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo', meta: { title: 'countTo' }},
-      { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin', meta: { title: 'componentMixin' }},
-      { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop', meta: { title: 'backToTop' }}
+      { 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' }}
    ]
  },

--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -50,7 +50,7 @@ const app = {
    }
  },
  actions: {
-    ToggleSideBar({ commit }) {
+    toggleSideBar({ commit }) {
      commit('TOGGLE_SIDEBAR')
    },
    setLanguage({ commit }, language) {
--- a/src/store/modules/user.js
+++ b/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)
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -110,6 +110,19 @@ code {
  }
 }

+.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全局样式
 .app-container {
  padding: 20px;
--- a/src/utils/clipboard.js
+++ b/src/utils/clipboard.js
@@ -1,5 +1,5 @@
-import Clipboard from 'clipboard'
 import Vue from 'vue'
+import Clipboard from 'clipboard'

 function clipboardSuccess() {
  Vue.prototype.$message({
--- a/src/views/components-demo/avatarUpload.vue
+++ b/src/views/components-demo/avatarUpload.vue
@@ -1,15 +1,17 @@
 <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 {
--- a/src/views/components-demo/backToTop.vue
+++ b/src/views/components-demo/backToTop.vue
@@ -138,6 +138,7 @@
 import BackToTop from '@/components/BackToTop'

 export default {
+  name: 'backToTop-demo',
  components: { BackToTop },
  data() {
    return {
--- a/src/views/components-demo/countTo.vue
+++ b/src/views/components-demo/countTo.vue
@@ -1,23 +1,39 @@
 <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 {
--- a/src/views/components-demo/dndList.vue
+++ b/src/views/components-demo/dndList.vue
@@ -12,6 +12,7 @@ import DndList from '@/components/DndList'
 import { fetchList } from '@/api/article'

 export default {
+  name: 'dnd-list-demo',
  components: { DndList },
  data() {
    return {
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@@ -1,7 +1,7 @@
 <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) {
--- a/src/views/components-demo/jsonEditor.vue
+++ b/src/views/components-demo/jsonEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="components-container" style='height:100vh'>
+  <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>
@@ -13,6 +13,7 @@ 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 {
+  name: 'jsonEditor-demo',
  components: { JsonEditor },
  data() {
    return {
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -1,10 +1,14 @@
 <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">
-      <markdown-editor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></markdown-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>
@@ -13,6 +17,7 @@
 import MarkdownEditor from '@/components/MarkdownEditor'

 export default {
+  name: 'markdown-demo',
  components: { MarkdownEditor },
  data() {
    return {
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -1,22 +1,22 @@
 <template>
  <div class="components-container">
    <el-row>
-      <el-col :span="4" class='text-center'>
+      <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'>
+      <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'>
+      <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'>
+      <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'>
+      <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'>
+      <el-col :span="4" class="text-center">
        <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
      </el-col>
    </el-row>
@@ -43,7 +43,7 @@
            <span>图片hover效果</span>
          </div>
          <div class="component-item">
-            <pan-thumb width='100px' height='100px' image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
+            <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
              vue-element-admin
            </pan-thumb>
          </div>
@@ -67,7 +67,7 @@
            <span>hover text</span>
          </div>
          <div class="component-item">
-            <mallki className='mallki-text' text='vue-element-admin'></mallki>
+            <mallki className="mallki-text" text="vue-element-admin"></mallki>
          </div>
        </el-card>
      </el-col>
@@ -83,6 +83,7 @@ import waves from '@/directive/waves/index.js' // 水波纹指令
 import Mallki from '@/components/TextHoverEffect/Mallki'

 export default {
+  name: 'componentMixin-demo',
  components: {
    PanThumb,
    MdInput,
--- a/src/views/components-demo/splitpane.vue
+++ b/src/views/components-demo/splitpane.vue
@@ -1,7 +1,7 @@
 <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>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">
@@ -26,6 +26,7 @@
 import splitPane from 'vue-splitpane'

 export default {
+  name: 'splitpane-demo',
  components: { splitPane },
  methods: {
    resize() {
@@ -37,29 +38,29 @@ export default {

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

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

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

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

 	.bottom-container {
-		width: 100%;
-		background-color: #95E1D3;
-		height: 100%;
+	  width: 100%;
+	  background-color: #95E1D3;
+	  height: 100%;
 	}
 </style>
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -97,6 +97,7 @@
 import Sticky from '@/components/Sticky'

 export default {
+  name: 'sticky-demo',
  components: { Sticky },
  data() {
    return {
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -1,10 +1,12 @@
 <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" 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 {
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -8,6 +8,7 @@ require('echarts/theme/macarons') // echarts 主题
 import { debounce } from '@/utils'

 const animationDuration = 6000
+
 export default {
  props: {
    className: {
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -0,0 +1,131 @@
+<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
+  }
+}
+</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>
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -2,55 +2,10 @@
  <div class="dashboard-editor-container">
    <github-corner></github-corner>

-    <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>
+    <panel-group></panel-group>

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

    <el-row style="margin-top:30px;" :gutter="30">
@@ -87,8 +42,8 @@
 </template>

 <script>
-import CountTo from 'vue-count-to'
 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'
@@ -119,8 +74,8 @@ const lineChartData = {
 export default {
  name: 'dashboard-admin',
  components: {
-    CountTo,
    GithubCorner,
+    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
@@ -146,75 +101,6 @@ export default {
 .dashboard-editor-container {
  padding: 30px;
  background-color: rgb(240, 242, 245);
-  .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: #36a3f7;
-      }
-      .icon-message {
-        background: #f4516c;
-      }
-      .icon-money {
-        background: #716aca;
-      }
-      .icon-shoppingCard {
-        background: #34bfa3
-      }
-    }
-    .icon-people {
-      color: #36a3f7;
-    }
-    .icon-message {
-      color: #f4516c;
-    }
-    .icon-money {
-      color: #716aca;
-    }
-    .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;
-      }
-    }
-  }
  .chart-wrapper {
    background: #fff;
    padding: 15px 15px 0;
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -7,11 +7,11 @@
      <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>
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -83,7 +83,7 @@ export default {
  },
  methods: {
    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
+      this.$store.dispatch('toggleSideBar')
    },
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -9,7 +9,7 @@
        </el-menu-item>
      </router-link>

-      <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name" :key='item.name'>
+      <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>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -16,15 +16,15 @@
        </span>
        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
          placeholder="密码" />
-        <span class='show-pwd' @click='showPwd'><svg-icon 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">
--- a/src/views/svg-icons/index.vue
+++ b/src/views/svg-icons/index.vue
@@ -1,12 +1,15 @@
 <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' @click='handleClipboard(generateIconCode(item),$event)'>
+      <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
        <el-tooltip placement="top">
          <div slot="content">
            {{generateIconCode(item)}}
          </div>
-          <div class='icon-item'>
+          <div class="icon-item">
            <svg-icon :icon-class="item" />
            <span>{{item}}</span>
          </div>
@@ -16,10 +19,9 @@
  </div>
 </template>

-
 <script>
 import icons from './generateIconsView'
-import clipboard from '@/utils/clipboard' // use clipboard directly
+import clipboard from '@/utils/clipboard'

 export default {
  name: 'icons',
@@ -47,7 +49,7 @@ 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;