<template>
|
<div class="avue-top">
|
<div class="top-bar__left">
|
<div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
|
v-if="setting.collapse && !isHorizontal">
|
<i class="icon-navicon" @click="setCollapse"></i>
|
</div>
|
</div>
|
<div class="top-bar__title">
|
<!--<top-menu ref="topMenu" v-if="setting.menu"></top-menu>-->
|
<top-search class="top-bar__item" v-if="setting.search"></top-search>
|
</div>
|
<div class="top-bar__right">
|
<div class="icon-box">
|
<top-lock v-if="setting.lock"/>
|
<top-qna />
|
<top-full v-if="setting.fullscreen" title="全屏"/>
|
<img class="gateway" @click="jumpMH" src="@/assets/images/mh.png" alt="进入门户" title="进入门户" width="20" height="20">
|
</div>
|
<div class="top-user">
|
<img class="top-bar__img" :src="userInfo.avatar " alt=""/>
|
|
<el-dropdown>
|
<span class="el-dropdown-link">
|
{{ userInfo.real_name }}
|
<el-icon class="el-icon--right">
|
<arrow-down />
|
</el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<!-- <el-dropdown-item>
|
<router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
|
</el-dropdown-item>-->
|
<el-dropdown-item>
|
<router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
|
</el-dropdown-item>
|
<el-dropdown-item @click="logout" divided>{{ $t('navbar.logOut') }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<top-setting></top-setting>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import topLock from './top-lock.vue'
|
import topMenu from './top-menu.vue'
|
import topSearch from './top-search.vue'
|
import topTheme from './top-theme.vue'
|
import topLogs from './top-logs.vue'
|
import topColor from './top-color.vue'
|
import topLang from './top-lang.vue'
|
import topFull from './top-full.vue'
|
import topQna from './top-qna.vue'
|
import topSetting from '../setting.vue'
|
|
export default {
|
components: {
|
topLock,
|
topMenu,
|
topSearch,
|
topTheme,
|
topLogs,
|
topColor,
|
topLang,
|
topFull,
|
topQna,
|
topSetting,
|
},
|
name: 'top',
|
data () {
|
return {}
|
},
|
filters: {},
|
created () { },
|
computed: {
|
...mapGetters([
|
'setting',
|
'userInfo',
|
'tagWel',
|
'bsTagList',
|
'isCollapse',
|
'tag',
|
'logsLen',
|
'logsFlag',
|
'isHorizontal',
|
]),
|
},
|
methods: {
|
setCollapse () {
|
this.$store.commit('SET_COLLAPSE')
|
},
|
logout () {
|
this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
|
confirmButtonText: this.$t('submitText'),
|
cancelButtonText: this.$t('cancelText'),
|
type: 'warning',
|
}).then(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
const env = import.meta.env.VITE_APP_ENV
|
const adminUrl = import.meta.env.VITE_APP_DASHBOARD_URL
|
env === 'development' ? this.$router.push({ path: '/login' }):window.location.replace(`${adminUrl}#/login`)
|
})
|
})
|
},
|
jumpMH () {
|
const adminUrl = import.meta.env.VITE_APP_DASHBOARD_URL
|
window.location.href = `${adminUrl}#/gatewayPage`
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.avue-top {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 15px;
|
height: 50px;
|
background-color: #fff;
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
}
|
|
.top-bar__left {
|
flex: 0 0 auto;
|
}
|
|
.top-bar__title {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
height: pxToVh(80);
|
}
|
|
.top-bar__right {
|
flex: 0 0 auto;
|
display: flex !important;
|
align-items: center;
|
height: 100%;
|
|
.icon-box{
|
display: flex;
|
align-items: center;
|
gap: 0 20px;
|
.gateway{
|
width: 25px;
|
height: 25px;
|
}
|
>*{
|
cursor: pointer;
|
}
|
}
|
}
|
|
.top-bar__item {
|
margin-right: 15px;
|
display: inline-block !important;
|
}
|
|
.top-user {
|
display: flex;
|
align-items: center;
|
}
|
|
.top-bar__img {
|
width: 32px;
|
height: 32px;
|
border-radius: 50%;
|
margin-right: 10px;
|
}
|
|
.el-dropdown-link {
|
cursor: pointer;
|
color: #606266;
|
}
|
|
.el-dropdown-link:hover {
|
color: #409EFF;
|
}
|
</style>
|
