​

<!-- ========== 用户头像下拉模块：完整 HTML + CSS + JS ========== -->
<style>
.user-header-wrap {
    position: fixed;
    /* 右上角，垂直居中，距离顶部16px，距离右侧16px */
    top: 16px;
    right: 16px;
    z-index: 999;
}
.user-trigger-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding:4px 8px 4px 4px;
    background: #ffffff;
    border:1px solid #E5E7EB;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.24s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.user-trigger-btn:hover {
    border-color:#165DFF;
    box-shadow: 0 2px 8px rgba(22,93,255,0.15);
}
.avatar-img {
    width:36px;
    height:36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #E5E7EB;
}
.username-text {
    
    color:#1D2939;
    max-width: 100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.arrow-icon {
    
    color:#667085;
    transition: transform 0.24s ease;
}
.arrow-icon.open {
    transform: rotate(180deg);
}


.user-dropdown-panel {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:280px;
    background:#ffffff;
    border-radius:14px;
    border:1px solid #E5E7EB;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow:hidden;
    transform-origin: top right;
    transform: scale(0.96);
    opacity:0;
    pointer-events:none;
    transition: 0.22s ease;
}
.user-dropdown-panel.show {
    transform: scale(1);
    opacity:1;
    pointer-events:auto;
}


.dropdown-user-header {
    padding:16px;
    background: linear-gradient(135deg,#F0F7FF,#FFFFFF);
    border-bottom:1px solid #E5E7EB;
}
.header-top-row {
    display:flex;
    align-items:center;
    gap:14px;
}
.panel-avatar {
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid #D0D5DD;
}
.user-info-block {
    flex:1;
}
.panel-user-name {
    font-size:15px;
    font-weight:600;
    color:#101828;
    margin-bottom:4px;
}
.user-level-tag {
    display:inline-block;
    font-size:11px;
    padding:2px 7px;
    border-radius: 4px;
}
.level-free {
    background:#F2F4F7;
    color:#475467;
}
.level-vip {
    background:#FFF2E5;
    color:#D96600;
}
.level-premium {
    background:#E8F3FF;
    color:#165DFF;
}
.user-account-email {
    margin-top:8px;
    
    color:#667085;
    overflow:hidden;
    text-overflow:ellipsis;
}


.dropdown-menu-list {
    padding:8px 0;
}
.menu-item {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    
    color:#344054;
    cursor:pointer;
    transition:0.2s;
}
.menu-item:hover {
    background:#F7F9FC;
    color:#165DFF;
}
.divider-line {
    height:1px;
    background:#E5E7EB;
    margin:6px 0;
}
.logout-item {
    color:#D92D20;
}
.logout-item:hover {
    background:#FEF3F2;
    color:#D92D20;
}
</style>


<!-- HTML DOM -->
<div class="user-header-wrap">
    <div class="user-trigger-btn" id="userTrigger">
        <img class="avatar-img" src="https://api.dicebear.com/7.x/avataaars/svg?seed=user001" alt="avatar">
        <span class="username-text">黄大新</span>
        <span class="arrow-icon" id="arrow">▼</span>
    </div>
    <div class="user-dropdown-panel" id="userDropdown">
        <div class="dropdown-user-header">
            <div class="header-top-row">
                <img class="panel-avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=user001" alt="avatar">
                <div class="user-info-block">
                    <div class="panel-user-name">黄大新</div>
                    <span class="user-level-tag level-vip">VIP会员</span>
                </div>
            </div>
            <div class="user-account-email">huangdaxin@example.com</div>
        </div>
        <div class="dropdown-menu-list">
            <div class="menu-item">
                <span>👤</span>
                <span>个人资料</span>
            </div>
            <div class="menu-item">
                <span>⚙️</span>
                <span>账号设置</span>
            </div>
            <div class="menu-item">
                <span>⭐</span>
                <span>会员中心</span>
            </div>
            <div class="menu-item">
                <span>📜</span>
                <span>使用记录</span>
            </div>
            <div class="divider-line"></div>
            <div class="menu-item logout-item">
                <span>🚪</span>
                <span>退出登录</span>
            </div>
        </div>
    </div>
</div>


<!-- JS交互 -->
<script>
const userTrigger = document.getElementById('userTrigger');
const userDropdown = document.getElementById('userDropdown');
const arrow = document.getElementById('arrow');


userTrigger.addEventListener('click',(e)=>{
    e.stopPropagation();
    userDropdown.classList.toggle('show');
    arrow.classList.toggle('open');
})


document.addEventListener('click',()=>{
    userDropdown.classList.remove('show');
    arrow.classList.remove('open');
})
userDropdown.addEventListener('click',e=>e.stopPropagation());
</script>