WebWork/frontend/js/main.js

// 首页通用JavaScript功能
// 主要处理导航栏交互、页面滚动效果等通用功能

class MainPage {
    constructor() {
        this.init();
    }

    init() {
        // 初始化所有功能
        this.initNavbar();
        this.initScrollEffects();
        this.initSmoothScroll();
        this.initBackToTop();
        this.initMobileMenu();
        this.initAuthButtons();
    }

    // 初始化导航栏交互
    initNavbar() {
        const navbar = document.querySelector('.navbar');
        if (!navbar) return;

        // 滚动时改变导航栏样式
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('navbar-scrolled');
            } else {
                navbar.classList.remove('navbar-scrolled');
            }
        });

        // 初始化当前页面高亮
        this.highlightCurrentPage();
    }

    // 高亮当前页面导航链接
    highlightCurrentPage() {
        const currentPath = window.location.pathname;
        const navLinks = document.querySelectorAll('.nav-link');
        
        navLinks.forEach(link => {
            const href = link.getAttribute('href');
            if (href && currentPath.includes(href.replace('.html', ''))) {
                link.classList.add('active');
            }
        });
    }

    // 初始化滚动效果
    initScrollEffects() {
        // 滚动时显示/隐藏元素
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in');
                }
            });
        }, observerOptions);

        // 观察需要动画的元素
        document.querySelectorAll('.feature-card, .hero-content').forEach(el => {
            observer.observe(el);
        });
    }

    // 初始化平滑滚动
    initSmoothScroll() {
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', (e) => {
                e.preventDefault();
                const targetId = anchor.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    }

    // 初始化返回顶部按钮
    initBackToTop() {
        const backToTopBtn = document.createElement('button');
        backToTopBtn.id = 'backToTop';
        backToTopBtn.innerHTML = '<i class="fas fa-chevron-up"></i>';
        backToTopBtn.title = '返回顶部';
        document.body.appendChild(backToTopBtn);

        // 滚动时显示/隐藏按钮
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.add('show');
            } else {
                backToTopBtn.classList.remove('show');
            }
        });

        // 点击返回顶部
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }

    // 初始化移动端菜单
    initMobileMenu() {
        const navbarToggler = document.querySelector('.navbar-toggler');
        const navbarCollapse = document.querySelector('.navbar-collapse');
        
        if (!navbarToggler || !navbarCollapse) return;

        navbarToggler.addEventListener('click', () => {
            navbarCollapse.classList.toggle('show');
        });

        // 点击菜单项后自动关闭移动菜单
        document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
            link.addEventListener('click', () => {
                if (navbarCollapse.classList.contains('show')) {
                    navbarCollapse.classList.remove('show');
                }
            });
        });
    }

    // 初始化认证按钮状态
    initAuthButtons() {
        // 检查用户是否已登录
        this.checkLoginStatus().then(user => {
            const loginBtn = document.getElementById('loginBtn');
            const registerBtn = document.getElementById('registerBtn');
            const heroLoginBtn = document.getElementById('heroLoginBtn');
            
            if (user) {
                // 用户已登录，显示仪表板按钮
                // 根据用户角色设置正确的仪表板路径
                let dashboardUrl = '/dashboard';
                if (user.role === 'student') {
                    dashboardUrl = '/frontend/html/student_dashboard.html';
                } else if (user.role === 'teacher') {
                    dashboardUrl = '/frontend/html/teacher_dashboard.html';
                } else if (user.role === 'admin') {
                    dashboardUrl = '/frontend/html/admin_dashboard.html';
                }
                
                if (loginBtn) {
                    loginBtn.textContent = '进入仪表板';
                    loginBtn.href = dashboardUrl;
                }
                if (heroLoginBtn) {
                    heroLoginBtn.textContent = '进入仪表板';
                    heroLoginBtn.href = dashboardUrl;
                }
                if (registerBtn) {
                    registerBtn.style.display = 'none';
                }
            }
        });
    }

    // 检查登录状态
    async checkLoginStatus() {
        try {
            const apiBase = window.location.protocol === 'file:' ? 'http://localhost:3000/api' : '/api';
            const response = await fetch(`${apiBase}/auth/me`);
            const data = await response.json();
            return data.success && data.user;
        } catch (error) {
            console.log('用户未登录');
            return false;
        }
    }

    // 显示通知
    showNotification(message, type = 'info') {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'}"></i>
                <span>${message}</span>
            </div>
        `;
        
        // 添加到页面
        document.body.appendChild(notification);
        
        // 显示通知
        setTimeout(() => {
            notification.classList.add('show');
        }, 10);
        
        // 自动隐藏
        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 3000);
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    new MainPage();
});