左侧折叠

static/style.css

@@ -78,8 +78,95 @@ a:hover {
   background: var(--panel);
   border-right: 1px solid var(--border);
   overflow-y: auto;
-  padding: 0.75rem 0;
+  padding: 0 0 0.75rem;
   flex-shrink: 0;
+  transition:
+    width 0.22s ease,
+    min-width 0.22s ease,
+    max-width 0.22s ease,
+    opacity 0.18s ease,
+    padding 0.22s ease,
+    border-color 0.22s ease;
+}
+
+.layout-main.sidebar-collapsed .sidebar {
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  padding: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  border-right-color: transparent;
+}
+
+.sidebar-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0.45rem 0.5rem 0.35rem;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.btn-sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted);
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.btn-sidebar-toggle:hover {
+  color: var(--text);
+  border-color: var(--muted);
+  background: rgba(61, 139, 253, 0.1);
+}
+
+.btn-sidebar-expand {
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 2rem;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-right: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--muted);
+  font: inherit;
+  font-size: 1.05rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.btn-sidebar-expand:hover {
+  color: var(--text);
+  background: rgba(61, 139, 253, 0.08);
+}
+
+.btn-sidebar-expand[hidden] {
+  display: none;
 }
 
 .sidebar-section {

templates/index.html

@@ -20,8 +20,19 @@
 </div>
 {% endif %}
 {% endwith %}
-<div class="layout-main">
+<div class="layout-main" id="layout-main">
-  <aside class="sidebar" id="sidebar">
+  <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>
@@ -44,6 +55,16 @@
     </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 %}
@@ -90,6 +111,37 @@
 </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");