ERP/frontend/js/app.js

(() => {
  // 应用保存的主题
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.documentElement.setAttribute('data-theme', savedTheme);
  
  let currentUser = null;
  
  // 更新用户显示
  function updateUserDisplay(user) {
    const userNameDisplay = document.getElementById('user-name-display');
    const userCard = document.getElementById('user-card');
    const username = (user && user.username) ? user.username : '未登录';
    
    if (userNameDisplay) userNameDisplay.textContent = username;
    if (userCard) userCard.textContent = username;
    
    // 加载用户头像（如果有设置）
    const avatarImg = document.getElementById('user-avatar-img');
    if (avatarImg && user && user.avatar) {
      avatarImg.src = user.avatar;
    } else if (avatarImg) {
      avatarImg.src = './assets/user-avatar.svg';
    }
    
    // 更新水印
    if (user && user.username) {
      createWatermark(user.username);
    } else {
      removeWatermark();
    }
  }
  
  // 创建水印
  function createWatermark(username) {
    // 检查水印是否启用
    const watermarkEnabled = localStorage.getItem('watermarkEnabled');
    if (watermarkEnabled === 'false') {
      return;
    }
    
    removeWatermark();
    
    const watermarkDiv = document.createElement('div');
    watermarkDiv.id = 'watermark-container';
    watermarkDiv.className = 'watermark';
    
    const now = new Date();
    const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
    const watermarkText = `${username} ${dateStr}`;
    
    // 计算水印平铺
    const spacing = 300;
    const rows = Math.ceil(window.innerHeight / spacing) + 2;
    const cols = Math.ceil(window.innerWidth / spacing) + 2;
    
    for (let i = 0; i < rows; i++) {
      for (let j = 0; j < cols; j++) {
        const span = document.createElement('span');
        span.className = 'watermark-text';
        span.textContent = watermarkText;
        span.style.left = `${j * spacing - 100}px`;
        span.style.top = `${i * spacing - 100}px`;
        watermarkDiv.appendChild(span);
      }
    }
    
    document.body.appendChild(watermarkDiv);
  }
  
  // 移除水印
  function removeWatermark() {
    const existing = document.getElementById('watermark-container');
    if (existing) {
      existing.remove();
    }
  }
  
  Router.onBeforeEach(async (path) => {
    document.getElementById('overlay').classList.remove('hidden');
    try {
      currentUser = await API.me().catch(() => null);
      const publicRoutes = ['/login'];
      if ((!currentUser || !currentUser.username) && !publicRoutes.includes(path)) {
        location.hash = '#/login';
      }
    } catch(e) {}
  });
  
  Router.onAfterEach(async (path) => {
    document.getElementById('overlay').classList.add('hidden');
    updateUserDisplay(currentUser);
    
    // 初始化通知系统（超级管理员和管理员）
    if (currentUser && (currentUser.role === 'superadmin' || currentUser.role === 'admin') && window.NotificationSystem) {
      window.NotificationSystem.init();
    }
  });
  
  Router.init();

  API.me().then(user => {
    currentUser = user;
    updateUserDisplay(user);
    
    // 初始化通知系统（超级管理员和管理员）
    if (user && (user.role === 'superadmin' || user.role === 'admin') && window.NotificationSystem) {
      window.NotificationSystem.init();
    }
  }).catch(()=>{});
  
  // 用户头像按钮点击事件 - 显示/隐藏下拉菜单
  const userAvatarBtn = document.getElementById('user-avatar-btn');
  const userDropdown = document.getElementById('user-dropdown');
  
  userAvatarBtn?.addEventListener('click', (e) => {
    e.stopPropagation();
    const isVisible = userDropdown.style.display !== 'none';
    userDropdown.style.display = isVisible ? 'none' : 'block';
  });
  
  // 点击页面其他地方关闭下拉菜单
  document.addEventListener('click', (e) => {
    if (userDropdown && !userDropdown.contains(e.target) && e.target !== userAvatarBtn) {
      userDropdown.style.display = 'none';
    }
  });
  
  // 退出登录
  const logoutBtn = document.getElementById('user-dropdown-logout');
  logoutBtn?.addEventListener('click', () => {
    // 清理通知系统
    if (window.NotificationSystem) {
      window.NotificationSystem.cleanup();
    }
    
    API.logout()
      .then(() => {
        currentUser = null;
        removeWatermark();
        updateUserDisplay(null);
        userDropdown.style.display = 'none';
        location.hash = '#/login';
      })
      .catch(() => {});
  });
  
  // 菜单切换
  const toggleBtn = document.getElementById('menu-toggle');
  const sidebar = document.querySelector('.sidebar');
  toggleBtn?.addEventListener('click', () => {
    sidebar.classList.toggle('open');
  });
  
  // 主题切换
  const themeToggleBtn = document.getElementById('theme-toggle-btn');
  const themeIcon = document.getElementById('theme-icon');
  
  // 更新主题图标
  function updateThemeIcon(theme) {
    if (themeIcon) {
      themeIcon.src = theme === 'dark' ? './assets/sun.svg' : './assets/moon.svg';
      themeIcon.alt = theme === 'dark' ? '切换到浅色模式' : '切换到深色模式';
    }
  }
  
  // 初始化主题图标
  updateThemeIcon(savedTheme);
  
  // 主题切换按钮点击事件
  themeToggleBtn?.addEventListener('click', () => {
    const currentTheme = localStorage.getItem('theme') || 'light';
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    localStorage.setItem('theme', newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
    updateThemeIcon(newTheme);
    
    API.toast(`已切换到${newTheme === 'dark' ? '深色' : '浅色'}主题`);
    
    // 触发自定义事件，通知其他组件主题已更改
    window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: newTheme } }));
  });
  
  // 暴露更新用户显示的函数，供设置页面使用
  window.updateUserDisplay = updateUserDisplay;
  
  // 暴露水印控制函数
  window.toggleWatermark = function(enabled) {
    localStorage.setItem('watermarkEnabled', enabled ? 'true' : 'false');
    if (enabled && currentUser && currentUser.username) {
      createWatermark(currentUser.username);
    } else {
      removeWatermark();
    }
  };
})();