From 39ee3a937612e01732f488b8c6ee30840c92aec6 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sun, 4 Oct 2026 17:48:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E5=AE=A2=E6=88=B7=E7=AB=AF=E5=88=97=E8=A1=A8=E6=8C=89=20sim=20?=
 =?UTF-8?q?/=20live=20=E5=88=86=E7=BB=84=EF=BC=8C=E6=B2=A1=E6=9C=89?=
 =?UTF-8?q?=E5=AF=B9=E5=BA=94=E6=A8=A1=E5=BC=8F=E5=88=99=E4=B8=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E8=AF=A5=E7=BB=84=E6=A0=87=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 static/hub.css      |   7 ++
 templates/base.html |   2 +-
 templates/desk.html | 181 +++++++++++++++++++++++++++++---------------
 3 files changed, 126 insertions(+), 64 deletions(-)

diff --git a/static/hub.css b/static/hub.css
index bfbc59d..e8a4b62 100644
--- a/static/hub.css
+++ b/static/hub.css
@@ -782,6 +782,13 @@ button, .btn {
 }
 .desk-list { list-style: none; padding: 0; margin: 0; }
 .desk-list li { margin: 6px 0; }
+.desk-list .desk-group-label {
+  margin: 10px 0 4px;
+  padding: 0 2px;
+  list-style: none;
+}
+.desk-list .desk-group-label:first-child { margin-top: 0; }
+.desk.is-side-collapsed .desk-group-label { display: none; }
 .desk-list li a {
   display: block;
   padding: 7px 9px;
diff --git a/templates/base.html b/templates/base.html
index 5df0268..952f271 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}期权中控{% endblock %}</title>
-  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=16">
+  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=17">
 </head>
 <body class="{% if request.path.startswith('/login') %}page-login{% elif request.path.startswith('/desk') %}page-desk{% elif request.path.startswith('/stats') %}page-stats{% elif request.path.startswith('/instances') %}page-instances{% elif request.path == '/' %}page-dashboard{% endif %}">
   {% if session.get('logged_in') %}
