File size: 2,089 Bytes
77b0e0f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<script lang="ts" setup>
import { Fold, Expand } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { isCollapse } from '@/utils/navbar'
import BreadCrumb from '@/components/BreadCrumb.vue'
import { getUserInfoRequest, type UserInfo } from '@/api/user'
import { ElMessage } from 'element-plus'
import { AxiosError } from 'axios'
const userInfoItem = ref({} as UserInfo)
onMounted(async () => {
try {
const { data } = await getUserInfoRequest()
if (data.code === 0) {
userInfoItem.value = data.data
} else {
ElMessage.error('获取用户信息失败: ' + data.message)
}
} catch (error: unknown) {
if (error instanceof AxiosError) {
ElMessage.error('获取用户信息失败: ' + error.message)
} else {
ElMessage.error('未知错误：' + error)
}
}
})
</script>
<template>
<el-header>
<!-- 菜单折叠图标 -->
<el-icon @click="isCollapse = !isCollapse">
<Fold v-show="isCollapse" />
<Expand v-show="!isCollapse" />
</el-icon>
<!-- 导航栏左侧 -->
<!-- 面包屑 -->
<BreadCrumb />
<!-- <div> -->
<!-- 导航栏右边 -->
<!-- 退出登录 -->
<el-dropdown trigger="click">
<el-avatar :src="userInfoItem.avatar" />
<template #dropdown>
<el-dropdown-menu class="logout">
<el-dropdown-item>{{ userInfoItem.username }}</el-dropdown-item>
<el-dropdown-item>用户配置</el-dropdown-item>
<el-dropdown-item>
<!-- <el-dropdown-item @click="logout"> -->
<!-- <IconifyIconOffline :icon="LogoutCircleRLine" style="margin: 5px" /> -->
退出系统
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-header>
</template>
<style lang="scss" scoped>
.el-header {
display: flex; // 水平显示
align-items: center;
background-color: #ffffff; // 背景颜色
.el-icon {
margin-right: 15px; // 折叠按钮右边预留空隙
}
}
.el-dropdown {
margin-left: auto; //让头像往右边靠
}
</style>
|