mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
1.6 KiB
HTML
93 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="description" content="用户头像和登录状态组件">
|
|
</head>
|
|
|
|
<style>
|
|
.header-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 8px 12px;
|
|
border-radius: 20px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.header-user:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 2px solid #f8f9fa;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.user-name:hover {
|
|
color: #1e88e5;
|
|
}
|
|
|
|
.auth-btn {
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.login-btn {
|
|
background: #1e88e5;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
background: #1565c0;
|
|
}
|
|
|
|
.logout-btn {
|
|
background: transparent;
|
|
color: #f44336;
|
|
border: 1px solid #f44336;
|
|
}
|
|
|
|
.logout-btn:hover {
|
|
background: rgba(244, 67, 54, 0.1);
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div class="header-user ml-auto" v-if="user.name">
|
|
<img :src="user.icon" class="user-avatar" alt="用户头像">
|
|
<a href='/profile' class="user-name">{{ user.name }}</a>
|
|
<button @click="token.logout($env.root)" class="auth-btn logout-btn">
|
|
退出
|
|
</button>
|
|
</div>
|
|
<div class="header-user" v-else>
|
|
<a href="/login" class="auth-btn login-btn">
|
|
登录
|
|
</a>
|
|
</div>
|
|
</body>
|
|
|
|
<script setup>
|
|
import token from 'token'
|
|
user = token.body() || {}
|
|
</script>
|
|
|
|
</html>
|