refactor

index.html

@@ -12,5 +12,4 @@
 <div id="app"></div>
 <!-- built files will be auto injected -->
 </body>
-
 </html>

src/api/article.js

@@ -1,16 +1,25 @@
-import fetch from 'utils/fetch'
+import fetch from '@/utils/fetch'
 
-export function getList() {
+export function fetchList(query) {
   return fetch({
     url: '/article/list',
-    method: 'get'
+    method: 'get',
+    params: query
   })
 }
 
-export function getArticle() {
+export function fetchArticle() {
   return fetch({
     url: '/article/detail',
     method: 'get'
   })
 }
 
+export function fetchPv(pv) {
+  return fetch({
+    url: '/article/pv',
+    method: 'get',
+    params: { pv }
+  })
+}
+

src/api/article_table.js

@@ -1,17 +0,0 @@
-import fetch from 'utils/fetch'
-
-export function fetchList(query) {
-  return fetch({
-    url: '/article_table/list',
-    method: 'get',
-    params: query
-  })
-}
-
-export function fetchPv(pv) {
-  return fetch({
-    url: '/article_table/pv',
-    method: 'get',
-    params: { pv }
-  })
-}

src/api/login.js

@@ -1,4 +1,4 @@
-import fetch from 'utils/fetch'
+import fetch from '@/utils/fetch'
 
 export function loginByUsername(username, password) {
   const data = {

src/api/qiniu.js

@@ -1,4 +1,4 @@
-import fetch from 'utils/fetch'
+import fetch from '@/utils/fetch'
 
 export function getToken() {
   return fetch({

src/api/remoteSearch.js

@@ -1,4 +1,4 @@
-import fetch from 'utils/fetch'
+import fetch from '@/utils/fetch'
 
 export function userSearch(name) {
   return fetch({

src/components/Github/index.vue

@@ -0,0 +1,13 @@
+<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;"
+      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"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg>
+  </a>
+</template>
+

src/components/Screenfull/index.vue

@@ -8,6 +8,7 @@
 
 <script>
 import screenfull from 'screenfull'
+
 export default {
   name: 'hamburger',
   props: {

src/components/TodoList/index.vue

@@ -33,6 +33,7 @@
 
 <script>
 import Todo from './Todo.vue'
+
 const STORAGE_KEY = 'todos'
 const filters = {
   all: todos => todos,

src/components/Upload/singleImage.vue

@@ -18,7 +18,7 @@
 
 <script>
 // 预览效果见付费文章
-import { getToken } from 'api/qiniu'
+import { getToken } from '@/api/qiniu'
 
 export default {
   name: 'singleImageUpload',

src/components/Upload/singleImage2.vue

@@ -17,39 +17,39 @@
 </template>
 
 <script>
-	// 预览效果见专题
+import { getToken } from '@/api/qiniu'
-import { getToken } from 'api/qiniu'
+
 export default {
-	  name: 'singleImageUpload2',
+  name: 'singleImageUpload2',
-	  props: {
+  props: {
-	    value: String
+    value: String
   },
-	  computed: {
+  computed: {
-	    imageUrl() {
+    imageUrl() {
-	      return this.value
+      return this.value
     }
   },
-	  data() {
+  data() {
-	    return {
+    return {
-	      tempUrl: '',
+      tempUrl: '',
-	      dataObj: { token: '', key: '' }
+      dataObj: { token: '', key: '' }
     }
   },
-	  methods: {
+  methods: {
-	    rmImage() {
+    rmImage() {
-	      this.emitInput('')
+      this.emitInput('')
     },
-	    emitInput(val) {
+    emitInput(val) {
-	      this.$emit('input', val)
+      this.$emit('input', val)
     },
-	    handleImageScucess() {
+    handleImageScucess() {
-	      this.emitInput(this.tempUrl)
+      this.emitInput(this.tempUrl)
     },
-	    beforeUpload() {
+    beforeUpload() {
-	      const _self = this
+      const _self = this
       return new Promise((resolve, reject) => {
-	        getToken().then(response => {
+        getToken().then(response => {
-	          const key = response.data.qiniu_key
+          const key = response.data.qiniu_key
           const token = response.data.qiniu_token
           _self._data.dataObj.token = token
           _self._data.dataObj.key = key
@@ -61,7 +61,7 @@ export default {
       })
     }
   }
-	}
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/components/Upload/singleImage3.vue

@@ -26,52 +26,52 @@
 </template>
 
 <script>
-	// 预览效果见文章
+import { getToken } from '@/api/qiniu'
-	import { getToken } from 'api/qiniu'
+
 export default {
-	  name: 'singleImageUpload',
+  name: 'singleImageUpload',
-	  props: {
+  props: {
-	    value: String
+    value: String
   },
-	  computed: {
+  computed: {
-	    imageUrl() {
+    imageUrl() {
-	      return this.value
+      return this.value
     }
   },
-	  data() {
+  data() {
-	    return {
+    return {
-	      tempUrl: '',
+      tempUrl: '',
-	      dataObj: { token: '', key: '' }
+      dataObj: { token: '', key: '' }
     }
   },
-	  methods: {
+  methods: {
-	    rmImage() {
+    rmImage() {
-	      this.emitInput('')
+      this.emitInput('')
     },
-	    emitInput(val) {
+    emitInput(val) {
-	      this.$emit('input', val)
+      this.$emit('input', val)
     },
-	    handleImageScucess(file) {
+    handleImageScucess(file) {
-	      this.emitInput(file.files.file)
+      this.emitInput(file.files.file)
     },
-	    beforeUpload() {
+    beforeUpload() {
-	      const _self = this
+      const _self = this
       return new Promise((resolve, reject) => {
-	        getToken().then(response => {
+        getToken().then(response => {
-	          const key = response.data.qiniu_key
+          const key = response.data.qiniu_key
           const token = response.data.qiniu_token
           _self._data.dataObj.token = token
           _self._data.dataObj.key = key
           this.tempUrl = response.data.qiniu_url
           resolve(true)
         }).catch(err => {
-	          console.log(err)
+          console.log(err)
           reject(false)
         })
       })
     }
   }
-	}
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/main.js

@@ -4,7 +4,7 @@ import 'element-ui/lib/theme-default/index.css'
 import App from './App'
 import router from './router'
 import store from './store'
-import '@/assets/iconfont/iconfont' // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
+import '@/assets/iconfont/iconfont' // iconfont 具体图标见wiki
 import IconSvg from '@/components/Icon-svg'// svg组件
 import * as filters from '@/filters' // 全局filter
 import '@/errorLog'// error log

src/mock/article.js

@@ -1,21 +1,50 @@
 import Mock from 'mockjs'
+import { param2Obj } from '@/utils'
 
 const List = []
-const count = 20
+const count = 100
 
 for (let i = 0; i < count; i++) {
   List.push(Mock.mock({
-    id: '@id',
+    id: '@increment',
-    title: '@ctitle(10, 20)',
+    timestamp: +Mock.Random.date('T'),
-    'status|1': ['published', 'draft'],
     author: '@cname',
+    auditor: '@cname',
+    title: '@ctitle(10, 20)',
+    forecast: '@float(0, 100, 2, 2)',
+    importance: '@integer(1, 3)',
+    'type|1': ['CN', 'US', 'JP', 'EU'],
+    'status|1': ['published', 'draft', 'deleted'],
     display_time: '@datetime',
     pageviews: '@integer(300, 5000)'
   }))
 }
 
 export default {
-  getList: () => List,
+  getList: config => {
+    const { importance, type, title, page = 1, limit = 20, sort } = param2Obj(config.url)
+
+    let mockList = List.filter(item => {
+      if (importance && item.importance !== +importance) return false
+      if (type && item.type !== type) return false
+      if (title && item.title.indexOf(title) < 0) return false
+      return true
+    })
+
+    if (sort === '-id') {
+      mockList = mockList.reverse()
+    }
+
+    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
+
+    return {
+      total: mockList.length,
+      items: pageList
+    }
+  },
+  getPv: () => ({
+    pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
+  }),
   getArticle: () => ({
     id: 120000000001,
     author: { key: 'mockPan' },

src/mock/article_table.js

@@ -1,44 +0,0 @@
-import Mock from 'mockjs'
-import { param2Obj } from 'utils'
-
-const List = []
-const count = 100
-
-for (let i = 0; i < count; i++) {
-  List.push(Mock.mock({
-    id: '@increment',
-    timestamp: +Mock.Random.date('T'),
-    author: '@cname',
-    auditor: '@cname',
-    title: '@ctitle(10, 20)',
-    forecast: '@float(0, 100, 2, 2)',
-    importance: '@integer(1, 3)',
-    'type|1': ['CN', 'US', 'JP', 'EU'],
-    'status|1': ['published', 'draft', 'deleted'],
-    pageviews: '@integer(300, 5000)'
-  }))
-}
-
-export default {
-  getList: config => {
-    const { importance, type, title, page, limit, sort } = param2Obj(config.url)
-    let mockList = List.filter(item => {
-      if (importance && item.importance !== +importance) return false
-      if (type && item.type !== type) return false
-      if (title && item.title.indexOf(title) < 0) return false
-      return true
-    })
-    if (sort === '-id') {
-      mockList = mockList.reverse()
-    }
-
-    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
-    return {
-      total: mockList.length,
-      items: pageList
-    }
-  },
-  getPv: () => ({
-    pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
-  })
-}

src/mock/index.js

@@ -1,7 +1,6 @@
 import Mock from 'mockjs'
 import loginAPI from './login'
 import articleAPI from './article'
-import article_tableAPI from './article_table'
 import remoteSearchAPI from './remoteSearch'
 
 Mock.setup({
@@ -16,10 +15,7 @@ Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
 // 文章相关
 Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
 Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
-
+Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
-// table example相关
-Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList)
-Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv)
 
 // 搜索相关
 Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)

src/mock/login.js

@@ -1,4 +1,4 @@
-import { param2Obj } from 'utils'
+import { param2Obj } from '@/utils'
 
 const userMap = {
   admin: {

src/mock/remoteSearch.js

@@ -1,5 +1,5 @@
 import Mock from 'mockjs'
-import { param2Obj } from 'utils'
+import { param2Obj } from '@/utils'
 
 const NameList = []
 const count = 100

src/router/index.js

@@ -104,7 +104,7 @@ export const asyncRouterMap = [
         name: 'Table',
         icon: 'table',
         children: [
-          { path: 'dynamictable', component: _import('example/table/dynamictable'), name: '动态table' },
+          { 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' }
@@ -112,7 +112,6 @@ export const asyncRouterMap = [
       },
       { path: 'form/edit', icon: 'ziliaoshouce', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true }},
       { path: 'form/create', icon: 'yinhangqia', component: _import('example/form'), name: '创建Form' },
-
       { path: 'tab/index', icon: 'mobankuangjia', component: _import('example/tab/index'), name: 'Tab' }
     ]
   },

src/store/modules/permission.js

@@ -1,4 +1,4 @@
-import { asyncRouterMap, constantRouterMap } from 'src/router'
+import { asyncRouterMap, constantRouterMap } from '@/router'
 
 /**
  * 通过meta.role判断是否与当前用户权限匹配

src/store/modules/user.js

@@ -1,5 +1,5 @@
-import { loginByUsername, logout, getUserInfo } from 'api/login'
+import { loginByUsername, logout, getUserInfo } from '@/api/login'
-import { getToken, setToken, removeToken } from 'utils/auth'
+import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
   state: {

src/views/charts/keyboard.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import keyboardChart from 'components/Charts/keyboard'
+import keyboardChart from '@/components/Charts/keyboard'
 
 export default {
   components: { keyboardChart }

src/views/charts/keyboard2.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import keyboardChart2 from 'components/Charts/keyboard2'
+import keyboardChart2 from '@/components/Charts/keyboard2'
 
 export default {
   components: { keyboardChart2 }

src/views/charts/line.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import lineMarker from 'components/Charts/lineMarker'
+import lineMarker from '@/components/Charts/lineMarker'
 
 export default {
   components: { lineMarker }

src/views/charts/mixChart.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import mixChart from 'components/Charts/mixChart'
+import mixChart from '@/components/Charts/mixChart'
 
 export default {
   components: { mixChart }

src/views/components/dndList.vue

@@ -9,7 +9,7 @@
 
 <script>
 import DndList from '@/components/twoDndList'
-import { getList } from 'api/article'
+import { fetchList } from '@/api/article'
 
 export default {
   components: { DndList },
@@ -20,14 +20,14 @@ export default {
     }
   },
   created() {
-    this.fetchData()
+    this.getData()
   },
   methods: {
-    fetchData() {
+    getData() {
       this.listLoading = true
-      getList(this.listQuery).then(response => {
+      fetchList().then(response => {
-        this.list1 = response.data.splice(0, 5)
+        this.list1 = response.data.items.splice(0, 5)
-        this.list2 = response.data
+        this.list2 = response.data.items
       })
     }
   }

src/views/components/markdown.vue

@@ -11,6 +11,7 @@
 
 <script>
 import MdEditor from '@/components/MarkdownEditor'
+
 export default {
   components: { MdEditor },
   data() {

src/views/components/mixin.vue

@@ -24,7 +24,7 @@
 <script>
 import MdInput from '@/components/MDinput'
 import PanThumb from '@/components/PanThumb'
-import waves from '@/directive/waves.js'// 水波纹指令
+import waves from '@/directive/waves.js' // 水波纹指令
 
 export default {
   components: { MdInput, PanThumb },

src/views/components/tinymce.vue

@@ -2,7 +2,7 @@
   <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>
     <div>
-      <Tinymce :height=200 ref="editor" v-model="content"></Tinymce>
+      <tinymce :height=200 ref="editor" v-model="content"></tinymce>
     </div>
     <div class='editor-content' v-html='content'></div>
   </div>

src/views/dashboard/admin/index.vue

@@ -0,0 +1,131 @@
+<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>
+
+		<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="a" 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="b" class="dashboard-editor-icon"></icon-svg>
+					</div>
+				</el-card>
+			</el-col>
+
+			<el-col :span="8">
+				<pie-chart></pie-chart>
+			</el-col>
+
+			<el-col :span="10">
+				<bar-chart></bar-chart>
+			</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>
+
+	</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'
+
+export default {
+  name: 'dashboard-admin',
+  components: { countTo, panThumb, todoList, Github, pieChart, lineChart, barChart },
+  data() {
+    return {
+      statisticsData: {
+        article_count: 1024,
+        pageviews_count: 1024
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'avatar',
+      'roles'
+    ])
+  }
+}
+</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;
+        }
+    }
+}
+</style>

src/views/dashboard/admin/lineChart.vue

@@ -5,7 +5,7 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts 主题
-import { debounce } from 'utils'
+import { debounce } from '@/utils'
 
 export default {
   props: {
@@ -42,7 +42,7 @@ export default {
       window.addEventListener('resize', this.__resizeHanlder)
     }
 
-      // 监听侧边栏的变化
+    // 监听侧边栏的变化
     const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
     sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
   },

src/views/dashboard/default/index.vue

@@ -1,82 +0,0 @@
-<template>
-	<div class="dashboard-editor-container">
-		<div class=" clearfix">
-			<pan-thumb style="float: left" :image="avatar"> 你的权限:
-				<span class="pan-info-roles" v-for="item in roles">{{item}}</span>
-			</pan-thumb>
-			<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;"
-				  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"
-					  fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-					<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-					  fill="currentColor" class="octo-body"></path>
-				</svg>
-			</a>
-			<div class="info-container">
-				<span class="display_name">{{name}}</span>
-				<span style='font-size:20px;padding-top:20px;display:inline-block;'>普通编辑dashboard</span>
-			</div>
-		</div>
-		<div>
-			<img class='emptyGif' :src="emptyGif">
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanThumb from 'components/PanThumb'
-
-export default {
-  name: 'dashboard-default',
-  components: { PanThumb },
-  data() {
-    return {
-      emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'avatar',
-      'roles'
-    ])
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.emptyGif {
-		display: block;
-		width: 45%;
-		margin: 0 auto;
-	}
-
-	.dashboard-editor-container {
-		background-color: #e3e3e3;
-		min-height: 100vh;
-		margin-top: -50px;
-		padding: 100px 60px 0px;
-		.pan-info-roles {
-			font-size: 12px;
-			font-weight: 700;
-			color: #333;
-			display: block;
-		}
-		.info-container {
-			position: relative;
-			margin-left: 190px;
-			height: 150px;
-			line-height: 200px;
-			.display_name {
-				font-size: 48px;
-				line-height: 48px;
-				color: #212121;
-				position: absolute;
-				top: 25px;
-			}
-		}
-	}
-</style>

src/views/dashboard/editor/index.vue

@@ -1,100 +1,32 @@
 <template>
-	<div class="dashboard-editor-container">
+  <div class="dashboard-editor-container">
-		<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
+    <div class=" clearfix">
-			<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
+      <pan-thumb style="float: left" :image="avatar"> 你的权限:
-			  aria-hidden="true">
+        <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
-				<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      </pan-thumb>
-				<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"
+      <github></github>
-				  fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <div class="info-container">
-				<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        <span class="display_name">{{name}}</span>
-				  fill="currentColor" class="octo-body"></path>
+        <span style='font-size:20px;padding-top:20px;display:inline-block;'>普通编辑dashboard</span>
-			</svg>
+      </div>
-		</a>
+    </div>
-		<el-row class="btn-group">
+    <div>
-			<el-col :span="4" class='text-center'>
+      <img class='emptyGif' :src="emptyGif">
-				<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
+    </div>
-			</el-col>
+  </div>
-			<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>
-
-		<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">
-						<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo>
-						<span class="info-item-text">文章</span>
-						<icon-svg icon-class="a" class="dashboard-editor-icon"></icon-svg>
-					</div>
-					<div class="info-item">
-						<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo>
-						<span class="info-item-text">浏览量</span>
-						<icon-svg icon-class="b" class="dashboard-editor-icon"></icon-svg>
-					</div>
-				</el-card>
-			</el-col>
-
-			<el-col :span="8">
-				<pie-chart></pie-chart>
-			</el-col>
-
-			<el-col :span="10">
-				<bar-chart></bar-chart>
-			</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>
-
-	</div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import panThumb from 'components/PanThumb'
+import PanThumb from '@/components/PanThumb'
-import pieChart from './pieChart'
+import Github from '@/components/Github'
-import barChart from './barChart'
-import lineChart from './lineChart'
-import countTo from 'vue-count-to'
-import todoList from 'components/TodoList'
 
 export default {
   name: 'dashboard-editor',
-  components: { panThumb, countTo, pieChart, lineChart, barChart, todoList },
+  components: { PanThumb, Github },
   data() {
     return {
-      statisticsData: {
+      emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
-        article_count: 1024,
-        comment_count: 102400,
-        latest_article: [],
-        month_article_count: 28,
-        pageviews_count: 1024
-      }
     }
   },
   computed: {
@@ -108,35 +40,35 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-editor-container {
+	.emptyGif {
-    margin: 30px;
+		display: block;
-    .btn-group {
+		width: 45%;
-        margin-bottom: 60px;
+		margin: 0 auto;
-    }
+	}
-    .box-card-header {
+
-        position: relative;
+	.dashboard-editor-container {
-        height: 160px;
+		background-color: #e3e3e3;
-    }
+		min-height: 100vh;
-    .panThumb {
+		margin-top: -50px;
-        z-index: 100;
+		padding: 100px 60px 0px;
-        height: 150px;
+		.pan-info-roles {
-        width: 150px;
+			font-size: 12px;
-        position: absolute;
+			font-weight: 700;
-        left: 0px;
+			color: #333;
-        right: 0px;
+			display: block;
-        margin: auto;
+		}
-    }
+		.info-container {
-    .display_name{
+			position: relative;
-        font-size: 30px;
+			margin-left: 190px;
-        display: block;
+			height: 150px;
-    }
+			line-height: 200px;
-    .info-item{
+			.display_name {
-        display: inline-block;
+				font-size: 48px;
-        margin-top: 10px;
+				line-height: 48px;
-        font-size: 14px;
+				color: #212121;
-        &:last-of-type{
+				position: absolute;
-            margin-left: 15px;
+				top: 25px;
-        }
+			}
-    }
+		}
-}
+	}
 </style>

src/views/dashboard/index.vue

@@ -1,35 +1,33 @@
 <template>
   <div class="dashboard-container">
-    <component v-bind:is="currentRole"> </component>
+    <component :is="currentRole"></component>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import EditorDashboard from './editor/index'
+import adminDashboard from './admin/index'
-import DefaultDashboard from './default/index'
+import editorDashboard from './editor/index'
 
 export default {
   name: 'dashboard',
-  components: { EditorDashboard, DefaultDashboard },
+  components: { adminDashboard, editorDashboard },
   data() {
     return {
-      currentRole: 'EditorDashboard'
+      currentRole: 'adminDashboard'
     }
   },
   computed: {
     ...mapGetters([
-      'name',
-      'avatar',
-      'introduction',
       'roles'
     ])
   },
   created() {
+    console.log(this.roles)
     if (this.roles.indexOf('admin') >= 0) {
       return
     }
-    this.currentRole = 'DefaultDashboard'
+    this.currentRole = 'editorDashboard'
   }
 }
 </script>

src/views/errorPage/401.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import errGif from 'assets/401_images/401.gif'
+import errGif from '@/assets/401_images/401.gif'
 
 export default {
   data() {

src/views/example/form.vue

@@ -120,15 +120,15 @@
 </template>
 
 <script>
-import Tinymce from 'components/Tinymce'
+import Tinymce from '@/components/Tinymce'
-import Upload from 'components/Upload/singleImage3'
+import Upload from '@/components/Upload/singleImage3'
-import MDinput from 'components/MDinput'
+import MDinput from '@/components/MDinput'
 import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
 import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
-import Sticky from 'components/Sticky' // 粘性header组件
+import Sticky from '@/components/Sticky' // 粘性header组件
-import { validateURL } from 'utils/validate'
+import { validateURL } from '@/utils/validate'
-import { getArticle } from 'api/article'
+import { fetchArticle } from '@/api/article'
-import { userSearch } from 'api/remoteSearch'
+import { userSearch } from '@/api/remoteSearch'
 
 export default {
   name: 'articleDetail',
@@ -204,7 +204,7 @@ export default {
   },
   methods: {
     fetchData() {
-      getArticle().then(response => {
+      fetchArticle().then(response => {
         this.postForm = response.data
       }).catch(err => {
         this.fetchSuccess = false
@@ -259,6 +259,7 @@ export default {
   }
 }
 </script>
+
 <style rel="stylesheet/scss" lang="scss" scoped>
   @import "src/styles/mixin.scss";
   .title-prompt{

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

@@ -1,7 +1,8 @@
 <template>
   <el-table :data="list" border fit highlight-current-row style="width: 100%">
 
-    <el-table-column align="center" label="序号" width="65">
+    <el-table-column align="center" label="序号" width="65"  v-loading="loading"
+    element-loading-text="请给我点时间！">
       <template scope="scope">
         <span>{{scope.row.id}}</span>
       </template>
@@ -15,7 +16,7 @@
 
     <el-table-column min-width="300px" label="标题">
       <template scope="scope">
-        <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
+        <span>{{scope.row.title}}</span>
         <el-tag>{{scope.row.type}}</el-tag>
       </template>
     </el-table-column>
@@ -48,7 +49,7 @@
 </template>
 
 <script>
-import { fetchList } from 'api/article_table'
+import { fetchList } from '@/api/article'
 
 export default {
   props: {
@@ -65,7 +66,8 @@ export default {
         limit: 5,
         type: this.type,
         sort: '+id'
-      }
+      },
+      loading: false
     }
   },
   filters: {
@@ -83,9 +85,11 @@ export default {
   },
   methods: {
     getList() {
+      this.loading = true
       this.$emit('create') // for test
       fetchList(this.listQuery).then(response => {
         this.list = response.data.items
+        this.loading = false
       })
     }
   }

src/views/example/table/dragTable.vue

@@ -47,20 +47,20 @@
 
       <el-table-column align="center" label="拖拽" width="95">
         <template scope="scope">
-          <icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
+          <icon-svg class='drag-handler' icon-class="tuozhuai"></icon-svg>
         </template>
       </el-table-column>
 
     </el-table>
 
-    <div class='show-d'>默认顺序  &nbsp;  {{ olderList}}</div>
+    <div class='show-d'>默认顺序 &nbsp; {{ olderList}}</div>
     <div class='show-d'>拖拽后顺序{{newList}}</div>
 
   </div>
 </template>
 
 <script>
-import { fetchList } from 'api/article_table'
+import { fetchList } from '@/api/article'
 import Sortable from 'sortablejs'
 
 export default {
@@ -79,9 +79,6 @@ export default {
       newList: []
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -92,6 +89,9 @@ export default {
       return statusMap[status]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true
@@ -109,7 +109,6 @@ export default {
     setSort() {
       const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
       this.sortable = Sortable.create(el, {
-          // handle: '.drag-handler',
         onEnd: evt => {
           const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
           this.newList.splice(evt.newIndex, 0, tempIndex)
@@ -120,7 +119,7 @@ export default {
 }
 </script>
 
-<style >
+<style scoped>
 .drag-handler{
   width: 30px;
   height: 30px;

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

@@ -2,7 +2,7 @@
   <div class="app-container">
 
     <div class="filter-container">
-      <el-checkbox-group v-model="checkboxVal"	>
+      <el-checkbox-group v-model="checkboxVal">
         <el-checkbox label="apple">apple</el-checkbox>
         <el-checkbox label="banana">banana</el-checkbox>
         <el-checkbox label="orange">orange</el-checkbox>

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

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import fixedThead from './dynamictable/fixedThead'
+import fixedThead from './fixedThead'
-import unfixedThead from './dynamictable/unfixedThead'
+import unfixedThead from './unfixedThead'
 
 export default {
   components: { fixedThead, unfixedThead }

src/views/example/table/inlineEditTable.vue

@@ -42,8 +42,7 @@
 
       <el-table-column align="center" label="编辑" width="120">
         <template scope="scope">
-          <el-button v-show='!scope.row.edit' type="primary" @click='scope.row.edit=true' size="small" icon="edit">编辑</el-button>
+          <el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
-          <el-button v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="check">完成</el-button>
         </template>
       </el-table-column>
 
@@ -52,7 +51,7 @@
 </template>
 
 <script>
-import { fetchList } from 'api/article_table'
+import { fetchList } from '@/api/article'
 
 export default {
   name: 'inline_edit-table_demo',
@@ -66,9 +65,6 @@ export default {
       }
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -79,6 +75,9 @@ export default {
       return statusMap[status]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true

src/views/example/table/table.vue

@@ -25,7 +25,7 @@
       <el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
     </div>
 
-    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
 
       <el-table-column align="center" label="序号" width="65">
         <template scope="scope">
@@ -150,9 +150,9 @@
 </template>
 
 <script>
-import { fetchList, fetchPv } from 'api/article_table'
+import { fetchList, fetchPv } from '@/api/article'
 import waves from '@/directive/waves.js'// 水波纹指令
-import { parseTime } from 'utils'
+import { parseTime } from '@/utils'
 
 const calendarTypeOptions = [
       { key: 'CN', display_name: '中国' },
@@ -161,7 +161,7 @@ const calendarTypeOptions = [
       { key: 'EU', display_name: '欧元区' }
 ]
 
-  // arr to obj
+// arr to obj
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
   acc[cur.key] = cur.display_name
   return acc
@@ -210,9 +210,6 @@ export default {
       tableKey: 0
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -226,6 +223,9 @@ export default {
       return calendarTypeKeyValue[type]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true

src/views/excel/index.vue

@@ -12,17 +12,17 @@
           {{scope.row.title}}
         </template>
       </el-table-column>
-      <el-table-column label="作者" width="110">
+      <el-table-column label="作者" width="95" align="center">
         <template scope="scope">
-          <span>{{scope.row.author}}</span>
+          <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="阅读数" width="105" align="center">
+      <el-table-column label="阅读数" width="115" align="center">
         <template scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
-      <el-table-column align="center" prop="created_at" label="发布时间" width="200">
+      <el-table-column align="center" prop="created_at" label="发布时间" width="220">
         <template scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { getList } from 'api/article'
+import { fetchList } from '@/api/article'
 
 export default {
   data() {
@@ -49,8 +49,8 @@ export default {
   methods: {
     fetchData() {
       this.listLoading = true
-      getList().then(response => {
+      fetchList().then(response => {
-        this.list = response.data
+        this.list = response.data.items
         this.listLoading = false
       })
     },

src/views/excel/selectExcel.vue

@@ -14,17 +14,17 @@
           {{scope.row.title}}
         </template>
       </el-table-column>
-      <el-table-column label="作者" width="110">
+      <el-table-column label="作者" width="95" align="center">
         <template scope="scope">
-          <span>{{scope.row.author}}</span>
+          <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="阅读数" width="105" align="center">
+      <el-table-column label="阅读数" width="115" align="center">
         <template scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
-      <el-table-column align="center" prop="created_at" label="发布时间" width="200">
+      <el-table-column align="center" prop="created_at" label="发布时间" width="220">
         <template scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { getList } from 'api/article'
+import { fetchList } from '@/api/article'
 
 export default {
   data() {
@@ -52,8 +52,8 @@ export default {
   methods: {
     fetchData() {
       this.listLoading = true
-      getList(this.listQuery).then(response => {
+      fetchList(this.listQuery).then(response => {
-        this.list = response.data
+        this.list = response.data.items
         this.listLoading = false
       })
     },

src/views/login/index.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { isvalidUsername } from 'utils/validate'
+import { isvalidUsername } from '@/utils/validate'
 import socialSign from './socialsignin'
 
 export default {

src/views/login/socialsignin.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import openWindow from 'utils/openWindow'
+import openWindow from '@/utils/openWindow'
 
 export default {
   name: 'social-signin',

src/views/qiniu/upload.vue

@@ -7,8 +7,9 @@
 
 
 <script>
-import { getToken } from 'api/qiniu' // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
+import { getToken } from '@/api/qiniu'
-    // 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
+// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
+// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
 
 export default{
   data() {

src/views/theme/index.vue

@@ -44,7 +44,7 @@
 
 
 <script>
-import { toggleClass } from 'utils'
+import { toggleClass } from '@/utils'
 import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
 
 export default {