// 公共头部组件渲染函数
function renderCommonHeader(currentPath) {
return `
`;
}
// 用户菜单渲染函数
function renderUserMenu(isLoggedIn, userInfo) {
if (isLoggedIn && userInfo) {
const defaultAvatar = '/static/avatar/default.png';
const avatarSrc = localStorage.getItem('user_avatar') || userInfo.avatar || defaultAvatar;
const nickname = localStorage.getItem('user_nickname') || userInfo.nickname || '用户';
return `
`;
} else {
return `
登录
`;
}
}
// 公共底部渲染函数
function renderCommonFooter() {
return `
`;
}
// 初始化公共组件
function initCommonComponents() {
const userMenuContainer = document.getElementById('userMenuContainer');
if (!userMenuContainer) return;
const userInfo = UserStore.get();
// 兼容：如果 UserStore 没有 token 但 localStorage 有 user_token，自动同步
let isLoggedIn = userInfo && userInfo.token;
if (!isLoggedIn && localStorage.getItem('user_token')) {
const token = localStorage.getItem('user_token');
const nickname = localStorage.getItem('user_nickname') || '用户';
const avatar = localStorage.getItem('user_avatar') || '/static/avatar/default.png';
UserStore.set({ token, nickname, avatar });
isLoggedIn = true;
}
userMenuContainer.innerHTML = renderUserMenu(isLoggedIn, isLoggedIn ? UserStore.get() : null);
// 渲染移动端用户菜单
const mobileUserMenu = document.getElementById('mobileUserMenu');
if (mobileUserMenu) {
mobileUserMenu.innerHTML = renderMobileUserMenu(isLoggedIn, isLoggedIn ? UserStore.get() : null);
}
if (isLoggedIn) {
const logoutBtn = document.getElementById('logoutBtn');
if (logoutBtn) {
logoutBtn.addEventListener('click', function(e) {
e.preventDefault();
fetch('/api/web/logout', { method: 'POST' }).finally(() => {
Auth.logout();
window.location.href = '/';
});
});
}
const mobileLogoutBtn = document.getElementById('mobileLogoutBtn');
if (mobileLogoutBtn) {
mobileLogoutBtn.addEventListener('click', function(e) {
e.preventDefault();
fetch('/api/web/logout', { method: 'POST' }).finally(() => {
Auth.logout();
window.location.href = '/';
});
});
}
const trigger = document.querySelector('.user-dropdown-trigger');
const menu = document.querySelector('.user-dropdown-menu');
if (trigger && menu) {
trigger.addEventListener('click', function() {
menu.style.opacity = menu.style.opacity === '1' ? '0' : '1';
menu.style.visibility = menu.style.visibility === 'visible' ? 'hidden' : 'visible';
menu.style.transform = menu.style.transform === 'translateY(0)' ? 'translateY(-8px)' : 'translateY(0)';
});
document.addEventListener('click', function(e) {
if (!trigger.contains(e.target) && !menu.contains(e.target)) {
menu.style.opacity = '0';
menu.style.visibility = 'hidden';
menu.style.transform = 'translateY(-8px)';
}
});
}
}
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('mouseenter', function() {
this.style.background = '#f1f5f9';
this.style.color = SITE_CONFIG.brand.primaryColor;
});
link.addEventListener('mouseleave', function() {
if (!this.classList.contains('active')) {
this.style.background = 'transparent';
this.style.color = '#475569';
}
});
});
// 移动端菜单交互
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileDropdownMenu = document.getElementById('mobileDropdownMenu');
const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
function closeMobileMenu() {
mobileDropdownMenu.style.display = 'none';
mobileMenuOverlay.style.display = 'none';
mobileMenuBtn.classList.remove('active');
document.body.style.overflow = '';
}
function openMobileMenu() {
mobileDropdownMenu.style.display = 'block';
mobileMenuOverlay.style.display = 'block';
mobileMenuBtn.classList.add('active');
document.body.style.overflow = 'hidden';
}
if (mobileMenuBtn && mobileDropdownMenu && mobileMenuOverlay) {
mobileMenuBtn.addEventListener('click', function(e) {
e.stopPropagation();
const isOpen = mobileDropdownMenu.style.display === 'block';
if (isOpen) {
closeMobileMenu();
} else {
openMobileMenu();
}
});
// 点击遮罩层关闭菜单
mobileMenuOverlay.addEventListener('click', closeMobileMenu);
// 点击菜单链接时关闭菜单
const mobileNavItems = document.querySelectorAll('.mobile-nav-item');
mobileNavItems.forEach(link => {
link.addEventListener('click', closeMobileMenu);
});
// 点击移动端用户菜单链接时关闭菜单
const mobileUserLinks = mobileUserMenu.querySelectorAll('a');
mobileUserLinks.forEach(link => {
link.addEventListener('click', closeMobileMenu);
});
}
}
// 移动端用户菜单渲染函数
function renderMobileUserMenu(isLoggedIn, userInfo) {
if (isLoggedIn && userInfo) {
const nickname = localStorage.getItem('user_nickname') || userInfo.nickname || '用户';
return `
`;
} else {
return `
`;
}
}
function navigateTo(url) {
window.location.href = url;
}