This commit is contained in:
254
src/layouts/components/VabAvatar/index.vue
Normal file
254
src/layouts/components/VabAvatar/index.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<el-dropdown @command="handleCommand" trigger="click">
|
||||
<div class="avatar-container">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" alt="用户头像" class="user-avatar" />
|
||||
</div>
|
||||
<!-- <div class="user-info">
|
||||
<div class="username">{{ username }}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<el-dropdown-menu slot="dropdown" class="custom-dropdown">
|
||||
<div class="dropdown-header">
|
||||
<img :src="avatar" alt="用户头像" class="header-avatar" />
|
||||
<div class="header-info">
|
||||
<div class="header-username">{{ username }}</div>
|
||||
<div class="header-email">admin@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-dropdown-item command="personalCenter" class="dropdown-item">
|
||||
<i class="el-icon-user-solid"></i>
|
||||
<span>个人中心</span>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item command="settings" class="dropdown-item">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>系统设置</span>
|
||||
</el-dropdown-item> -->
|
||||
|
||||
<!-- <el-divider></el-divider> -->
|
||||
|
||||
<!-- <el-dropdown-item command="github" class="dropdown-item">
|
||||
<i class="el-icon-link"></i>
|
||||
<span>GitHub 地址</span>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item command="gitee" class="dropdown-item">
|
||||
<i class="el-icon-link"></i>
|
||||
<span>码云地址</span>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item command="pro" class="dropdown-item">
|
||||
<i class="el-icon-link"></i>
|
||||
<span>Admin Pro 地址</span>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item command="plus" class="dropdown-item">
|
||||
<i class="el-icon-link"></i>
|
||||
<span>Admin Plus 地址</span>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item command="shop" class="dropdown-item">
|
||||
<i class="el-icon-link"></i>
|
||||
<span>Shop Vite 地址</span>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item command="job" class="dropdown-item">
|
||||
<i class="el-icon-link"></i>
|
||||
<span>好工作就业参考网</span>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-divider></el-divider> -->
|
||||
|
||||
<el-dropdown-item command="logout" class="dropdown-item logout-item">
|
||||
<i class="el-icon-switch-button"></i>
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { recordRoute } from '@/config'
|
||||
|
||||
export default {
|
||||
name: 'VabAvatar',
|
||||
computed: {
|
||||
...mapGetters({
|
||||
avatar: 'user/avatar',
|
||||
username: 'user/username',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
handleCommand(command) {
|
||||
switch (command) {
|
||||
case 'logout':
|
||||
this.logout()
|
||||
break
|
||||
case 'personalCenter':
|
||||
this.personalCenter()
|
||||
break
|
||||
case 'settings':
|
||||
this.settings()
|
||||
break
|
||||
case 'github':
|
||||
window.open('https://github.com/zxwk1998/vue-admin-better')
|
||||
break
|
||||
case 'gitee':
|
||||
window.open('https://gitee.com/chu1204505056/vue-admin-better')
|
||||
break
|
||||
case 'pro':
|
||||
window.open('https://vuejs-core.cn/admin-pro/')
|
||||
break
|
||||
case 'plus':
|
||||
window.open('https://vuejs-core.cn/admin-plus/')
|
||||
break
|
||||
case 'shop':
|
||||
window.open('https://vuejs-core.cn/shop-vite/')
|
||||
break
|
||||
case 'job':
|
||||
window.open('https://job.vuejs-core.cn/')
|
||||
break
|
||||
}
|
||||
},
|
||||
personalCenter() {
|
||||
this.$router.push('/personalCenter/personalCenter')
|
||||
},
|
||||
settings() {
|
||||
this.$message.info('系统设置功能开发中...')
|
||||
},
|
||||
logout() {
|
||||
this.$baseConfirm('您确定要退出' + this.$baseTitle + '吗?', null, async () => {
|
||||
await this.$store.dispatch('user/logout')
|
||||
if (recordRoute) {
|
||||
const fullPath = this.$route.fullPath
|
||||
this.$router.push(`/login?redirect=${fullPath}`)
|
||||
} else {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
width: 37.5px;
|
||||
height: 37.5px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
margin-left: 8px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-dropdown {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 0;
|
||||
min-width: 220px;
|
||||
|
||||
.dropdown-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
|
||||
border-radius: 12px 12px 0 0;
|
||||
color: white;
|
||||
|
||||
.header-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
margin-right: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
|
||||
.header-username {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.header-email {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
border-radius: 0;
|
||||
|
||||
i {
|
||||
margin-right: 12px;
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.logout-item {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user