Compare commits

...

10 Commits

Author SHA1 Message Date
Pan
f5563b4eed [release] 3.3.0 2017-12-13 18:35:38 +08:00
Pan
0c80fba84c doc: update readme 2017-12-13 18:35:07 +08:00
Pan
4d3bbae183 perf[tags-view]:refine the style && format code 2017-12-13 18:33:12 +08:00
leij1ang
b6d97f1806 feat[tags-view]: tags-view add contextmenu (#343)
* add the menu by right-clicking the tags

* bug fixed

* refine
2017-12-13 17:43:03 +08:00
Pan
a68413cb8f refactor[errorLog]: save the logs in vuex 2017-12-13 13:52:14 +08:00
Pan
f9aaaa9091 perf[errorLog]:optimized error-log 2017-12-12 18:14:31 +08:00
Pan
85492f148f fix[scrollPane&&scrollBar]:fixed scroll bug in Firefox 2017-12-12 13:28:33 +08:00
Pan
b7ca786751 perf[chore]:set travis notifications:false 2017-12-11 14:20:23 +08:00
花裤衩
c32bd73b42 Update README.md 2017-12-11 14:06:14 +08:00
Pan
3aacd3cccd add[chore]:add travis 2017-12-11 13:59:49 +08:00
18 changed files with 316 additions and 167 deletions

5
.travis.yml Executable file
View File

@@ -0,0 +1,5 @@
language: node_js
node_js: stable
script: npm run test
notifications:
email: false

View File

@@ -6,6 +6,7 @@
[![vue](https://img.shields.io/badge/vue-2.5.9-brightgreen.svg)](https://github.com/vuejs/vue)
[![element-ui](https://img.shields.io/badge/element--ui-2.0.7-brightgreen.svg)](https://github.com/ElemeFE/element)
[![Build Status](https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master)](https://travis-ci.org/PanJiaChen/vue-element-admin)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
@@ -61,7 +62,7 @@
- 动态面包屑
- 国际化多语言
- 多种动态换肤
- 快捷导航(标签页)
- 快捷导航(标签页 支持右键操作)
- 富文本编辑器
- Markdown编辑器
- JSON编辑器

View File

@@ -1,6 +1,6 @@
{
"name": "vue-element-admin",
"version": "3.2.0",
"version": "3.3.0",
"description": "A Vue.js admin",
"author": "Pan <panfree23@gmail.com>",
"license": "MIT",
@@ -10,7 +10,8 @@
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
"build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true npm_config_report=true node build/build.js",
"lint": "eslint --ext .js,.vue src"
"lint": "eslint --ext .js,.vue src",
"test": "npm run lint"
},
"dependencies": {
"axios": "0.17.1",

View File

@@ -1,56 +0,0 @@
<template>
<div>
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
<el-button size="small" type="primary">
<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
<path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
p-id="1864"></path>
</svg>
</el-button>
</el-badge>
<el-dialog title="bug日志" :visible.sync="dialogTableVisible">
<el-table :data="logsList">
<el-table-column label="message">
<template slot-scope="scope">
<div>msg:{{ scope.row.err.message }}</div>
<br/>
<div>url: {{scope.row.url}}</div>
</template>
</el-table-column>
<el-table-column label="stack">
<template slot-scope="scope">
{{ scope.row.err.stack}}
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'errLog',
props: {
logsList: {
type: Array
}
},
data() {
return {
dialogTableVisible: false
}
}
}
</script>
<style scoped>
.bug-svg {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

View File

@@ -0,0 +1,77 @@
<template>
<div>
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
<el-button size="small" type="danger" class="bug-btn">
<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
<path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
p-id="1864"></path>
</svg>
</el-button>
</el-badge>
<el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
<el-table :data="logsList" border>
<el-table-column label="Message">
<template slot-scope="scope">
<div>
<span class="message-title">Msg:</span>
<el-tag type="danger">{{ scope.row.err.message }}</el-tag>
</div>
<br/>
<div>
<span class="message-title" style="padding-right: 10px;">Info: </span>
<el-tag type="warning">{{scope.row.vm.$vnode.tag}} error in {{scope.row.info}}</el-tag>
</div>
<br/>
<div>
<span class="message-title" style="padding-right: 16px;">Url: </span>
<el-tag type="success">{{scope.row.url}}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="Stack">
<template slot-scope="scope">
{{ scope.row.err.stack}}
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'errorLog',
props: {
logsList: {
type: Array
}
},
data() {
return {
dialogTableVisible: false
}
}
}
</script>
<style scoped>
.bug-btn.el-button--small {
padding: 9px 10px;
}
.bug-svg {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.message-title {
font-size: 16px;
color: #333;
font-weight: bold;
padding-right: 8px;
}
</style>

View File

@@ -1,5 +1,5 @@
<template>
<div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
<div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
<div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
<slot></slot>
</div>
@@ -8,6 +8,7 @@
<script>
const delta = 15
export default {
name: 'scrollBar',
data() {
@@ -17,19 +18,19 @@ export default {
},
methods: {
handleScroll(e) {
e.preventDefault()
const eventDelta = e.wheelDelta || -e.deltaY * 3
const $container = this.$refs.scrollContainer
const $containerHeight = $container.offsetHeight
const $wrapper = this.$refs.scrollWrapper
const $wrapperHeight = $wrapper.offsetHeight
if (e.wheelDelta > 0) {
this.top = Math.min(0, this.top + e.wheelDelta)
if (eventDelta > 0) {
this.top = Math.min(0, this.top + eventDelta)
} else {
if ($containerHeight - delta < $wrapperHeight) {
if (this.top < -($wrapperHeight - $containerHeight + delta)) {
this.top = this.top
} else {
this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
}
} else {
this.top = 0

View File

@@ -1,5 +1,5 @@
<template>
<div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
<div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
<div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
<slot></slot>
</div>
@@ -18,20 +18,20 @@ export default {
},
methods: {
handleScroll(e) {
e.preventDefault()
const eventDelta = e.wheelDelta || -e.deltaY * 3
const $container = this.$refs.scrollContainer
const $containerWidth = $container.offsetWidth
const $wrapper = this.$refs.scrollWrapper
const $wrapperWidth = $wrapper.offsetWidth
if (e.wheelDelta > 0) {
this.left = Math.min(0, this.left + e.wheelDelta)
if (eventDelta > 0) {
this.left = Math.min(0, this.left + eventDelta)
} else {
if ($containerWidth - padding < $wrapperWidth) {
if (this.left < -($wrapperWidth - $containerWidth + padding)) {
this.left = this.left
} else {
this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - padding)
this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
}
} else {
this.left = 0
@@ -64,6 +64,7 @@ export default {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
.scroll-wrapper {
position: absolute;
}

View File

@@ -1,14 +1,17 @@
import Vue from 'vue'
import errLog from '@/store/errLog'
import store from './store'
// 生产环境错误日志
if (process.env.NODE_ENV === 'production') {
Vue.config.errorHandler = function(err, vm) {
console.log(err, window.location.href)
errLog.pushLog({
// you can set only in production env show the error-log
// if (process.env.NODE_ENV === 'production') {
Vue.config.errorHandler = function(err, vm, info, a) {
Vue.nextTick(() => {
store.dispatch('addErrorLog', {
err,
url: window.location.href,
vm
vm,
info,
url: window.location.href
})
}
console.error(err, info)
})
}
// }

View File

@@ -1,13 +0,0 @@
const errLog = {
state: {
errLog: []
},
pushLog(log) {
this.state.errLog.unshift(log)
},
clearLog() {
this.state.errLog = []
}
}
export default errLog

View File

@@ -11,6 +11,7 @@ const getters = {
roles: state => state.user.roles,
setting: state => state.user.setting,
permission_routers: state => state.permission.routers,
addRouters: state => state.permission.addRouters
addRouters: state => state.permission.addRouters,
errorLogs: state => state.errorLog.logs
}
export default getters

View File

@@ -1,6 +1,7 @@
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import errorLog from './modules/errorLog'
import permission from './modules/permission'
import tagsView from './modules/tagsView'
import user from './modules/user'
@@ -11,6 +12,7 @@ Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
errorLog,
permission,
tagsView,
user

View File

@@ -0,0 +1,17 @@
const errorLog = {
state: {
logs: []
},
mutations: {
ADD_ERROR_LOG: (state, log) => {
state.logs.push(log)
}
},
actions: {
addErrorLog({ commit }, log) {
commit('ADD_ERROR_LOG', log)
}
}
}
export default errorLog

View File

@@ -29,6 +29,25 @@ const tagsView = {
break
}
}
},
DEL_OTHERS_VIEWS: (state, view) => {
for (const [i, v] of state.visitedViews.entries()) {
if (v.path === view.path) {
state.visitedViews = state.visitedViews.slice(i, i + 1)
break
}
}
for (const i of state.cachedViews) {
if (i === view.name) {
const index = state.cachedViews.indexOf(i)
state.cachedViews = state.cachedViews.slice(index, i + 1)
break
}
}
},
DEL_ALL_VIEWS: (state) => {
state.visitedViews = []
state.cachedViews = []
}
},
actions: {
@@ -40,6 +59,18 @@ const tagsView = {
commit('DEL_VISITED_VIEWS', view)
resolve([...state.visitedViews])
})
},
delOthersViews({ commit, state }, view) {
return new Promise((resolve) => {
commit('DEL_OTHERS_VIEWS', view)
resolve([...state.visitedViews])
})
},
delAllViews({ commit, state }) {
return new Promise((resolve) => {
commit('DEL_ALL_VIEWS')
resolve([...state.visitedViews])
})
}
}
}

View File

@@ -5,3 +5,9 @@
<!--error code-->
</div>
</template>
<script>
export default {
name: 'errorTestA'
}
</script>

View File

@@ -0,0 +1,11 @@
<template>
<div></div>
</template>
<script>
export default {
created() {
this.b = b // eslint-disable-line
}
}
</script>

View File

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

View File

@@ -5,8 +5,7 @@
<breadcrumb class="breadcrumb-container"></breadcrumb>
<div class="right-menu">
<error-log v-if="log.length>0" class="errLog-container right-menu-item" :logsList="log"></error-log>
<error-log v-if="errorLogs.length>0" class="errLog-container right-menu-item" :logsList="errorLogs"></error-log>
<el-tooltip effect="dark" content="全屏" placement="bottom">
<screenfull class="screenfull right-menu-item"></screenfull>
@@ -57,8 +56,7 @@ import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import ThemePicker from '@/components/ThemePicker'
import Screenfull from '@/components/Screenfull'
import ErrorLog from '@/components/ErrLog'
import errLogStore from 'store/errLog'
import ErrorLog from '@/components/ErrorLog'
export default {
components: {
@@ -68,17 +66,13 @@ export default {
ErrorLog,
Screenfull
},
data() {
return {
log: errLogStore.state.errLog
}
},
computed: {
...mapGetters([
'sidebar',
'name',
'avatar',
'language'
'language',
'errorLogs'
])
},
methods: {

View File

@@ -1,10 +1,17 @@
<template>
<scroll-pane class='tags-view-container' ref='scrollPane'>
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
{{generateTitle(tag.title)}}
<span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
</router-link>
</scroll-pane>
<div class="tags-view-container">
<scroll-pane class='tags-view-wrapper' ref='scrollPane'>
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
{{generateTitle(tag.title)}}
<span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
</router-link>
</scroll-pane>
<ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
<li @click="closeSelectedTag(selectedTag)">Close</li>
<li @click="closeOthersTags">Close Others</li>
<li @click="closeAllTags">Close All</li>
</ul>
</div>
</template>
<script>
@@ -13,35 +20,46 @@ import { generateTitle } from '@/utils/i18n'
export default {
components: { ScrollPane },
data() {
return {
visible: false,
top: 0,
left: 0,
selectedTag: {}
}
},
computed: {
visitedViews() {
return this.$store.state.tagsView.visitedViews
}
},
watch: {
$route() {
this.addViewTags()
this.moveToCurrentTag()
},
visible(value) {
if (value) {
window.addEventListener('click', this.closeMenu)
} else {
window.removeEventListener('click', this.closeMenu)
}
}
},
mounted() {
this.addViewTags()
},
methods: {
generateTitle,
closeViewTags(view, $event) {
this.$store.dispatch('delVisitedViews', view).then((views) => {
if (this.isActive(view)) {
const latestView = views.slice(-1)[0]
if (latestView) {
this.$router.push(latestView.path)
} else {
this.$router.push('/')
}
}
})
$event.preventDefault()
},
generateTitle, // generateTitle by vue-i18n
generateRoute() {
if (this.$route.name) {
return this.$route
}
return false
},
isActive(route) {
return route.path === this.$route.path || route.name === this.$route.name
},
addViewTags() {
const route = this.generateRoute()
if (!route) {
@@ -49,9 +67,6 @@ export default {
}
this.$store.dispatch('addVisitedViews', route)
},
isActive(route) {
return route.path === this.$route.path || route.name === this.$route.name
},
moveToCurrentTag() {
const tags = this.$refs.tag
this.$nextTick(() => {
@@ -62,12 +77,35 @@ export default {
}
}
})
}
},
watch: {
$route() {
this.addViewTags()
this.moveToCurrentTag()
},
closeSelectedTag(view) {
this.$store.dispatch('delVisitedViews', view).then((views) => {
if (this.isActive(view)) {
const latestView = views.slice(-1)[0]
if (latestView) {
this.$router.push(latestView.path)
} else {
this.$router.push('/')
}
}
})
},
closeOthersTags() {
this.$router.push(this.selectedTag.path)
this.$store.dispatch('delOthersViews', this.selectedTag)
},
closeAllTags() {
this.$store.dispatch('delAllViews')
this.$router.push('/')
},
openMenu(tag, e) {
this.visible = true
this.selectedTag = tag
this.left = e.clientX
this.top = e.clientY
},
closeMenu() {
this.visible = false
}
}
}
@@ -75,38 +113,61 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.tags-view-container {
background: #fff;
height: 34px;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-item {
display: inline-block;
position: relative;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
.tags-view-wrapper {
background: #fff;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 15px;
height: 34px;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-item {
display: inline-block;
position: relative;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 15px;
}
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: '';
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
}
}
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: '';
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
.contextmenu {
margin: 0;
background: #fff;
z-index: 2;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
@@ -114,7 +175,8 @@ export default {
</style>
<style rel="stylesheet/scss" lang="scss">
.tags-view-container {
//reset element css of el-icon-close
.tags-view-wrapper {
.tags-view-item {
.el-icon-close {
width: 16px;