/** * User Authentication Status Management and Header UI Update Script * Determines login status based on access_token in localStorage * Logged in: Display user avatar * Not logged in: Display login button */ (function() { 'use strict'; // Configuration const CONFIG = { LOGIN_URL: '/login', // Login page URL }; // Get user information function getUserDetail() { // Try to get user info from localStorage const cachedUserDetail = localStorage.getItem('user_detail'); if (cachedUserDetail) { try { return JSON.parse(cachedUserDetail); } catch (e) { console.warn('Failed to parse cached user info'); } } return null; } // Check login status function isLoggedIn() { const userDetail = getUserDetail(); return userDetail && (userDetail.mail || userDetail.phone); } // Logout function logout() { // Clear token and user info localStorage.removeItem('access_token'); localStorage.removeItem('user_detail'); // Reload page window.location.reload(); } // Create login button function createLoginButton() { const loginButton = document.createElement('a'); loginButton.className = 'header-login-button'; loginButton.href = CONFIG.LOGIN_URL; loginButton.rel = 'noopener noreferrer'; loginButton.style.cssText = ` display: flex; align-items: center; padding: 6px 16px; color: #fff; background: #181E25; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: none; margin-left: 0; `; loginButton.innerHTML = ` 登录

`; // Hover effects loginButton.addEventListener('mouseenter', function() { this.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)'; this.style.opacity = '0.9'; }); loginButton.addEventListener('mouseleave', function() { this.style.boxShadow = '0 2px 8px rgba(102, 126, 234, 0.3)'; this.style.opacity = '1'; }); return loginButton; } // Create user avatar component function createUserAvatar() { const userContainer = document.createElement('div'); userContainer.className = 'header-user-avatar'; userContainer.style.cssText = ` display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 18px; border: 1px solid #fff; background: #e3ebfd; cursor: pointer; color: #0d44c5; text-align: center; font-size: 14px; font-weight: 500; position: relative; `; // Get user info (from localStorage or API) const userDetail = getUserDetail(); const userCenter = userDetail?.phone ? userDetail?.phone.charAt(0).toUpperCase() : userDetail?.mail?.charAt(0).toUpperCase(); // Create avatar userContainer.innerHTML = userCenter; let hideMenuTimer = null; // Hover effects - show menu on mouseenter userContainer.addEventListener('mouseenter', function(e) { e.stopPropagation(); // Clear any pending hide timer if (hideMenuTimer) { clearTimeout(hideMenuTimer); hideMenuTimer = null; } // showUserMenu(userContainer); }); // Hide menu on mouseleave (with delay to allow moving to menu) userContainer.addEventListener('mouseleave', function(e) { hideMenuTimer = setTimeout(() => { hideUserMenu(userContainer); }, 200); // 200ms delay to allow moving to menu }); // click userContainer.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); // 在新标签页中打开 /user-center/basic-information window.open('/user-center/basic-information', '_blank'); }); // Store the timer reference on the container for access from menu userContainer._hideMenuTimer = hideMenuTimer; return userContainer; } // Show user menu function showUserMenu(container) { // Check if menu already exists let menu = container.querySelector('.user-dropdown-menu'); if (menu) { // Menu already visible return; } // Create dropdown menu menu = document.createElement('div'); menu.className = 'user-dropdown-menu'; menu.style.cssText = ` position: absolute; top: calc(100% + 8px); right: 0; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); z-index: 1000; `; // Menu items const menuItems = [ { label: '退出登录', action: () => logout() }, ]; menuItems.forEach(item => { if (item.type === 'divider') { const divider = document.createElement('div'); divider.style.cssText = ` height: 1px; background: #e5e6eb; margin: 8px 12px; `; menu.appendChild(divider); } else { const menuItem = document.createElement('div'); menuItem.className = 'user-menu-item'; menuItem.innerHTML = `

${item.label}

` menuItem.style.cssText = ` display: flex; align-items: center; justify-content: space-between; min-width: 86px; cursor: pointer; font-size: 14px; border-radius: 4px; transition: background 0.2s; color: rgb(24 30 37); background: #fff; ${item.style || ''} `; menuItem.addEventListener('mouseenter', function() { this.style.color = '#1E59A6'; }); menuItem.addEventListener('mouseleave', function() { this.style.color = 'rgb(24 30 37)'; }); menuItem.addEventListener('click', function(e) { e.stopPropagation(); item.action(); hideUserMenu(container); }); menu.appendChild(menuItem); } }); // Keep menu visible when hovering over it menu.addEventListener('mouseenter', function() { // Clear any pending hide timer const avatarContainer = this.parentElement; if (avatarContainer && avatarContainer._hideMenuTimer) { clearTimeout(avatarContainer._hideMenuTimer); avatarContainer._hideMenuTimer = null; } }); // Hide menu when mouse leaves the menu menu.addEventListener('mouseleave', function() { hideUserMenu(container); }); // Position menu relative to container container.style.position = 'relative'; container.appendChild(menu); } // Hide user menu function hideUserMenu(container) { return; const menu = container.querySelector('.user-dropdown-menu'); if (menu) { menu.remove(); } } // Watch login state changes function watchLoginState() { window.addEventListener('storage', function(e) { if (e.key === 'access_token' || e.key === 'user_detail') { updateHeaderUI(); } }); // Also listen to custom events (for same-page updates) window.addEventListener('loginStateChange', function() { updateHeaderUI(); }); // Watch for window resize to handle mobile/desktop switch let resizeTimer; window.addEventListener('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { updateHeaderUI(); }, 250); // Debounce resize events }); } // Update Header UI function updateHeaderUI() { // Remove old components const oldButton = document.querySelector('.header-login-button'); const oldAvatar = document.querySelector('.header-user-avatar'); if (oldButton) oldButton.remove(); if (oldAvatar) oldAvatar.remove(); // Add new component addAuthComponentToHeader(); } // Check if current device is mobile function isMobileDevice() { // Method 1: Check viewport width const isMobileWidth = window.innerWidth <= 768; // Return true if either condition is met return isMobileWidth; } // Add auth component for mobile function addAuthComponentMobile() { const mobileSearchBar = document.getElementById('search-bar-entry-mobile'); if (!mobileSearchBar) { console.warn('Mobile search bar element not found, retrying...'); setTimeout(addAuthComponentToHeader, 500); return; } // Create appropriate component based on login status const authComponent = isLoggedIn() ? createUserAvatar() : createLoginButton(); // Insert before the mobile search bar mobileSearchBar.parentElement.insertBefore(authComponent, mobileSearchBar); console.log('Successfully added auth component to mobile header'); } // Add auth component for desktop function addAuthComponentDesktop() { const navLinkElement = document.querySelector('.navbar-link'); if (!navLinkElement) { console.warn('nav-link element not found, retrying...'); setTimeout(addAuthComponentToHeader, 500); return; } // Get parent element (usually part of header) const headerRightElement = navLinkElement.parentElement?.parentElement?.parentElement; if (!headerRightElement) { console.error('Header parent element not found'); return; } console.log('=== headerRightElement ===', headerRightElement); // Create appropriate component based on login status const authComponent = isLoggedIn() ? createUserAvatar() : createLoginButton(); // Add to header headerRightElement.appendChild(authComponent); console.log('Successfully added auth component to desktop header'); } // Main function: Add login/user component to Header function addAuthComponentToHeader() { if (isMobileDevice()) { console.log('=== isMobileDevice ==='); addAuthComponentMobile(); } else { console.log('=== isDesktopDevice ==='); addAuthComponentDesktop(); } } // Initialize function init() { // Wait for DOM to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { addAuthComponentToHeader(); watchLoginState(); }); } else { addAuthComponentToHeader(); watchLoginState(); } } // Execute initialization init(); // Expose methods for external use (optional) window.AuthHeaderManager = { refresh: updateHeaderUI, logout: logout, isLoggedIn: isLoggedIn }; })();

Coding Plan

在 AI 编程工具里使用 M2.1

MCP 使用指南

最佳实践

Page Not Found