LocalNav/templates/index.html

{% extends "base.html" %}
{% block title %}导航 · 本地导航{% endblock %}
{% block body %}
<div class="app-shell">
<header class="topbar">
  <h1>本地导航</h1>
  <nav>
    <span class="user">{{ current_user.username }}</span>
    <a href="{{ url_for('admin_groups') }}">分组管理</a>
    <a href="{{ url_for('admin_services') }}">服务管理</a>
    <a href="{{ url_for('logout') }}">退出</a>
  </nav>
</header>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="flash-wrap" style="padding-top: 0.5rem">
  {% for cat, msg in messages %}
  <div class="flash {{ cat }}">{{ msg }}</div>
  {% endfor %}
</div>
{% endif %}
{% endwith %}
<div class="layout-main" id="layout-main">
  <aside class="sidebar" id="sidebar" aria-label="服务分组导航">
    <div class="sidebar-toolbar">
      <button
        type="button"
        class="btn-sidebar-toggle"
        id="sidebar-collapse"
        title="收起侧栏"
        aria-label="收起侧栏"
      >
        ⟨
      </button>
    </div>
    {% for group, services in grouped %}
    <div class="sidebar-section">
      <h2>{{ group.name }}</h2>
      {% for svc in services %}
      <a
        href="#"
        class="nav-link"
        role="button"
        data-url="{{ svc.build_url()|e }}"
        data-name="{{ svc.name | e }}"
        >{{ svc.name }}</a
      >
      {% else %}
      <div class="hint" style="padding: 0 1rem">该分组下暂无服务</div>
      {% endfor %}
    </div>
    {% else %}
    <div class="hint" style="padding: 1rem">
      暂无分组与服务，请到「分组管理」「服务管理」添加。
    </div>
    {% endfor %}
  </aside>
  <button
    type="button"
    class="btn-sidebar-expand"
    id="sidebar-expand"
    title="展开侧栏"
    aria-label="展开侧栏"
    hidden
  >
    ⟩
  </button>
  <div class="content-column">
    <div class="service-dashboard" id="service-dashboard">
      {% for group, services in grouped %}
      <section class="dash-section">
        <h3 class="dash-section-title">{{ group.name }}</h3>
        <div class="service-card-grid">
          {% for svc in services %}
          <button
            type="button"
            class="service-card"
            data-url="{{ svc.build_url()|e }}"
            data-name="{{ svc.name | e }}"
          >
            <span class="service-card-title">{{ svc.name }}</span>
            <span class="service-card-group">{{ group.name }}</span>
          </button>
          {% endfor %}
        </div>
      </section>
      {% else %}
      <div class="dash-empty hint">
        暂无分组与服务，请到「分组管理」「服务管理」添加。
      </div>
      {% endfor %}
    </div>
    <div class="frame-stack" id="frame-stack" hidden>
      <div class="frame-toolbar">
        <div class="frame-toolbar-left">
          <button type="button" class="btn-frame-back" id="frame-back-overview" title="返回服务总览">
            总览
          </button>
          <span class="frame-title" id="current-service-name"></span>
        </div>
        <button type="button" class="btn btn-secondary btn-toolbar-refresh" id="frame-refresh">
          刷新
        </button>
      </div>
      <div class="frame-wrap">
        <iframe id="svc-frame" title="内嵌服务" hidden></iframe>
      </div>
    </div>
  </div>
</div>
</div>
<script>
  (function () {
    var layoutMain = document.getElementById("layout-main");
    var btnSidebarCollapse = document.getElementById("sidebar-collapse");
    var btnSidebarExpand = document.getElementById("sidebar-expand");
    var sidebarCollapsedKey = "localnav_sidebar_collapsed";

    function setSidebarCollapsed(collapsed) {
      if (!layoutMain) return;
      layoutMain.classList.toggle("sidebar-collapsed", collapsed);
      if (btnSidebarExpand) btnSidebarExpand.hidden = !collapsed;
    }

    if (layoutMain && btnSidebarCollapse && btnSidebarExpand) {
      try {
        setSidebarCollapsed(localStorage.getItem(sidebarCollapsedKey) === "1");
      } catch (e) {
        setSidebarCollapsed(false);
      }
      btnSidebarCollapse.addEventListener("click", function () {
        setSidebarCollapsed(true);
        try {
          localStorage.setItem(sidebarCollapsedKey, "1");
        } catch (e) {}
      });
      btnSidebarExpand.addEventListener("click", function () {
        setSidebarCollapsed(false);
        try {
          localStorage.setItem(sidebarCollapsedKey, "0");
        } catch (e) {}
      });
    }

    var frame = document.getElementById("svc-frame");
    var dashboard = document.getElementById("service-dashboard");
    var frameStack = document.getElementById("frame-stack");
    var nameEl = document.getElementById("current-service-name");
    var links = document.querySelectorAll(".nav-link[data-url]");
    var cards = document.querySelectorAll(".service-card[data-url]");
    var btnRefresh = document.getElementById("frame-refresh");
    var btnBack = document.getElementById("frame-back-overview");
    var currentBaseUrl = "";

    function setActive(el) {
      links.forEach(function (a) {
        a.classList.remove("active");
      });
      if (el) el.classList.add("active");
    }

    function findNavLink(url) {
      var found = null;
      links.forEach(function (a) {
        if (a.getAttribute("data-url") === url) found = a;
      });
      return found;
    }

    function openService(url, name, preferredNav) {
      if (!url) return;
      currentBaseUrl = url;
      nameEl.textContent = name || "";
      dashboard.hidden = true;
      frameStack.hidden = false;
      frame.hidden = false;
      frame.src = url;
      var nav = preferredNav || findNavLink(url);
      setActive(nav);
    }

    function reloadUrl() {
      var u = currentBaseUrl;
      if (!u) return;
      var sep = u.indexOf("?") >= 0 ? "&" : "?";
      var hash = "";
      var base = u;
      var hashPos = u.indexOf("#");
      if (hashPos >= 0) {
        base = u.slice(0, hashPos);
        hash = u.slice(hashPos);
      }
      frame.src = base + sep + "_navts=" + Date.now() + hash;
    }

    function showDashboard() {
      currentBaseUrl = "";
      frame.src = "about:blank";
      frame.hidden = true;
      frameStack.hidden = true;
      dashboard.hidden = false;
      setActive(null);
    }

    links.forEach(function (a) {
      a.addEventListener("click", function (e) {
        e.preventDefault();
        var url = a.getAttribute("data-url");
        var name = a.getAttribute("data-name") || "";
        openService(url, name, a);
      });
    });

    cards.forEach(function (btn) {
      btn.addEventListener("click", function () {
        var url = btn.getAttribute("data-url");
        var name = btn.getAttribute("data-name") || "";
        openService(url, name, null);
      });
    });

    btnRefresh.addEventListener("click", function () {
      reloadUrl();
    });

    btnBack.addEventListener("click", function () {
      showDashboard();
    });
  })();
</script>
{% endblock %}