Show hub fullscreen options positions as cards matching instance data.

Enrich hub options snapshot with close preview and render read-only option position cards in exchange fullscreen view.

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

manual_trading_hub/static/app.js

@@ -3569,7 +3569,23 @@
     return html;
   }
 
-  function renderOptionsSectionBody(row) {
+  function renderOptionsPositionsCards(pos) {
+    if (!pos.length) return '<div class="empty-hint">暂无期权持仓</div>';
+    if (!globalThis.OptionsPositionCards || !OptionsPositionCards.renderCard) {
+      return renderOptionsPositionsTable(pos);
+    }
+    const cls = hubPosListCountClass(pos.length);
+    let html = `<div class="hub-pos-list hub-opt-pos-list ${cls}" data-pos-count="${pos.length}">`;
+    pos.forEach((p) => {
+      html += OptionsPositionCards.renderCard(p, { readOnly: true, hub: true });
+    });
+    html += "</div>";
+    return html;
+  }
+
+  function renderOptionsSectionBody(row, opts) {
+    const options = opts || {};
+    const layout = options.layout || "table";
     const opt = row.options || {};
     let html = "";
     if (opt.enabled === false) {
@@ -3585,7 +3601,7 @@
       const bal = optionsBalanceFields(opt);
       html += renderStatRow(bal.funding, bal.trading, bal.upl);
       html += `<div class="section-title hub-options-title">期权持仓 · ${pos.length} 仓</div>`;
-      html += renderOptionsPositionsTable(pos);
+      html += layout === "cards" ? renderOptionsPositionsCards(pos) : renderOptionsPositionsTable(pos);
       if (row.flask_url_browser || row.flask_url) {
         html += `<div class="hub-options-actions"><a class="btn-link btn-open-instance" href="#" data-ex-id="${esc(row.id)}" data-next="/options">打开期权页</a></div>`;
       }
@@ -3602,11 +3618,11 @@
     return html;
   }
 
-  function renderOptionsMonitorSection(row) {
+  function renderOptionsMonitorSection(row, opts) {
     if (!rowHasOptionsLayout(row)) return "";
     let html = '<div class="hub-monitor-block hub-monitor-options">';
     html += '<div class="hub-monitor-block-label">期权账户</div>';
-    html += renderOptionsSectionBody(row);
+    html += renderOptionsSectionBody(row, opts);
     html += "</div>";
     return html;
   }
@@ -3723,7 +3739,7 @@
     if (rowHasOptionsLayout(row)) {
       html += "</div>";
     }
-    html += renderOptionsMonitorSection(row);
+    html += renderOptionsMonitorSection(row, { layout: "cards" });
     html += '<div class="hub-fs-sections-grid">';
     if ((row.capabilities || []).includes("key")) {
       if (!flaskOk) {