You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.8 KiB
108 lines
3.8 KiB
<template>
|
|
<nav class="navbar">
|
|
<hamburger :is-active="!sidebarCollapse" @click="clickHamburger"/>
|
|
|
|
<breadcrumb v-if="showBreadcrumb"/>
|
|
|
|
<div class="right-menu">
|
|
<search id="header-search" class="right-menu-item hidden-xs"/>
|
|
|
|
<bell class="right-menu-item"/>
|
|
|
|
<div class="setting-btn right-menu-item hidden-xs" @click="settingDrawer=true">
|
|
<i class="el-icon-s-operation navbar-icon" title="个性设置"/>
|
|
</div>
|
|
|
|
<el-dropdown
|
|
class="avatar-container right-menu-item"
|
|
trigger="click"
|
|
@visible-change="$emit('menu-show',$event)"
|
|
>
|
|
<div class="avatar-wrapper">
|
|
<el-avatar :size="30" :src="avatar" icon="el-icon-user-solid"/>
|
|
<span class="hidden-xs">{{name}}</span>
|
|
</div>
|
|
<el-dropdown-menu class="user-dropdown" slot="dropdown">
|
|
<router-link to="/user/index">
|
|
<el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
|
|
</router-link>
|
|
<el-dropdown-item class="hidden-xs" icon="el-icon-guide" @click.native="()=>$guide(0,guideSteps)">
|
|
新手指引
|
|
</el-dropdown-item>
|
|
<router-link v-if="showSystemMonitor" to="/system/monitor">
|
|
<el-dropdown-item icon="el-icon-monitor">系统监控</el-dropdown-item>
|
|
</router-link>
|
|
<router-link v-if="showSystemResource" to="/system/resource">
|
|
<el-dropdown-item icon="el-icon-setting">接口设置</el-dropdown-item>
|
|
</router-link>
|
|
<el-dropdown-item divided icon="el-icon-switch-button" @click.native="logout">
|
|
退出登录
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
|
|
<setting-drawer v-model="settingDrawer"/>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import Hamburger from './components/Hamburger'
|
|
import Breadcrumb from './components/Breadcrumb'
|
|
import Search from './components/HeaderSearch'
|
|
import Bell from "./components/Bell"
|
|
import SettingDrawer from './components/SettingDrawer'
|
|
import {mapState} from 'vuex'
|
|
import GuideMixin from '@/mixins/guide'
|
|
import {auth} from "@/utils/auth"
|
|
import {elConfirm} from "@/utils/message"
|
|
|
|
export default {
|
|
name: 'navbar',
|
|
|
|
mixins: [GuideMixin.navbar],
|
|
|
|
components: {Hamburger, Breadcrumb, Search, Bell, SettingDrawer},
|
|
|
|
data() {
|
|
return {
|
|
settingDrawer: false
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapState('user', {
|
|
avatar: state => state.avatar,
|
|
name: state => state.name,
|
|
prepare_logout: state => state.prepare_logout
|
|
}),
|
|
|
|
...mapState('setting', {
|
|
sidebarCollapse: state => state.sidebarCollapse,
|
|
showBreadcrumb: state => state.showBreadcrumb
|
|
}),
|
|
|
|
showSystemMonitor() {
|
|
return auth('/system/monitor')
|
|
},
|
|
|
|
showSystemResource() {
|
|
return auth('/system/resource')
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
clickHamburger() {
|
|
this.$store.commit('setting/sidebarCollapse', !this.sidebarCollapse)
|
|
},
|
|
|
|
logout() {
|
|
if (this.prepare_logout) return
|
|
elConfirm('确认退出?')
|
|
.then(() => this.$store.dispatch('user/logout'))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" src="./style.scss"></style>
|
|
|