class UserInfo extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
this.addEventListeners();
this.checkLoginStatus();
}
render() {
this.shadowRoot.innerHTML = `
用户信息加载中...
用户名
`;
}
addEventListeners() {
const userDropdown = this.shadowRoot.querySelector('.user-dropdown');
const userDropdownToggle = this.shadowRoot.querySelector('.user-dropdown-toggle');
// 点击切换下拉菜单
userDropdownToggle.addEventListener('click', (e) => {
e.stopPropagation();
userDropdown.classList.toggle('active');
});
// 点击其他地方关闭下拉菜单
document.addEventListener('click', () => {
userDropdown.classList.remove('active');
});
// 处理下拉菜单项点击
const dropdownItems = this.shadowRoot.querySelectorAll('.dropdown-item');
dropdownItems.forEach(item => {
item.addEventListener('click', (e) => {
e.stopPropagation();
const action = item.getAttribute('data-action');
this.handleDropdownAction(action);
userDropdown.classList.remove('active');
});
});
}
handleDropdownAction(action) {
switch(action) {
case 'profile':
this.dispatchEvent(new CustomEvent('menu-action', {
detail: { action: 'profile' },
bubbles: true,
composed: true
}));
break;
case 'users':
this.dispatchEvent(new CustomEvent('menu-action', {
detail: { action: 'users' },
bubbles: true,
composed: true
}));
break;
case 'logout':
this.logout();
break;
}
}
async checkLoginStatus() {
try {
const response = await fetch('/api/check-auth', {
credentials: 'include'
});
const result = await response.json();
if (result.success) {
// 只存储非敏感的用户信息
localStorage.setItem('userInfo', JSON.stringify({
username: result.user.username,
access_level: result.user.access_level,
full_name: result.user.full_name,
phone: result.user.phone,
email: result.user.email,
department: result.user.department,
position: result.user.position
}));
this.updateUserInfo(result.user);
} else {
document.getElementById('authContainer').style.display = 'block';
document.getElementById('mainContainer').style.display = 'none';
}
} catch (error) {
console.error('获取用户信息失败:', error);
document.getElementById('authContainer').style.display = 'block';
document.getElementById('mainContainer').style.display = 'none';
}
}
updateUserInfo(userInfo) {
// 设置用户名
this.shadowRoot.getElementById('userName').textContent = userInfo.username;
// 设置用户等级图标和tooltip信息
const userLevelIcon = this.shadowRoot.getElementById('userLevelIcon');
const userTooltip = this.shadowRoot.getElementById('userTooltip');
const accessLevel = parseInt(userInfo.access_level);
let levelName = '';
switch(accessLevel) {
case 1:
userLevelIcon.src = 'assets/icons/png/user.png';
userLevelIcon.alt = '普通用户';
levelName = '普通用户';
break;
case 2:
userLevelIcon.src = 'assets/icons/png/dvlp.png';
userLevelIcon.alt = '开发者';
levelName = '开发者';
break;
case 3:
userLevelIcon.src = 'assets/icons/png/master.png';
userLevelIcon.alt = '组长';
levelName = '组长';
break;
case 4:
userLevelIcon.src = 'assets/icons/png/admin.png';
userLevelIcon.alt = '管理员';
levelName = '管理员';
break;
default:
userLevelIcon.src = 'assets/icons/png/guest.png';
userLevelIcon.alt = '访客';
levelName = '访客';
}
// 构建HTML内容
const tooltipContent = `
用户名：${userInfo.username}
真实姓名：${userInfo.full_name || '未设置'}
权限级别：${levelName}
所属部门：${userInfo.department || '未设置'}
职位：${userInfo.position || '未设置'}
电子邮箱：${userInfo.email || '未设置'}
联系电话：${userInfo.phone || '未设置'}
`;
userTooltip.innerHTML = tooltipContent;
// 控制用户管理选项的显示
const userManagementItem = this.shadowRoot.querySelector('.admin-only');
if (userManagementItem) {
userManagementItem.style.display = accessLevel >= 3 ? 'flex' : 'none';
}
}
async logout() {
try {
const response = await fetch('/api/logout', {
method: 'POST',
credentials: 'include'
});
if (response.ok) {
// 清除本地存储的用户信息
localStorage.removeItem('userInfo');
// 获取认证容器和主容器
const authContainer = document.getElementById('authContainer');
const mainContainer = document.getElementById('mainContainer');
// 先隐藏主容器
mainContainer.classList.remove('visible');
// 等待过渡效果完成
setTimeout(() => {
mainContainer.style.display = 'none';
// 显示认证容器
authContainer.style.display = 'block';
// 等待一帧以确保display:block生效
requestAnimationFrame(() => {
authContainer.classList.add('visible');
// 重置认证组件
const authComponent = document.querySelector('auth-component');
if (authComponent) {
authComponent.reset();
}
});
}, 300);
} else {
console.error('登出失败');
}
} catch (error) {
console.error('登出错误:', error);
}
}
}
customElements.define('user-info', UserInfo); 
个人中心
用户管理
退出登录