总览改为列表布局，工作台全宽显示内嵌客户端。

避免主栏 max-width 挤压 iframe，并延长 SSO 打开链有效期。

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

app.py

@@ -205,6 +205,7 @@ def desk():
                 inst["base_url"],
                 bridge_token=inst["bridge_token"],
                 embed_path=inst.get("embed_path") or "/embed",
+                ttl_sec=3600,
             )
     return render_template(
         "desk.html",
@@ -231,6 +232,7 @@ def api_open_url(iid: int):
         inst["base_url"],
         bridge_token=inst["bridge_token"],
         embed_path=inst.get("embed_path") or "/embed",
+        ttl_sec=3600,
     )
     return jsonify({"ok": True, "url": url, "base_url": inst["base_url"]})
 

static/hub.css

@@ -28,6 +28,12 @@ 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;
+  width: 100%;
+  padding: 12px 16px 20px;
+}
 .page-head { display: flex; align-items: center; gap: 12px; }
 .muted { color: var(--muted); font-size: 0.9rem; }
 .flash {
@@ -80,6 +86,43 @@ button, .btn {
 }
 .check { display: flex !important; align-items: center; gap: 8px; }
 .inst-row { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
+.overview-table-wrap {
+  overflow-x: auto;
+  margin-top: 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel);
+}
+.overview-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.88rem;
+}
+.overview-table th,
+.overview-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+.overview-table th {
+  color: var(--muted);
+  font-weight: 600;
+  background: #12161f;
+  white-space: nowrap;
+}
+.overview-table tr:last-child td { border-bottom: 0; }
+.overview-table .status-on { color: var(--ok); }
+.overview-table .status-off { color: var(--bad); }
+.overview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.overview-actions .btn { margin-top: 0; }
+.pos-brief {
+  margin: 0;
+  padding-left: 1.1em;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+.pos-brief li { margin: 2px 0; }
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -96,7 +139,7 @@ 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: 70vh; max-width: none; }
+.desk { display: grid; grid-template-columns: 200px 1fr; gap: 12px; min-height: calc(100vh - 70px); max-width: none; }
 .desk-side {
   background: var(--panel);
   border: 1px solid var(--line);
@@ -106,7 +149,7 @@ button, .btn {
 .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-main { display: flex; flex-direction: column; min-height: 70vh; }
+.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;
   margin-bottom: 8px;
@@ -114,7 +157,7 @@ button, .btn {
 .desk-frame {
   flex: 1;
   width: 100%;
-  min-height: 65vh;
+  min-height: calc(100vh - 130px);
   border: 1px solid var(--line);
   border-radius: 10px;
   background: #000;

static/hub.js

@@ -6,10 +6,35 @@
     return (n > 0 ? "+" : "") + n.toFixed(2) + " U";
   }
 
-  function renderCard(row) {
+  function escapeHtml(s) {
+    return String(s)
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  function positionSummary(brief) {
+    const list = brief || [];
+    if (!list.length) return '<span class="muted">暂无持仓</span>';
+    const items = list.slice(0, 8).map(function (p) {
+      const id = escapeHtml(p.inst_id || "");
+      const sheets = escapeHtml(String(p.sheets != null ? p.sheets : "—"));
+      const pnl = escapeHtml(fmtPnl(p.pnl_usdt));
+      return "<li>" + id + " · " + sheets + "张 · " + pnl + "</li>";
+    });
+    const more =
+      list.length > 8
+        ? '<li class="muted">…共 ' + list.length + " 笔</li>"
+        : "";
+    return "<ul class=\"pos-brief\">" + items.join("") + more + "</ul>";
+  }
+
+  function renderRow(row) {
     const snap = row.snapshot || {};
     const inst = snap.instance || {};
-    const pnl = (snap.pnl && snap.pnl.unrealized_usdt != null)
+    const pnl =
+      snap.pnl && snap.pnl.unrealized_usdt != null
         ? snap.pnl.unrealized_usdt
         : snap.upl_total_usdc;
     const brief = snap.positions_brief || snap.positions || [];
@@ -17,57 +42,43 @@
     const status = online
       ? '<span class="status-on">在线</span>'
       : '<span class="status-off">离线</span>';
-    const mode = inst.mode || "—";
-    const err = row.error ? '<div class="muted">错误: ' + escapeHtml(row.error) + "</div>" : "";
-    let rows = "";
-    (brief || []).slice(0, 6).forEach(function (p) {
-      rows +=
-        "<tr><td>" +
-        escapeHtml(p.inst_id || "") +
-        "</td><td>" +
-        escapeHtml(String(p.sheets != null ? p.sheets : "")) +
-        "</td><td>" +
-        escapeHtml(fmtPnl(p.pnl_usdt)) +
-        "</td></tr>";
-    });
-    if (!rows) rows = '<tr><td colspan="3" class="muted">暂无持仓</td></tr>';
+    const err = row.error
+      ? '<div class="muted">错误: ' + escapeHtml(row.error) + "</div>"
+      : "";
     return (
-      '<article class="card">' +
-      "<h3>" +
+      "<tr>" +
+      "<td><strong>" +
       escapeHtml(row.name || "") +
-      "</h3>" +
-      "<div>" +
-      status +
-      " · " +
-      escapeHtml(mode) +
-      " · 浮盈 " +
-      escapeHtml(fmtPnl(pnl)) +
-      "</div>" +
-      '<div class="muted">拉取: ' +
-      escapeHtml(row.pulled_at || "") +
-      "</div>" +
+      "</strong>" +
       err +
-      "<table><thead><tr><th>合约</th><th>张</th><th>盈亏</th></tr></thead><tbody>" +
-      rows +
-      "</tbody></table>" +
-      '<p><a class="btn" href="/desk?id=' +
+      "</td>" +
+      "<td>" +
+      status +
+      "</td>" +
+      "<td>" +
+      escapeHtml(inst.mode || "—") +
+      "</td>" +
+      "<td>" +
+      escapeHtml(fmtPnl(pnl)) +
+      "</td>" +
+      "<td>" +
+      positionSummary(brief) +
+      "</td>" +
+      '<td class="muted">' +
+      escapeHtml(row.pulled_at || "—") +
+      "</td>" +
+      '<td><div class="overview-actions">' +
+      '<a class="btn" href="/desk?id=' +
       encodeURIComponent(row.id) +
-      '">内嵌打开</a> ' +
+      '">内嵌打开</a>' +
       '<button type="button" class="btn" data-open-tab="' +
       encodeURIComponent(row.id) +
-      '">新标签</button></p>' +
-      "</article>"
+      '">新标签</button>' +
+      "</div></td>" +
+      "</tr>"
     );
   }
 
-  function escapeHtml(s) {
-    return String(s)
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;");
-  }
-
   async function refresh() {
     const status = document.getElementById("overview-status");
     const grid = document.getElementById("overview-grid");
@@ -79,9 +90,16 @@
       if (!d.ok) throw new Error(d.msg || "失败");
       const list = d.instances || [];
       if (!list.length) {
-        grid.innerHTML = '<p class="muted">暂无启用实例,请先到「实例」添加.</p>';
+        grid.innerHTML =
+          '<p class="muted">暂无启用实例,请先到「实例」添加.</p>';
       } else {
-        grid.innerHTML = list.map(renderCard).join("");
+        grid.innerHTML =
+          '<div class="overview-table-wrap"><table class="overview-table">' +
+          "<thead><tr>" +
+          "<th>名称</th><th>状态</th><th>模式</th><th>浮盈</th><th>持仓</th><th>拉取时间</th><th>操作</th>" +
+          "</tr></thead><tbody>" +
+          list.map(renderRow).join("") +
+          "</tbody></table></div>";
         grid.querySelectorAll("[data-open-tab]").forEach(function (btn) {
           btn.addEventListener("click", async function () {
             const id = btn.getAttribute("data-open-tab");

templates/base.html

@@ -6,7 +6,7 @@
   <title>{% block title %}期权中控{% endblock %}</title>
   <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}">
 </head>
-<body>
+<body class="{% if request.path.startswith('/desk') %}page-desk{% elif request.path == '/' %}page-dashboard{% endif %}">
   {% if session.get('logged_in') %}
   <header class="topbar">
     <div class="brand">crypto_okx_hub</div>

templates/dashboard.html

@@ -6,7 +6,7 @@
   <button type="button" class="btn" id="btn-refresh">刷新</button>
 </section>
 <p class="muted" id="overview-status">加载中…</p>
-<div id="overview-grid" class="card-grid"></div>
+<div id="overview-grid"></div>
 {% endblock %}
 {% block scripts %}
 <script src="{{ url_for('static', filename='hub.js') }}"></script>