对接后端
This commit is contained in:
parent
e1ae060551
commit
7a4e1e39b8
|
@ -7,13 +7,14 @@
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<template v-if="userStore.userInfo">
|
<template v-if="userStore.userInfo">
|
||||||
<!-- 已登录状态 -->
|
<!-- 已登录状态 -->
|
||||||
<el-dropdown @command="handleCommand">
|
<el-dropdown trigger="click" @command="handleCommand">
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<el-avatar
|
<el-avatar
|
||||||
:size="32"
|
:size="32"
|
||||||
:src="userStore.userInfo.avatar || defaultAvatar"
|
:src="userStore.userInfo.avatar || defaultAvatar"
|
||||||
/>
|
/>
|
||||||
<span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
|
<span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
|
||||||
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
|
@ -50,8 +51,8 @@
|
||||||
import { onMounted } from 'vue'
|
import { onMounted } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { useUserStore } from '@/stores/user'
|
import { useUserStore } from '@/stores/user'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { User, Setting, SwitchButton } from '@element-plus/icons-vue'
|
import { User, Setting, SwitchButton, ArrowDown } from '@element-plus/icons-vue'
|
||||||
import defaultAvatar from '@/assets/default-avatar.png'
|
import defaultAvatar from '@/assets/default-avatar.png'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
@ -76,9 +77,18 @@ const handleCommand = async (command: string) => {
|
||||||
router.push('/settings')
|
router.push('/settings')
|
||||||
break
|
break
|
||||||
case 'logout':
|
case 'logout':
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定要退出登录吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
userStore.clearUserInfo()
|
userStore.clearUserInfo()
|
||||||
ElMessage.success('退出登录成功')
|
ElMessage.success('退出登录成功')
|
||||||
router.push('/login')
|
router.push('/login')
|
||||||
|
} catch {
|
||||||
|
// 用户取消操作
|
||||||
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -141,4 +151,15 @@ const handleCommand = async (command: string) => {
|
||||||
.el-icon {
|
.el-icon {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 添加下拉箭头样式 */
|
||||||
|
.el-icon--right {
|
||||||
|
margin-left: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dropdown:hover .el-icon--right {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue