Basix/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor

Browse source
This commit is contained in:
Pan 2017-08-28 13:12:44 +08:00 committed by 花裤衩
parent b98860ace1
commit f7aee3b5a3
50 changed files with 386 additions and 416 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

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

17
src/api/article.js
View file

@ -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 }
})
}

17
src/api/article_table.js
View file

@ -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 }
})
}

2
src/api/login.js
View file

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

2
src/api/qiniu.js
View file

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

2
src/api/remoteSearch.js
View file

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

13
src/components/Github/index.vue Normal file
View file

@ -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>

1
src/components/Screenfull/index.vue
View file

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

1
src/components/TodoList/index.vue
View file

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

2
src/components/Upload/singleImage.vue
View file

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

48
src/components/Upload/singleImage2.vue
View file

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

50
src/components/Upload/singleImage3.vue
View file

@ -26,52 +26,52 @@
</template>
<script>
// 预览效果见文章
import { getToken } from 'api/qiniu'
import { getToken } from '@/api/qiniu'
export default {
name: 'singleImageUpload',
props: {
value: String
name: 'singleImageUpload',
props: {
value: String
},
computed: {
imageUrl() {
return this.value
computed: {
imageUrl() {
return this.value
}
},
data() {
return {
tempUrl: '',
dataObj: { token: '', key: '' }
data() {
return {
tempUrl: '',
dataObj: { token: '', key: '' }
}
},
methods: {
rmImage() {
this.emitInput('')
methods: {
rmImage() {
this.emitInput('')
},
emitInput(val) {
this.$emit('input', val)
emitInput(val) {
this.$emit('input', val)
},
handleImageScucess(file) {
this.emitInput(file.files.file)
handleImageScucess(file) {
this.emitInput(file.files.file)
},
beforeUpload() {
const _self = this
beforeUpload() {
const _self = this
return new Promise((resolve, reject) => {
getToken().then(response => {
const key = response.data.qiniu_key
getToken().then(response => {
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>

2
src/main.js
View file

@ -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

39
src/mock/article.js
View file

@ -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',
title: '@ctitle(10, 20)',
'status|1': ['published', 'draft'],
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'],
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' },

44
src/mock/article_table.js
View file

@ -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 }]
})
}

6
src/mock/index.js
View file

@ -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)
// table example相关
Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList)
Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv)
Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
// 搜索相关
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)

2
src/mock/login.js
View file

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

2
src/mock/remoteSearch.js
View file

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

3
src/router/index.js
View file

@ -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' }
]
},

2
src/store/modules/permission.js
View file

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

4
src/store/modules/user.js
View file

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

2
src/views/charts/keyboard.vue
View file

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

2
src/views/charts/keyboard2.vue
View file

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

2
src/views/charts/line.vue
View file

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

2
src/views/charts/mixChart.vue
View file

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

12
src/views/components/dndList.vue
View file

@ -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 => {
this.list1 = response.data.splice(0, 5)
this.list2 = response.data
fetchList().then(response => {
this.list1 = response.data.items.splice(0, 5)
this.list2 = response.data.items
})
}
}

1
src/views/components/markdown.vue
View file

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

2
src/views/components/mixin.vue
View file

@ -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 },

2
src/views/components/tinymce.vue
View file

@ -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>

0
src/views/dashboard/editor/barChart.vue → src/views/dashboard/admin/barChart.vue
View file

131
src/views/dashboard/admin/index.vue Normal file
View file

@ -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>

4
src/views/dashboard/editor/lineChart.vue → src/views/dashboard/admin/lineChart.vue
View file

@ -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)
},

0
src/views/dashboard/editor/pieChart.vue → src/views/dashboard/admin/pieChart.vue
View file

82
src/views/dashboard/default/index.vue
View file

@ -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>

168
src/views/dashboard/editor/index.vue
View file

@ -1,100 +1,32 @@
<template>
<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">
<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>
<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">
<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>
<div class="dashboard-editor-container">
<div class=" clearfix">
<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>
<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'
import pieChart from './pieChart'
import barChart from './barChart'
import lineChart from './lineChart'
import countTo from 'vue-count-to'
import todoList from 'components/TodoList'
import PanThumb from '@/components/PanThumb'
import Github from '@/components/Github'
export default {
name: 'dashboard-editor',
components: { panThumb, countTo, pieChart, lineChart, barChart, todoList },
components: { PanThumb, Github },
data() {
return {
statisticsData: {
article_count: 1024,
comment_count: 102400,
latest_article: [],
month_article_count: 28,
pageviews_count: 1024
}
emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
}
},
computed: {
@ -108,35 +40,35 @@ export default {
</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;
}
}
}
.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>

16
src/views/dashboard/index.vue
View file

@ -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 DefaultDashboard from './default/index'
import adminDashboard from './admin/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>

2
src/views/errorPage/401.vue
View file

@ -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() {

17
src/views/example/form.vue
View file

@ -120,15 +120,15 @@
</template>
<script>
import Tinymce from 'components/Tinymce'
import Upload from 'components/Upload/singleImage3'
import MDinput from 'components/MDinput'
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/singleImage3'
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 { validateURL } from 'utils/validate'
import { getArticle } from 'api/article'
import { userSearch } from 'api/remoteSearch'
import Sticky from '@/components/Sticky' // 粘性header组件
import { validateURL } from '@/utils/validate'
import { fetchArticle } from '@/api/article'
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{

12
src/views/example/tab/components/tabPane.vue
View file

@ -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
})
}
}

15
src/views/example/table/dragTable.vue
View file

@ -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;

2
src/views/example/table/dynamictable/fixedThead.vue
View file

@ -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>

4
src/views/example/table/dynamictable.vue → src/views/example/table/dynamictable/index.vue
View file

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

11
src/views/example/table/inlineEditTable.vue
View file

@ -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 v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="check">完成</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>
</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

14
src/views/example/table/table.vue
View file

@ -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

14
src/views/excel/index.vue
View file

@ -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 => {
this.list = response.data
fetchList().then(response => {
this.list = response.data.items
this.listLoading = false
})
},

14
src/views/excel/selectExcel.vue
View file

@ -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 => {
this.list = response.data
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.listLoading = false
})
},

2
src/views/login/index.vue
View file

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

2
src/views/login/socialsignin.vue
View file

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

5
src/views/qiniu/upload.vue
View file

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

2
src/views/theme/index.vue
View file

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