AnimationManager/admin/js/index.js

// 全局 Loading 控制器
window.GlobalLoading = (function() {
  let overlay = null;
  let loadingText = null;
  
  function init() {
    overlay = document.getElementById('globalLoadingOverlay');
    loadingText = overlay ? overlay.querySelector('.global-loading-text') : null;
  }
  
  function show(text = '正在处理...') {
    // console.log('[GlobalLoading] show() 被调用');
    // console.log('[GlobalLoading]   文本:', text);
    
    if (!overlay) {
      // console.log('[GlobalLoading] → 初始化overlay元素...');
      init();
    }
    
    if (!overlay) {
      // console.error('[GlobalLoading] ✗ overlay元素未找到！');
      return;
    }
    
    // console.log('[GlobalLoading] ✓ overlay元素存在');
    
    if (loadingText) {
      loadingText.textContent = text;
      // console.log('[GlobalLoading] ✓ 设置Loading文本:', text);
    }
    
    overlay.classList.add('is-visible');
    // console.log('[GlobalLoading] ✓ 添加is-visible类，Loading应该可见了');
  }
  
  function hide() {
    // console.log('[GlobalLoading] hide() 被调用');
    
    if (!overlay) {
      // console.error('[GlobalLoading] ✗ overlay元素不存在');
      return;
    }
    
    overlay.classList.remove('is-visible');
    // console.log('[GlobalLoading] ✓ 移除is-visible类，Loading已隐藏');
  }
  
  return {
    show,
    hide
  };
})();

// 全局 Alert 控制器
window.GlobalAlert = (function() {
  let alertContainer = null;
  let alertMessage = null;
  let hideTimer = null;
  
  function init() {
    alertContainer = document.getElementById('globalAlert');
    alertMessage = alertContainer ? alertContainer.querySelector('#alertMessage') : null;
  }
  
  function show(text, duration = 1500) {
    console.log('[GlobalAlert] show() 被调用:', { text, duration });
    
    if (!alertContainer) {
      console.log('[GlobalAlert] 初始化 alertContainer');
      init();
    }
    
    if (!alertContainer) {
      console.error('[GlobalAlert] alertContainer 未找到！');
      return;
    }
    
    if (!alertMessage) {
      console.error('[GlobalAlert] alertMessage 未找到！');
      return;
    }
    
    console.log('[GlobalAlert] 设置消息:', text);
    
    // 清除之前的自动隐藏定时器
    if (hideTimer) {
      clearTimeout(hideTimer);
      hideTimer = null;
    }
    
    alertMessage.textContent = text;
    alertContainer.classList.add('show');
    
    console.log('[GlobalAlert] 已添加 show 类，alert 应该可见了');
    
    // 自动隐藏
    if (duration > 0) {
      hideTimer = setTimeout(() => {
        hide();
      }, duration);
    }
  }
  
  function hide() {
    if (!alertContainer) return;
    alertContainer.classList.remove('show');
    if (hideTimer) {
      clearTimeout(hideTimer);
      hideTimer = null;
    }
  }
  
  return {
    show,
    hide
  };
})();

