159 lines
3.5 KiB
Vue
159 lines
3.5 KiB
Vue
<template>
|
|
<div class="topbar">
|
|
<div class="left">
|
|
<router-link to="/" class="logo">智慧养老平台</router-link>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<template v-if="userStore.userInfo">
|
|
<el-dropdown trigger="click">
|
|
<div class="user-info">
|
|
<el-avatar
|
|
:size="32"
|
|
:src="userStore.userInfo.avatar || defaultAvatar"
|
|
/>
|
|
<span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
|
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="handleProfile">
|
|
<el-icon><User /></el-icon>
|
|
个人中心
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click="handleSettings">
|
|
<el-icon><Setting /></el-icon>
|
|
设置
|
|
</el-dropdown-item>
|
|
<el-dropdown-item divided @click="handleLogout">
|
|
<el-icon><SwitchButton /></el-icon>
|
|
退出登录
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
<template v-else>
|
|
<router-link to="/login" class="login-btn">
|
|
<el-button type="primary">登录</el-button>
|
|
</router-link>
|
|
<router-link to="/register" class="register-btn">
|
|
<el-button>注册</el-button>
|
|
</router-link>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { User, Setting, SwitchButton, ArrowDown } from '@element-plus/icons-vue'
|
|
import defaultAvatar from '@/assets/default-avatar.png'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
onMounted(async () => {
|
|
const token = localStorage.getItem('token')
|
|
if (token && !userStore.userInfo) {
|
|
userStore.setToken(token)
|
|
await userStore.getUserInfo()
|
|
}
|
|
})
|
|
|
|
const handleProfile = () => {
|
|
router.push('/profile')
|
|
}
|
|
|
|
const handleSettings = () => {
|
|
router.push('/settings')
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
userStore.clearUserInfo()
|
|
ElMessage.success('退出登录成功')
|
|
router.push('/login')
|
|
} catch {
|
|
// 用户取消操作
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
height: 60px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.logo {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.user-info:hover {
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.nickname {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.login-btn,
|
|
.register-btn {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.el-dropdown-menu__item {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.el-icon {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.el-icon--right {
|
|
margin-left: 4px;
|
|
font-size: 12px;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.user-info:hover .el-icon--right {
|
|
transform: rotate(180deg);
|
|
}
|
|
</style>
|