|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta name="description" content="用户头像和登录状态组件">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.user-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--spacing-sm);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
transition: background-color var(--transition-base);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-container:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-avatar {
|
|
|
|
|
width: 32px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
border: 2px solid rgba(255, 255, 255, 0.8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-name {
|
|
|
|
|
font-size: var(--font-size-md);
|
|
|
|
|
font-weight: var(--font-weight-medium);
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div v-if="user && user.name">
|
|
|
|
|
<v-dropdown :items="dropdownItems" @command="handleCommand">
|
|
|
|
|
<div class="user-container">
|
|
|
|
|
<img :src="user.icon" class="user-avatar" alt="用户头像">
|
|
|
|
|
<span class="user-name">{{ user.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</v-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<v-btn size="sm" variant="ghost" :click="() => $router.push('/login')" style="color: inherit; border-color: currentColor;">
|
|
|
|
|
登录
|
|
|
|
|
</v-btn>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script setup>
|
|
|
|
|
user = $env.$vbase.user;
|
|
|
|
|
dropdownItems = [
|
|
|
|
|
{ label: "个人中心", value: "profile" },
|
|
|
|
|
{ label: "退出登录", value: "logout", divided: true }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
handleCommand = (val) => {
|
|
|
|
|
if (val === 'profile') {
|
|
|
|
|
$router.push('/profile');
|
|
|
|
|
} else if (val === 'logout') {
|
|
|
|
|
$env.$vbase.logout();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
