jiu/web/assets/nav.js

(function() {
  var KEYS = ['access_token','refresh_token','username','real_name','shop_no','shop_id','role'];

  function getAuthUser() {
    var token    = localStorage.getItem('flutter.access_token');
    var username = localStorage.getItem('flutter.username');
    if (!token || !username) return null;
    return {
      username: username,
      realName: localStorage.getItem('flutter.real_name') || '',
      role:     localStorage.getItem('flutter.role')      || '',
      shopNo:   localStorage.getItem('flutter.shop_no')   || '',
    };
  }

  function doLogout() {
    KEYS.forEach(function(k) { localStorage.removeItem('flutter.' + k); });
    location.reload();
  }

  function toggleUserMenu() {
    var el = document.getElementById('userDropdown');
    if (el) el.classList.toggle('open');
  }

  function toggleMobileMenu() {
    var menu = document.getElementById('nav-mobile-menu');
    var btn  = document.getElementById('nav-hamburger');
    if (!menu) return;
    var isOpen = menu.classList.toggle('open');
    if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
  }

  // 点击外部关闭 dropdown 和 mobile menu
  document.addEventListener('click', function(e) {
    var userMenu = document.getElementById('userDropdown');
    if (userMenu) {
      var navUser = userMenu.closest('.nav-user');
      if (navUser && !navUser.contains(e.target)) userMenu.classList.remove('open');
    }
    var mobileMenu = document.getElementById('nav-mobile-menu');
    var hamburger  = document.getElementById('nav-hamburger');
    if (mobileMenu && hamburger) {
      var topnav = mobileMenu.closest('nav');
      if (topnav && !topnav.contains(e.target)) {
        mobileMenu.classList.remove('open');
        hamburger.setAttribute('aria-expanded', 'false');
      }
    }
  });

  function renderNav() {
    var cta = document.getElementById('nav-cta');
    var mobileCta = document.getElementById('nav-mobile-cta');
    if (!cta) return;
    var user = getAuthUser();
    if (user) {
      var display  = user.realName || user.username;
      var initial  = display.charAt(0).toUpperCase();
      var roleMap  = { admin: '管理员', user: '成员', readonly: '只读' };
      var roleLabel = roleMap[user.role] || user.role;
      cta.innerHTML =
        '<div class="nav-user">'
        + '<button class="nav-user-btn" onclick="toggleUserMenu()">'
        +   '<div class="nav-avatar">' + initial + '</div>'
        +   '<span>' + display + '</span>'
        +   '<i data-lucide="chevron-down" class="icon"></i>'
        + '</button>'
        + '<div class="nav-dropdown" id="userDropdown">'
        +   '<div style="padding:10px 14px 6px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px">'
        +     '<div style="font-size:13px;font-weight:600;color:var(--brand-900)">' + display + '</div>'
        +     '<div style="font-size:11px;color:var(--fg-muted);margin-top:2px">'
        +       (user.shopNo ? user.shopNo + ' · ' : '') + roleLabel
        +     '</div>'
        +   '</div>'
        +   '<a href="/app/"><i data-lucide="layout-dashboard" class="icon"></i>进入管理端</a>'
        +   '<div class="nav-dropdown-divider"></div>'
        +   '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>'
        + '</div></div>';
      if (mobileCta) {
        mobileCta.innerHTML =
          '<a href="/app/" class="btn btn-ghost">进入管理端</a>'
          + '<button class="btn btn-ghost" onclick="doLogout()">退出登录</button>';
      }
    } else {
      cta.innerHTML =
        '<a href="/app/" class="btn btn-ghost">登录</a>'
        + '<a href="/app/" class="btn btn-primary">免费试用</a>';
      if (mobileCta) {
        mobileCta.innerHTML =
          '<a href="/app/" class="btn btn-ghost">登录</a>'
          + '<a href="/register/" class="btn btn-primary">注册门店</a>';
      }
    }
    if (window.lucide) lucide.createIcons();
  }

  // 暴露给 onclick 调用
  window.toggleUserMenu  = toggleUserMenu;
  window.toggleMobileMenu = toggleMobileMenu;
  window.doLogout = doLogout;

  document.addEventListener('DOMContentLoaded', function() {
    renderNav();
    if (window.lucide) lucide.createIcons();

    var hamburger = document.getElementById('nav-hamburger');
    if (hamburger) hamburger.addEventListener('click', toggleMobileMenu);

    // 点击 mobile menu 链接后自动收起
    var mobileMenu = document.getElementById('nav-mobile-menu');
    if (mobileMenu) {
      mobileMenu.querySelectorAll('a').forEach(function(a) {
        a.addEventListener('click', function() {
          mobileMenu.classList.remove('open');
          if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
        });
      });
    }

    // 页内锚点平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(function(a) {
      a.addEventListener('click', function(e) {
        var id = a.getAttribute('href');
        if (!id || id.length < 2) return;
        var target = document.querySelector(id);
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
  });
})();