AnimationManager/client/js/navigation.js

// 导航栏交互逻辑

(function () {
  // 检查是否已登录
  function isLoggedIn() {
    const userAvatarContainer = document.getElementById('userAvatarContainer');
    // 如果用户头像容器显示，说明已登录
    if (userAvatarContainer) {
      const computedStyle = window.getComputedStyle(userAvatarContainer);
      return computedStyle.display !== 'none';
    }
    return false;
  }

  // 导航切换功能
  function initNavigation() {
    const navButtons = document.querySelectorAll('.nav-btn');
    
    navButtons.forEach(button => {
      button.addEventListener('click', function() {
        const page = this.getAttribute('data-page');
        
        // 如果点击"我的资产"且未登录，显示登录界面
        if (page === 'assets' && !isLoggedIn()) {
          // 恢复按钮状态
          navButtons.forEach(btn => btn.classList.remove('active'));
          const storeBtn = document.querySelector('.nav-btn[data-page="store"]');
          if (storeBtn) {
            storeBtn.classList.add('active');
          }
          
          // 显示登录界面
          if (window.parent !== window) {
            window.parent.postMessage({
              type: 'navigation',
              page: 'login'
            }, '*');
          }
          return;
        }
        
        // 更新按钮状态
        navButtons.forEach(btn => btn.classList.remove('active'));
        this.classList.add('active');
        
        // 通知父窗口切换页面
        if (window.parent !== window) {
          window.parent.postMessage({
            type: 'navigation',
            page: page
          }, '*');
        }
      });
    });

    // 登录按钮功能
    const loginBtn = document.querySelector('.login-btn');
    if (loginBtn) {
      loginBtn.addEventListener('click', function() {
        // console.log('[1-Navigation] 登录按钮点击');
        if (window.parent !== window) {
          window.parent.postMessage({
            type: 'navigation',
            page: 'login'
          }, '*');
        }
      });
    }

    // 注册按钮功能
    const registerBtn = document.querySelector('.register-btn');
    if (registerBtn) {
      registerBtn.addEventListener('click', function() {
        // console.log('[1-Navigation] 注册按钮点击');
        if (window.parent !== window) {
          window.parent.postMessage({
            type: 'navigation',
            page: 'register'
          }, '*');
        }
      });
    }

    // 用户头像点击功能
    const userAvatarContainer = document.getElementById('userAvatarContainer');
    const userAvatar = document.getElementById('userAvatar');
    
    function handleAvatarClick() {
      if (window.parent !== window) {
        window.parent.postMessage({
          type: 'navigation',
          page: 'profile'
        }, '*');
      }
    }
    
    if (userAvatarContainer) {
      userAvatarContainer.addEventListener('click', handleAvatarClick);
      userAvatarContainer.style.cursor = 'pointer';
    }
    
    if (userAvatar) {
      userAvatar.addEventListener('click', handleAvatarClick);
      userAvatar.style.cursor = 'pointer';
    }
  }

  // 更新用户头像显示
  function updateUserAvatar(userInfo) {
    const authButtons = document.getElementById('authButtons');
    const userAvatarContainer = document.getElementById('userAvatarContainer');
    const userAvatar = document.getElementById('userAvatar');
    
    if (userInfo) {
      // 有用户信息，说明已登录 - 显示用户头像，隐藏登录/注册按钮
      if (authButtons) {
        authButtons.style.display = 'none';
      }
      if (userAvatarContainer) {
        userAvatarContainer.style.display = 'flex';
      }
      if (userAvatar) {
        // 如果头像URL是相对路径，需要转换为完整URL
        let avatarUrl = userInfo.avatar;
        if (avatarUrl && !avatarUrl.startsWith('http') && !avatarUrl.startsWith('data:')) {
          // 如果是相对路径，添加服务器地址前缀
          avatarUrl = 'http://localhost:3000' + (avatarUrl.startsWith('/') ? avatarUrl : '/' + avatarUrl);
        }
        userAvatar.src = avatarUrl || '../../static/default-avatar.png';
        userAvatar.alt = userInfo.username || '用户头像';
      }
    } else {
      // 没有用户信息，说明未登录 - 隐藏用户头像，显示登录/注册按钮
      if (authButtons) {
        authButtons.style.display = 'flex';
      }
      if (userAvatarContainer) {
        userAvatarContainer.style.display = 'none';
      }
    }
  }

  // 接收来自父窗口的消息，同步导航状态
  window.addEventListener('message', function(event) {
    // 安全检查：确保消息来自同源
    if (event.origin !== window.location.origin) {
      return;
    }
    
    const data = event.data;
    
    // 处理页面切换消息（只处理store和assets，不处理login/register）
    if (data.type === 'navigation' && data.page && (data.page === 'store' || data.page === 'assets')) {
      const navButtons = document.querySelectorAll('.nav-btn');
      navButtons.forEach(btn => {
        if (btn.getAttribute('data-page') === data.page) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }
    
    // 处理登录成功消息
    if (data.type === 'login-success' && data.user) {
      updateUserAvatar(data.user);
    }
    
    // 处理登出消息
    if (data.type === 'logout') {
      updateUserAvatar(null);
    }
  });

  // 检查并恢复登录状态
  function checkAndRestoreLogin() {
    try {
      const loginDataStr = localStorage.getItem('loginData');
      if (!loginDataStr) {
        return;
      }
      
      const loginData = JSON.parse(loginDataStr);
      const now = Date.now();
      
      // 检查是否过期
      if (now >= loginData.expireTime) {
        // 已过期，清除登录信息
        localStorage.removeItem('loginData');
        console.log('[Navigation] 登录信息已过期，已清除');
        return;
      }
      
      // 未过期，恢复登录状态
      if (loginData.user) {
        console.log('[Navigation] 恢复登录状态，用户:', loginData.user.username);
        updateUserAvatar(loginData.user);
      }
    } catch (error) {
      console.error('[Navigation] 恢复登录状态失败:', error);
      localStorage.removeItem('loginData');
    }
  }

  // 页面加载完成后初始化
  window.addEventListener('DOMContentLoaded', function() {
    // 先检查并恢复登录状态
    checkAndRestoreLogin();
    
    initNavigation();
  });
})();