tcs-front-tabler/js/headerPreRender.js

// 在页面加载前预渲染导航栏，减少闪烁和延迟
(function () {
  // 获取当前页面相对于根目录的路径级别
  function getPathLevel() {
    // 获取当前页面的路径
    const path = window.location.pathname;

    // 如果路径中包含 "/pages/"，则返回 "../"
    if (path.includes("/pages/")) {
      return "../";
    }

    return "";
  }

  // 获取当前页面的文件名
  function getCurrentPage() {
    return window.location.pathname.split("/").pop();
  }

  // 动态添加CSS文件
  function addCssFile(path) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = path;
    document.head.appendChild(link);
  }

  // 生成导航栏HTML
  function generateHeaderHTML() {
    const pathLevel = getPathLevel();
    const currentPage = getCurrentPage();

    // 设置活动导航项
    let monitorActive = currentPage.includes("monitor") ? "active" : "";
    let orderActive = currentPage.includes("order") ? "active" : "";
    let alarmActive = currentPage.includes("alarm") ? "active" : "";
    let mapActive = currentPage.includes("map") ? "active" : "";
    let vehicleActive = currentPage.includes("vehicle") ? "active" : "";
    let configActive = currentPage.includes("config") ? "active" : "";
    let userActive = currentPage.includes("user") ? "active" : "";

    // 修复链接路径
    let monitorLink =
      pathLevel === "../" ? "monitor.html" : "pages/monitor.html";
    let orderLink = pathLevel === "../" ? "order.html" : "pages/order.html";
    let alarmLink = pathLevel === "../" ? "alarm.html" : "pages/alarm.html";
    let mapLink = pathLevel === "../" ? "map.html" : "pages/map.html";
    let vehicleLink =
      pathLevel === "../" ? "vehicle.html" : "pages/vehicle.html";
    let configLink = pathLevel === "../" ? "config.html" : "pages/config.html";
    let userLink = pathLevel === "../" ? "user.html" : "pages/user.html";
    let dashboardLink =
      pathLevel === "../" ? "dashboard.html" : "pages/dashboard.html";
    let indexLink = pathLevel === "../" ? "../index.html" : "index.html";

    // 用户头像路径
    let userImgPath = `${pathLevel}assets/img/user.png`;

    // 生成HTML
    return `
    <!-- 顶部导航栏 -->
    <header class="navbar navbar-expand-md tcs-container-space-x d-flex align-items-center position-relative">
      <!-- 左侧Logo -->
      <div class="d-flex align-items-center">
        <h1
          class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3"
        >
          <a href="#" class="text-decoration-none"> SIMANC TCS</a>
        </h1>
      </div>

      <!-- 移动端菜单按钮 - 移到这里 -->
      <button
        class="navbar-toggler ms-auto d-md-none"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbar-menu-mobile"
        aria-controls="navbar-menu-mobile"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- 移动端显示的用户头像和返回按钮 -->
      <div class="d-flex d-md-none align-items-center ms-2">
        <!-- 垂直分割线 - 移动端 -->
        <div class="nav-item">
          <div class="vr h-50 mx-2 my-auto border-2 border-start"></div>
        </div>
        
        <!-- 返回按钮 -->
        <div class="nav-item me-2">
          <a href="${dashboardLink}" class="nav-link px-0">
             <i class="ti ti-grid-dots tcs-icon-lg"></i>
          </a>
        </div>
        
        <!-- 用户头像 - 仅在移动端显示 -->
        <div class="nav-item dropdown">
          <a
            href="#"
            class="nav-link d-flex lh-1 text-reset p-0"
            data-bs-toggle="dropdown"
            aria-label="打开用户菜单"
          >
            <span class="text-muted fw-semibold ms-2">Admin</span>
          </a>
          <div
            class="dropdown-menu dropdown-menu-end dropdown-menu-arrow tcs-user-dropdown"
          >
            <a href="#" class="dropdown-item" id="theme-toggle-mobile">
              <span id="theme-text-mobile">深色主题</span>
            </a>
            <div class="dropdown-divider"></div>
            <a href="${indexLink}" class="dropdown-item">退出登录</a>
          </div>
        </div>
      </div>

      <!-- 桌面端菜单 -->
      <div class="navbar-nav flex-row ms-auto d-none d-md-flex">
        <div class="d-md-flex me-3">
          <div class="nav flex-column flex-md-row">
            <div class="nav-item ${monitorActive}" id="nav-monitor-desktop">
              <a class="nav-link" href="${monitorLink}">
                <span class="nav-link-title">监控</span>
              </a>
            </div>
            <div class="nav-item ${orderActive}" id="nav-order-desktop">
              <a class="nav-link" href="${orderLink}">
                <span class="nav-link-title">订单</span>
              </a>
            </div>
            <div class="nav-item ${alarmActive}" id="nav-alarm-desktop">
              <a class="nav-link" href="${alarmLink}">
                <span class="nav-link-title">告警</span>
              </a>
            </div>
            <div class="nav-item ${mapActive}" id="nav-map-desktop">
              <a class="nav-link" href="${mapLink}">
                <span class="nav-link-title">地图</span>
              </a>
            </div>
            <div class="nav-item ${vehicleActive}" id="nav-vehicle-desktop">
              <a class="nav-link" href="${vehicleLink}">
                <span class="nav-link-title">车辆</span>
              </a>
            </div>
            <div class="nav-item ${configActive}" id="nav-config-desktop">
              <a class="nav-link" href="${configLink}">
                <span class="nav-link-title">配置</span>
              </a>
            </div>
            <div class="nav-item ${userActive}" id="nav-user-desktop">
              <a class="nav-link" href="${userLink}">
                <span class="nav-link-title">用户</span>
              </a>
            </div>
          </div>
        </div>

        <!-- 右侧菜单项 -->
        <!-- 分割线 -->
        <div class="nav-item d-none d-md-flex">
          <div class="vr h-50 mx-2 my-auto border-2 border-start"></div>
        </div>

        <!-- 返回 -->
        <div class="nav-item d-none d-md-flex">
          <a href="${dashboardLink}" class="nav-link px-0">
             <i class="ti ti-grid-dots tcs-icon-lg"></i>
          </a>
        </div>

        <!-- 用户菜单 - 仅在桌面端显示 -->
        <div class="nav-item dropdown d-none d-md-flex">
          <a
            href="#"
            class="nav-link d-flex lh-1 text-reset p-0"
            data-bs-toggle="dropdown"
            aria-label="打开用户菜单"
          >
            <span class="text-muted fw-semibold ms-2">Admin</span>
          </a>
          <div
            class="dropdown-menu dropdown-menu-end dropdown-menu-arrow tcs-user-dropdown"
          >
            <a href="#" class="dropdown-item" id="theme-toggle">
              <span id="theme-text">深色主题</span>
            </a>
            <div class="dropdown-divider"></div>
            <a href="${indexLink}" class="dropdown-item">退出登录</a>
          </div>
        </div>
      </div>

      <!-- 移动端菜单 - 仅在小屏幕显示 -->
      <div class="collapse navbar-collapse position-absolute start-0 top-100 w-100 bg-body z-index-dropdown shadow-sm d-md-none" id="navbar-menu-mobile">
        <!-- 主导航菜单 -->
        <div class="navbar-nav flex-column w-100">
          <!-- 修改这里：改为垂直菜单，并添加指示器 -->
          <div class="nav flex-column w-100">
            <div class="nav-item ${monitorActive}" id="nav-monitor-mobile">
              ${monitorActive ? '<div class="nav-indicator bg-primary"></div>' : ''}
              <a class="nav-link flex-grow-1 py-2" href="${monitorLink}">
                <span class="nav-link-title">监控</span>
              </a>
            </div>
            <div class="nav-item ${orderActive}" id="nav-order-mobile">
              ${orderActive ? '<div class="nav-indicator bg-primary"></div>' : ''}
              <a class="nav-link flex-grow-1 py-2" href="${orderLink}">
                <span class="nav-link-title">订单</span>
              </a>
            </div>
            <div class="nav-item ${alarmActive}" id="nav-alarm-mobile">
              ${alarmActive ? '<div class="nav-indicator bg-primary"></div>' : ''}
              <a class="nav-link flex-grow-1 py-2" href="${alarmLink}">
                <span class="nav-link-title">告警</span>
              </a>
            </div>
            <div class="nav-item ${mapActive}" id="nav-map-mobile">
              ${mapActive ? '<div class="nav-indicator bg-primary"></div>' : ''}
              <a class="nav-link flex-grow-1 py-2" href="${mapLink}">
                <span class="nav-link-title">地图</span>
              </a>
            </div>
            <div class="nav-item ${vehicleActive}" id="nav-vehicle-mobile">
              ${vehicleActive ? '<div class="nav-indicator bg-primary"></div>' : ''}
              <a class="nav-link flex-grow-1 py-2" href="${vehicleLink}">
                <span class="nav-link-title">车辆</span>
              </a>
            </div>
            <div class="nav-item ${configActive}" id="nav-config-mobile">
              ${configActive ? '<div class="nav-indicator bg-primary"></div>' : ''}
              <a class="nav-link flex-grow-1 py-2" href="${configLink}">
                <span class="nav-link-title">配置</span>
              </a>
            </div>
            <div class="nav-item ${userActive}" id="nav-user-mobile">
              ${userActive ? '<div class="nav-indicator bg-primary"></div>' : ''}
              <a class="nav-link flex-grow-1 py-2" href="${userLink}">
                <span class="nav-link-title">用户</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>
    `;
  }

  // 立即将导航栏HTML写入页面
  document.addEventListener("DOMContentLoaded", function () {
    // 获取当前路径级别
    const pathLevel = getPathLevel();
    
    // 动态添加移动端菜单样式
    // addCssFile(`${pathLevel}assets/css/tcs-mobile-menu.css`);
    
    // 获取导航栏容器
    const headerContainer = document.getElementById("tcs-header-container");
    if (headerContainer) {
      // 插入导航栏HTML
      headerContainer.innerHTML = generateHeaderHTML();

      // 更新主题文字
      const savedTheme = localStorage.getItem("theme");
      if (savedTheme && savedTheme === "dark") {
        const themeText = document.getElementById("theme-text");
        if (themeText) {
          themeText.textContent = "浅色主题";
        }
        
        // 同时更新移动端的主题文字
        const themeTextMobile = document.getElementById("theme-text-mobile");
        if (themeTextMobile) {
          themeTextMobile.textContent = "浅色主题";
        }
      }
    }
  });
})();