<template>
|
<el-header class="app-header">
|
<span class="header-title">{{ title }}</span>
|
<div class="header-right">
|
<span class="header-user">
|
<i class="el-icon-user"></i> {{ username }}
|
</span>
|
<el-button type="text" class="header-logout" @click="logout">
|
<i class="el-icon-switch-button"></i> 退出登录
|
</el-button>
|
</div>
|
</el-header>
|
</template>
|
|
<script>
|
export default {
|
name: 'AppHeader',
|
props: {
|
title: { type: String, required: true }
|
},
|
computed: {
|
username() {
|
return sessionStorage.getItem('username') || 'admin'
|
}
|
},
|
methods: {
|
logout() {
|
this.$confirm('确定退出登录吗？', '提示', {
|
confirmButtonText: '退出',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
sessionStorage.removeItem('token')
|
sessionStorage.removeItem('username')
|
sessionStorage.removeItem('realName')
|
sessionStorage.removeItem('modules')
|
this.$message.success('已退出登录')
|
this.$router.push('/login')
|
}).catch(() => {})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-header {
|
background: #409EFF;
|
color: #fff;
|
line-height: 60px;
|
font-size: 18px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 20px;
|
flex-shrink: 0;
|
}
|
.header-right {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
font-size: 14px;
|
line-height: normal;
|
}
|
.header-user { opacity: 0.92; }
|
.header-logout { color: #fff; font-size: 14px; padding: 0; }
|
.header-logout:hover { color: #ffd04b; }
|
</style>
|