// 页面管理：负责切换 iframe 中的子页面，并保持与导航栏状态同步
(function () {
  console.log('[Index] index.js 已加载');
  const DEFAULT_PAGE = "store";

  function getPageFrame() {
    return document.getElementById("pageFrame");
  }

  function getNavigationFrame() {
    return document.getElementById("navigationFrame");
  }

  function switchPage(page) {
    const frame = getPageFrame();
    if (!frame) {
      return;
    }

    // 只处理实际的页面切换，不处理login/register
    if (page === "login" || page === "register") {
      return;
    }

    switch (page) {
      case "store":
        frame.src = "page/store/store.html";
        break;
      case "assets":
      default:
        frame.src = "page/assets/assets.html";
        break;
    }

    // 同步导航栏状态
    syncNavigationState(page);
  }

  // 同步导航栏状态
  function syncNavigationState(page) {
    const navigationFrame = getNavigationFrame();
    if (navigationFrame && navigationFrame.contentWindow) {
      // 使用setTimeout确保iframe已加载
      setTimeout(() => {
        navigationFrame.contentWindow.postMessage(
          { type: "navigation", page },
          "*"
        );
      }, 100);
    }
  }

  window.addEventListener("message", (event) => {
    // 调试：记录所有收到的消息
    console.log('[Index] 收到message事件:', {
      origin: event.origin,
      expectedOrigin: window.location.origin,
      data: event.data,
      source: event.source,
      type: event.data?.type
    });
    
    // 检查 origin（允许同源或 localhost，或者来自 iframe）
    const isSameOrigin = event.origin === window.location.origin;
    const isLocalhost = event.origin === 'http://localhost:3000' || 
                       event.origin === 'http://127.0.0.1:3000' ||
                       event.origin.startsWith('http://localhost:') ||
                       event.origin.startsWith('http://127.0.0.1:');
    // 允许来自同源的 iframe（即使 origin 不完全匹配）
    const isFromIframe = event.source && event.source !== window;
    
    console.log('[Index] Origin 检查:', {
      eventOrigin: event.origin,
      windowOrigin: window.location.origin,
      isSameOrigin,
      isLocalhost,
      isFromIframe,
      willPass: isSameOrigin || isLocalhost || isFromIframe
    });
    
    // 对于 global-alert 消息，放宽 origin 检查（允许来自任何同源 iframe）
    if (event.data && event.data.type === 'global-alert') {
      console.log('[Index] 这是 global-alert 消息，放宽 origin 检查');
      // 允许来自任何 iframe 的消息（只要 source 存在且不是 window 本身）
      if (isFromIframe || isSameOrigin || isLocalhost) {
        console.log('[Index] global-alert 消息通过检查');
      } else {
        console.warn('[Index] global-alert 消息被 origin 检查过滤:', event.origin);
        // 即使 origin 不匹配，也允许 global-alert 消息通过（因为来自同源 iframe）
        console.log('[Index] 但允许通过（来自 iframe）');
      }
    } else if (!isSameOrigin && !isLocalhost && !isFromIframe) {
      console.log('[Index] 消息被 origin 检查过滤:', event.origin);
      return;
    }
    
    console.log('[Index] 消息通过 origin 检查，继续处理');
    
    const { data } = event;
    if (data && data.type === "navigation" && (data.page === "login" || data.page === "register")) {
      // console.log('[2-Index] 收到login/register消息');
      const loginFrame = document.getElementById('loginViewFrame');
      if (loginFrame) {
        const mode = data.page === "register" ? "register" : "login";
        loginFrame.style.display = 'block';
        // console.log('[3-Index] iframe已显示');
        
        const sendMode = () => {
          if (loginFrame.contentWindow) {
            loginFrame.contentWindow.postMessage({
              type: 'open-login-view',
              mode: mode
            }, '*');
            // console.log('[4-Index] 消息已发送到login iframe');
          } else {
            setTimeout(sendMode, 100);
          }
        };
        
        sendMode();
        
        const handleLoad = () => {
          setTimeout(() => {
            sendMode();
          }, 50);
        };
        
        if (loginFrame.contentDocument && loginFrame.contentDocument.readyState === 'complete') {
          handleLoad();
        } else {
          loginFrame.addEventListener('load', handleLoad, { once: true });
        }
      }
    } else if (data && data.type === "navigation" && data.page) {
      switchPage(data.page);
    }
    else if (data && data.type === "close-login-view") {
      const loginFrame = document.getElementById('loginViewFrame');
      if (loginFrame) {
        loginFrame.style.display = 'none';
      }
    } else if (data && data.type === "login-success" && data.user) {
      // 处理登录成功消息，转发给 navigation iframe 和 pageFrame
      const navigationFrame = getNavigationFrame();
      if (navigationFrame && navigationFrame.contentWindow) {
        navigationFrame.contentWindow.postMessage({
          type: 'login-success',
          user: data.user
        }, '*');
      }
      
      // 也转发给 pageFrame（store 页面）
      const pageFrame = getPageFrame();
      if (pageFrame && pageFrame.contentWindow) {
        pageFrame.contentWindow.postMessage({
          type: 'login-success',
          user: data.user
        }, '*');
      }
      
      // 转发给 assets iframe（如果存在），它会再转发给 disk iframe
      const assetsFrame = document.getElementById('assetsFrame');
      if (assetsFrame && assetsFrame.contentWindow) {
        assetsFrame.contentWindow.postMessage({
          type: 'login-success',
          user: data.user
        }, '*');
      }
    } else if (data && data.type === "logout") {
      // 处理登出消息，转发给所有 iframe
      const navigationFrame = getNavigationFrame();
      if (navigationFrame && navigationFrame.contentWindow) {
        navigationFrame.contentWindow.postMessage({
          type: 'logout'
        }, '*');
      }
      
      const pageFrame = getPageFrame();
      if (pageFrame && pageFrame.contentWindow) {
        pageFrame.contentWindow.postMessage({
          type: 'logout'
        }, '*');
      }
    }
  });

  window.addEventListener("DOMContentLoaded", () => {
    switchPage(DEFAULT_PAGE);
    syncNavigationState(DEFAULT_PAGE);
  });
})();