feat: service card dashboard, iframe toolbar with refresh and overview

Co-authored-by: Cursor <cursoragent@cursor.com>

static/style.css

@@ -117,6 +117,165 @@ a:hover {
   text-decoration: none;
 }
 
+.content-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.service-dashboard {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.25rem 1.5rem 2rem;
+  background: linear-gradient(165deg, #0c1016 0%, var(--bg) 42%, #0a0d12 100%);
+}
+
+.service-dashboard[hidden] {
+  display: none !important;
+}
+
+.dash-section {
+  margin-bottom: 1.75rem;
+}
+
+.dash-section:last-child {
+  margin-bottom: 0;
+}
+
+.dash-section-title {
+  margin: 0 0 0.85rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--muted);
+}
+
+.service-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
+  gap: 1rem;
+}
+
+.service-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.4rem;
+  margin: 0;
+  padding: 1.05rem 1.15rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: linear-gradient(145deg, rgba(26, 35, 50, 0.95), rgba(18, 24, 34, 0.98));
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.service-card:hover {
+  border-color: rgba(61, 139, 253, 0.5);
+  box-shadow:
+    0 0 0 1px rgba(61, 139, 253, 0.12),
+    0 12px 28px rgba(0, 0, 0, 0.35);
+  transform: translateY(-2px);
+}
+
+.service-card:active {
+  transform: translateY(0);
+}
+
+.service-card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.service-card-group {
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.dash-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  max-width: 28rem;
+  margin: 0 auto;
+}
+
+.frame-stack {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.frame-stack[hidden] {
+  display: none !important;
+}
+
+.frame-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.9rem;
+  background: #0e141c;
+  border-bottom: 1px solid var(--border);
+}
+
+.frame-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-width: 0;
+}
+
+.btn-frame-back {
+  flex-shrink: 0;
+  padding: 0.32rem 0.55rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.btn-frame-back:hover {
+  color: var(--text);
+  border-color: var(--muted);
+  background: rgba(61, 139, 253, 0.1);
+}
+
+.frame-title {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.btn-toolbar-refresh {
+  flex-shrink: 0;
+  padding: 0.38rem 0.85rem;
+  font-size: 0.82rem;
+}
+
 .frame-wrap {
   position: relative;
   flex: 1;
@@ -125,16 +284,6 @@ a:hover {
   background: #0a0e12;
 }
 
-.frame-placeholder {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--muted);
-  font-size: 0.95rem;
-}
-
 .frame-wrap iframe {
   position: absolute;
   inset: 0;

templates/index.html

@@ -30,7 +30,7 @@
         href="#"
         class="nav-link"
         role="button"
-        data-url="{{ svc.build_url() }}"
+        data-url="{{ svc.build_url()|e }}"
         data-name="{{ svc.name | e }}"
         >{{ svc.name }}</a
       >
@@ -44,17 +44,61 @@
     </div>
     {% endfor %}
   </aside>
+  <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">
-    <div class="frame-placeholder" id="placeholder" aria-hidden="true"></div>
         <iframe id="svc-frame" title="内嵌服务" hidden></iframe>
       </div>
     </div>
   </div>
+</div>
+</div>
 <script>
   (function () {
     var frame = document.getElementById("svc-frame");
-    var placeholder = document.getElementById("placeholder");
+    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) {
@@ -63,17 +107,73 @@
       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");
-        if (!url) return;
+        var name = a.getAttribute("data-name") || "";
-        placeholder.hidden = true;
+        openService(url, name, a);
-        frame.hidden = false;
-        frame.src = url;
-        setActive(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 %}