diff --git a/templates/desk.html b/templates/desk.html
index 8158a60..d443eef 100644
--- a/templates/desk.html
+++ b/templates/desk.html
@@ -1,63 +1,118 @@
-{% extends "base.html" %}
-{% block title %}工作台 · 期权中控{% endblock %}
-{% block body %}
-<section class="desk" id="desk-root">
-  <aside class="desk-side" id="desk-side">
-    <div class="desk-side-head">
-      <h2 class="desk-side-title">客户端</h2>
-      <button type="button" class="desk-side-toggle" id="desk-side-toggle" title="折叠/展开" aria-label="折叠客户端列表">‹</button>
-    </div>
-    <ul class="desk-list">
-      {% for inst in instances %}
-      <li class="{% if current and current.id == inst.id %}active{% endif %}" title="{{ inst.name }}">
-        <a href="/desk?id={{ inst.id }}">
-          <span class="desk-list-name">{{ inst.name }}</span>
-        </a>
-      </li>
-      {% else %}
-      <li class="muted desk-list-empty">无启用实例</li>
-      {% endfor %}
-    </ul>
-  </aside>
-  <div class="desk-main">
-    {% if current and open_url %}
-    <div class="desk-toolbar">
-      <button type="button" class="desk-side-toggle desk-side-toggle--bar" id="desk-side-toggle-bar" title="展开客户端列表" aria-label="展开客户端列表">›</button>
-      <strong>{{ current.name }}</strong>
-      <span class="muted">{{ current.base_url }}</span>
-      <a class="btn" href="{{ open_url }}" target="_blank" rel="noopener">新标签打开</a>
-      <a class="btn" href="/">回总览</a>
-    </div>
-    <iframe class="desk-frame" src="{{ open_url }}" title="{{ current.name }}"></iframe>
-    {% else %}
-    <div class="desk-toolbar">
-      <button type="button" class="desk-side-toggle desk-side-toggle--bar" id="desk-side-toggle-bar" title="展开客户端列表" aria-label="展开客户端列表">›</button>
-    </div>
-    <div class="empty">请从左侧选择客户端,或到「实例」添加公网 crypto_okx.</div>
-    {% endif %}
-  </div>
-</section>
-{% endblock %}
-{% block scripts %}
-<script>
-(function () {
-  var KEY = "hub_desk_side_collapsed";
-  var root = document.getElementById("desk-root");
-  if (!root) return;
-  function apply(collapsed) {
-    root.classList.toggle("is-side-collapsed", !!collapsed);
-    try { localStorage.setItem(KEY, collapsed ? "1" : "0"); } catch (e) {}
-  }
-  function toggle() {
-    apply(!root.classList.contains("is-side-collapsed"));
-  }
-  var btn = document.getElementById("desk-side-toggle");
-  var bar = document.getElementById("desk-side-toggle-bar");
-  if (btn) btn.addEventListener("click", toggle);
-  if (bar) bar.addEventListener("click", toggle);
-  var saved = false;
-  try { saved = localStorage.getItem(KEY) === "1"; } catch (e) {}
-  apply(saved);
-})();
-</script>
-{% endblock %}
+{% extends "base.html" %}
+{% block title %}工作台 · 期权中控{% endblock %}
+{% block body %}
+<section class="desk" id="desk-root">
+  <aside class="desk-side" id="desk-side">
+    <div class="desk-side-head">
+      <h2 class="desk-side-title">客户端</h2>
+      <button type="button" class="desk-side-toggle" id="desk-side-toggle" title="折叠/展开" aria-label="折叠客户端列表">‹</button>
+    </div>
+    <ul class="desk-list" id="desk-list">
+      {% for inst in instances %}
+      <li class="desk-list-item{% if current and current.id == inst.id %} active{% endif %}" data-id="{{ inst.id }}" title="{{ inst.name }}">
+        <a href="/desk?id={{ inst.id }}">
+          <span class="desk-list-name">{{ inst.name }}</span>
+        </a>
+      </li>
+      {% else %}
+      <li class="muted desk-list-empty">无启用实例</li>
+      {% endfor %}
+    </ul>
+  </aside>
+  <div class="desk-main">
+    {% if current and open_url %}
+    <div class="desk-toolbar">
+      <button type="button" class="desk-side-toggle desk-side-toggle--bar" id="desk-side-toggle-bar" title="展开客户端列表" aria-label="展开客户端列表">›</button>
+      <strong>{{ current.name }}</strong>
+      <span class="muted">{{ current.base_url }}</span>
+      <a class="btn" href="{{ open_url }}" target="_blank" rel="noopener">新标签打开</a>
+      <a class="btn" href="/">回总览</a>
+    </div>
+    <iframe class="desk-frame" src="{{ open_url }}" title="{{ current.name }}"></iframe>
+    {% else %}
+    <div class="desk-toolbar">
+      <button type="button" class="desk-side-toggle desk-side-toggle--bar" id="desk-side-toggle-bar" title="展开客户端列表" aria-label="展开客户端列表">›</button>
+    </div>
+    <div class="empty">请从左侧选择客户端,或到「实例」添加公网 crypto_okx.</div>
+    {% endif %}
+  </div>
+</section>
+{% endblock %}
+{% block scripts %}
+<script>
+(function () {
+  var KEY = "hub_desk_side_collapsed";
+  var root = document.getElementById("desk-root");
+  if (!root) return;
+  function apply(collapsed) {
+    root.classList.toggle("is-side-collapsed", !!collapsed);
+    try { localStorage.setItem(KEY, collapsed ? "1" : "0"); } catch (e) {}
+  }
+  function toggle() {
+    apply(!root.classList.contains("is-side-collapsed"));
+  }
+  var btn = document.getElementById("desk-side-toggle");
+  var bar = document.getElementById("desk-side-toggle-bar");
+  if (btn) btn.addEventListener("click", toggle);
+  if (bar) bar.addEventListener("click", toggle);
+  var saved = false;
+  try { saved = localStorage.getItem(KEY) === "1"; } catch (e) {}
+  apply(saved);
+
+  var list = document.getElementById("desk-list");
+  if (!list) return;
+  var items = Array.prototype.slice.call(list.querySelectorAll("li.desk-list-item[data-id]"));
+  if (!items.length) return;
+
+  function groupLabel(mode) {
+    var li = document.createElement("li");
+    li.className = "desk-group-label";
+    li.setAttribute("aria-hidden", "true");
+    var span = document.createElement("span");
+    span.className = "overview-mode-tag overview-mode-tag--" + mode;
+    span.textContent = mode;
+    li.appendChild(span);
+    return li;
+  }
+
+  function regroup(modeById) {
+    var sim = [];
+    var live = [];
+    var other = [];
+    items.forEach(function (li) {
+      var m = String(modeById[li.getAttribute("data-id")] || "").toLowerCase();
+      if (m === "sim") sim.push(li);
+      else if (m === "live") live.push(li);
+      else other.push(li);
+    });
+    list.innerHTML = "";
+    if (sim.length) {
+      list.appendChild(groupLabel("sim"));
+      sim.forEach(function (li) { list.appendChild(li); });
+    }
+    if (live.length) {
+      list.appendChild(groupLabel("live"));
+      live.forEach(function (li) { list.appendChild(li); });
+    }
+    other.forEach(function (li) { list.appendChild(li); });
+  }
+
+  Promise.all(
+    items.map(function (li) {
+      var iid = li.getAttribute("data-id");
+      return fetch("/api/instances/" + iid + "/version", {
+        credentials: "same-origin",
+        headers: { Accept: "application/json" },
+      })
+        .then(function (r) { return r.json().catch(function () { return {}; }); })
+        .then(function (v) { return { id: iid, mode: (v && v.mode) || "" }; })
+        .catch(function () { return { id: iid, mode: "" }; });
+    })
+  ).then(function (rows) {
+    var map = {};
+    rows.forEach(function (row) { map[row.id] = row.mode; });
+    regroup(map);
+  });
+})();
+</script>
+{% endblock %}