工作台左侧客户端支持折叠，带鱼屏两侧留边。

折叠状态本地记住；总览/工作台内容限宽居中。

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

static/hub.css

@@ -28,11 +28,13 @@ a { color: #9ec1ff; text-decoration: none; }
 .topbar nav a.active { color: #fff; }
 .brand { font-weight: 700; }
 .main { padding: 16px; max-width: 1200px; margin: 0 auto; }
+/* 总览/工作台:带鱼屏两侧留边,内容区限宽居中 */
 body.page-desk .main,
 body.page-dashboard .main {
-  max-width: none;
+  max-width: 1680px;
   width: 100%;
-  padding: 12px 16px 20px;
+  margin: 0 auto;
+  padding: 12px clamp(16px, 3vw, 48px) 20px;
 }
 .page-head { display: flex; align-items: center; gap: 12px; }
 .muted { color: var(--muted); font-size: 0.9rem; }
@@ -139,16 +141,88 @@ button, .btn {
 .card .status-off { color: var(--bad); }
 .card table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
 .card td, .card th { border-bottom: 1px solid var(--line); padding: 4px 2px; text-align: left; }
-.desk { display: grid; grid-template-columns: 200px 1fr; gap: 12px; min-height: calc(100vh - 70px); max-width: none; }
+.desk {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 12px;
+  min-height: calc(100vh - 70px);
+  max-width: none;
+  transition: grid-template-columns 0.18s ease;
+}
+.desk.is-side-collapsed {
+  grid-template-columns: 48px minmax(0, 1fr);
+}
 .desk-side {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 10px;
+  min-width: 0;
+  overflow: hidden;
+}
+.desk-side-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.desk-side-title {
+  margin: 0;
+  font-size: 1rem;
+  white-space: nowrap;
+}
+.desk-side-toggle {
+  flex: 0 0 auto;
+  margin-top: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: #12161f;
+  color: var(--text);
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.desk-side-toggle:hover { border-color: var(--accent); }
+.desk-side-toggle--bar {
+  display: none;
+}
+.desk.is-side-collapsed .desk-side-title,
+.desk.is-side-collapsed .desk-list-name,
+.desk.is-side-collapsed .desk-list-empty {
+  display: none;
+}
+.desk.is-side-collapsed .desk-side {
+  padding: 8px 6px;
+}
+.desk.is-side-collapsed .desk-side-head {
+  justify-content: center;
+  margin-bottom: 0;
+}
+.desk.is-side-collapsed .desk-side-toggle {
+  transform: rotate(180deg);
+}
+.desk.is-side-collapsed .desk-list {
+  display: none;
+}
+.desk.is-side-collapsed .desk-side-toggle--bar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 .desk-list { list-style: none; padding: 0; margin: 0; }
 .desk-list li { margin: 6px 0; }
-.desk-list li.active a { color: #fff; font-weight: 600; }
+.desk-list li a {
+  display: block;
+  padding: 6px 8px;
+  border-radius: 8px;
+  color: var(--muted);
+}
+.desk-list li a:hover { background: rgba(108, 92, 231, 0.12); color: #fff; }
+.desk-list li.active a { color: #fff; font-weight: 600; background: rgba(108, 92, 231, 0.22); }
 .desk-main { display: flex; flex-direction: column; min-height: calc(100vh - 70px); min-width: 0; }
 .desk-toolbar {
   display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
@@ -170,5 +244,17 @@ input.readonly {
   cursor: default;
 }
 @media (max-width: 800px) {
-  .desk { grid-template-columns: 1fr; }
+  .desk,
+  .desk.is-side-collapsed {
+    grid-template-columns: 1fr;
+  }
+  .desk-side-toggle--bar { display: none !important; }
+}
+@media (min-width: 2000px) {
+  body.page-desk .main,
+  body.page-dashboard .main {
+    max-width: 1760px;
+    padding-left: clamp(32px, 6vw, 96px);
+    padding-right: clamp(32px, 6vw, 96px);
+  }
 }

templates/desk.html

@@ -1,31 +1,63 @@
 {% extends "base.html" %}
 {% block title %}工作台 · 期权中控{% endblock %}
 {% block body %}
-<section class="desk">
+<section class="desk" id="desk-root">
-  <aside class="desk-side">
+  <aside class="desk-side" id="desk-side">
-    <h2>客户端</h2>
+    <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 %}">
+      <li class="{% if current and current.id == inst.id %}active{% endif %}" title="{{ inst.name }}">
-        <a href="/desk?id={{ inst.id }}">{{ inst.name }}</a>
+        <a href="/desk?id={{ inst.id }}">
+          <span class="desk-list-name">{{ inst.name }}</span>
+        </a>
       </li>
       {% else %}
-      <li class="muted">无启用实例</li>
+      <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>
+      <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 %}