feat: options UI scroll layout, stats card, funding balance, and cross-account transfer

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

lib/common/static/instance_theme.css

@@ -2356,8 +2356,16 @@ html[data-theme="light"] .settings-export-link {
 }
 .options-strike-table-wrap {
   overflow-x: auto;
+  overflow-y: auto;
+  max-height: 352px;
   margin-top: 8px;
 }
+.options-strike-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: rgba(18, 24, 38, 0.98);
+}
 .options-strike-table {
   width: 100%;
   border-collapse: collapse;
@@ -2462,7 +2470,68 @@ html[data-theme="light"] .settings-export-link {
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   gap: 16px;
-  align-items: start;
+  align-items: stretch;
+}
+.options-order-card,
+.options-pos-card-wrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.options-pos-stack {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+.options-pos-subcard {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.options-pos-subcard h3 {
+  margin: 0 0 8px;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+.options-pos-live-pane {
+  flex: 1;
+  min-height: 100px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.options-pos-stats-card {
+  flex-shrink: 0;
+}
+.options-stats-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 24px;
+}
+.options-stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.options-stat-item .k {
+  font-size: 0.78rem;
+  opacity: 0.7;
+}
+.options-stat-item .v {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+.options-pos-history-card {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.options-history-table-wrap {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 120px;
 }
 @media (max-width: 1100px) {
   .options-dual-grid {

lib/common/static/options_panel.js

@@ -9,7 +9,6 @@
     optType: "C",
     chain: null,
     selectedInst: null,
-    posTab: "live",
   };
 
   function fmt(v, d) {
@@ -289,7 +288,7 @@
       msgEl.textContent = d.ok ? "下单已提交，可在 OKX 委托中查看" : (d.msg || "失败");
       msgEl.classList.toggle("opt-error", !d.ok);
       if (d.ok) {
-        refreshPositions();
+        refreshAllPositions();
         if (typeof refreshAccountSnapshot === "function") refreshAccountSnapshot();
       } else {
         alert(d.msg || "下单失败");
@@ -349,8 +348,7 @@
       } else {
         alert(r.msg || "平仓失败");
       }
-      refreshPositions();
-      refreshHistory();
+      refreshAllPositions();
       if (typeof refreshAccountSnapshot === "function") refreshAccountSnapshot();
     } finally {
       if (btn) btn.disabled = false;
@@ -380,6 +378,24 @@
     });
   }
 
+  async function refreshStats() {
+    const d = await apiJson("/api/options/stats");
+    const winEl = document.getElementById("opt-stats-winrate");
+    const plrEl = document.getElementById("opt-stats-plr");
+    const closedEl = document.getElementById("opt-stats-closed");
+    if (!d.ok) {
+      if (winEl) winEl.textContent = "—";
+      if (plrEl) plrEl.textContent = "—";
+      if (closedEl) closedEl.textContent = "—";
+      return;
+    }
+    if (winEl) winEl.textContent = d.total_closed ? d.win_rate + "%" : "0%";
+    if (plrEl) {
+      plrEl.textContent = d.profit_loss_ratio != null ? String(d.profit_loss_ratio) : "—";
+    }
+    if (closedEl) closedEl.textContent = String(d.total_closed || 0);
+  }
+
   async function refreshHistory() {
     const d = await apiJson("/api/options/history");
     const tbody = document.getElementById("opt-history-tbody");
@@ -405,14 +421,10 @@
     });
   }
 
-  function switchPosTab(tab) {
-    state.posTab = tab;
-    document.querySelectorAll(".opt-pos-tab").forEach(function (b) {
-      b.classList.toggle("active", b.getAttribute("data-tab") === tab);
-    });
-    document.getElementById("opt-pos-live").hidden = tab !== "live";
-    document.getElementById("opt-pos-history").hidden = tab !== "history";
-    if (tab === "history") refreshHistory();
+  function refreshAllPositions() {
+    refreshPositions();
+    refreshStats();
+    refreshHistory();
   }
 
   document.querySelectorAll(".opt-uly-btn").forEach(function (btn) {
@@ -433,18 +445,9 @@
     });
   });
 
-  document.querySelectorAll(".opt-pos-tab").forEach(function (btn) {
-    btn.addEventListener("click", function () {
-      switchPosTab(btn.getAttribute("data-tab"));
-    });
-  });
-
   document.getElementById("opt-exp-select").addEventListener("change", renderStrikes);
   document.getElementById("opt-load-chain").addEventListener("click", loadChain);
-  document.getElementById("opt-refresh-positions").addEventListener("click", function () {
-    refreshPositions();
-    if (state.posTab === "history") refreshHistory();
-  });
+  document.getElementById("opt-refresh-positions").addEventListener("click", refreshAllPositions);
   document.getElementById("opt-open-btn").addEventListener("click", openPosition);
 
   document.querySelectorAll('input[name="opt-size-mode"]').forEach(function (r) {
@@ -464,5 +467,5 @@
 
   updateSizeInputs();
   loadChain();
-  refreshPositions();
+  refreshAllPositions();
 })();

lib/common/static/options_settings.js

@@ -64,10 +64,12 @@
       body: JSON.stringify({
         ccy: document.getElementById("opt-set-cross-ccy").value,
         amount: amount,
-        account: document.getElementById("opt-set-cross-acct").value,
+        from_account: document.getElementById("opt-set-cross-from-acct").value,
+        to_account: document.getElementById("opt-set-cross-to-acct").value,
         direction: document.getElementById("opt-set-cross-dir").value,
       }),
     });
     setMsg("opt-set-cross-msg", d.ok ? "划转成功" : (d.msg || "失败"), !d.ok);
+    if (d.ok && typeof refreshAccountSnapshot === "function") refreshAccountSnapshot();
   });
 })();

lib/exchange/okx_options_lib.py

@@ -489,6 +489,14 @@ def fetch_options_trading_usdc(ex: ccxt.okx) -> float | None:
     return round(float(v), 2)
 
 
+def fetch_options_funding_usdc(ex: ccxt.okx) -> float | None:
+    bal = fetch_options_balances(ex)
+    v = bal.get("funding_usdc")
+    if v is None:
+        return None
+    return round(float(v), 2)
+
+
 def spot_market_swap_usdt_usdc(
     ex: ccxt.okx,
     *,
@@ -538,7 +546,8 @@ def transfer_main_sub_account(
     amount: float,
     sub_acct: str,
     main_to_sub: bool,
-    account: str = "funding",
+    from_account: str = "funding",
+    to_account: str = "funding",
 ) -> dict[str, Any]:
     """主账户与子账户之间划转（须主账户 API）。"""
     if amount <= 0:
@@ -546,15 +555,16 @@ def transfer_main_sub_account(
     sub = (sub_acct or "").strip()
     if not sub:
         return {"ok": False, "msg": "未配置子账户名称 OKX_SUB_ACCOUNT_NAME"}
-    acct_code = _OKX_ACCT_CODE.get((account or "funding").lower(), "6")
+    from_code = _OKX_ACCT_CODE.get((from_account or "funding").lower(), "6")
+    to_code = _OKX_ACCT_CODE.get((to_account or "funding").lower(), "6")
     try:
         resp = ex.private_post_asset_transfer(
             {
                 "type": "1" if main_to_sub else "2",
                 "ccy": str(ccy).upper(),
                 "amt": str(amount),
-                "from": acct_code,
-                "to": acct_code,
+                "from": from_code,
+                "to": to_code,
                 "subAcct": sub,
             }
         )

lib/instance/instance_embed_context_lib.py

@@ -89,11 +89,14 @@ def total_funds_usdt(
     funding_usdt: float | None,
     trading_usdt: float | None,
     options_trading_usdc: float | None = None,
+    options_funding_usdc: float | None = None,
 ) -> float | None:
     if funding_usdt is None:
         return None
     try:
         total = float(funding_usdt) + float(trading_usdt or 0)
+        if options_funding_usdc is not None:
+            total += float(options_funding_usdc)
         if options_trading_usdc is not None:
             total += float(options_trading_usdc)
         return round(total, 2)

lib/instance/templates/embed_boot_scripts.html

@@ -1061,6 +1061,11 @@ function refreshAccountSnapshot(){
             const el = document.getElementById("current-capital");
             if(el) el.innerText = `${Number(data.current_capital).toFixed(2)}U`;
         }
+        if (typeof data.options_funding_usdc !== "undefined") {
+            const el = document.getElementById("options-funding-usdc");
+            if (el) el.innerText = (data.options_funding_usdc === null || data.options_funding_usdc === undefined)
+                ? "—" : `${Number(data.options_funding_usdc).toFixed(2)} USDC`;
+        }
         if (typeof data.options_trading_usdc !== "undefined") {
             const el = document.getElementById("options-trading-usdc");
             if (el) el.innerText = (data.options_trading_usdc === null || data.options_trading_usdc === undefined)

lib/instance/templates/index.html

@@ -1612,6 +1612,11 @@ function refreshAccountSnapshot(){
             const el = document.getElementById("current-capital");
             if(el) el.innerText = `${Number(data.current_capital).toFixed(2)}U`;
         }
+        if (typeof data.options_funding_usdc !== "undefined") {
+            const el = document.getElementById("options-funding-usdc");
+            if (el) el.innerText = (data.options_funding_usdc === null || data.options_funding_usdc === undefined)
+                ? "—" : `${Number(data.options_funding_usdc).toFixed(2)} USDC`;
+        }
         if (typeof data.options_trading_usdc !== "undefined") {
             const el = document.getElementById("options-trading-usdc");
             if (el) el.innerText = (data.options_trading_usdc === null || data.options_trading_usdc === undefined)

lib/instance/templates/instance_header_panel.html

@@ -75,6 +75,10 @@
             <div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div>
         </div>
         {% if options_enabled %}
+        <div class="stat-strip-item">
+            <div class="label">期权资金账户</div>
+            <div class="value" id="options-funding-usdc">{% if options_funding_usdc is not none %}{{ funds_fmt(options_funding_usdc) }} USDC{% else %}—{% endif %}</div>
+        </div>
         <div class="stat-strip-item">
             <div class="label">期权交易账户</div>
             <div class="value" id="options-trading-usdc">{% if options_trading_usdc is not none %}{{ funds_fmt(options_trading_usdc) }} USDC{% else %}—{% endif %}</div>

lib/options/options_register.py

@@ -479,8 +479,9 @@ def register_options_routes(app: Flask, cfg: dict[str, Any]) -> None:
             return jsonify({"ok": False, "msg": err})
         data = request.get_json(silent=True) or {}
         ccy = (data.get("ccy") or "USDT").upper()
-        account = (data.get("account") or "funding").strip()
         direction = (data.get("direction") or "sub_to_main").strip()
+        from_account = (data.get("from_account") or data.get("account") or "funding").strip()
+        to_account = (data.get("to_account") or data.get("account") or "funding").strip()
         try:
             amount = float(data.get("amount"))
         except (TypeError, ValueError):
@@ -492,7 +493,8 @@ def register_options_routes(app: Flask, cfg: dict[str, Any]) -> None:
             amount=amount,
             sub_acct=cfg.get("sub_account_name") or "",
             main_to_sub=main_to_sub,
-            account=account,
+            from_account=from_account,
+            to_account=to_account,
         )
         if result.get("ok"):
             conn = cfg["get_db"]()
@@ -506,9 +508,9 @@ def register_options_routes(app: Flask, cfg: dict[str, Any]) -> None:
                     (
                         ccy,
                         amount,
-                        "main" if main_to_sub else "sub",
-                        "sub" if main_to_sub else "main",
-                        f"cross:{account}",
+                        ("main" if main_to_sub else "sub") + ":" + from_account,
+                        ("sub" if main_to_sub else "main") + ":" + to_account,
+                        "cross",
                     ),
                 )
                 conn.commit()
@@ -540,6 +542,46 @@ def register_options_routes(app: Flask, cfg: dict[str, Any]) -> None:
             conn.close()
         return jsonify({"ok": True, "history": items})
 
+    @app.route("/api/options/stats")
+    @lr
+    def api_options_stats():
+        ex, err = _require_options_ex(cfg)
+        if ex is None:
+            return jsonify({"ok": False, "msg": err})
+        from lib.instance.instance_embed_context_lib import profit_loss_ratio_from_averages
+
+        conn = cfg["get_db"]()
+        try:
+            init_options_tables(conn)
+            rows = conn.execute(
+                """
+                SELECT realized_pnl FROM options_trades
+                WHERE status = 'closed' AND realized_pnl IS NOT NULL
+                """
+            ).fetchall()
+        finally:
+            conn.close()
+        wins: list[float] = []
+        losses: list[float] = []
+        for row in rows:
+            pnl = float(row["realized_pnl"])
+            if pnl > 0:
+                wins.append(pnl)
+            elif pnl < 0:
+                losses.append(pnl)
+        total_closed = len(wins) + len(losses)
+        win_rate = round(len(wins) / total_closed * 100, 2) if total_closed else 0
+        avg_win = sum(wins) / len(wins) if wins else None
+        avg_loss = sum(losses) / len(losses) if losses else None
+        return jsonify(
+            {
+                "ok": True,
+                "total_closed": total_closed,
+                "win_rate": win_rate,
+                "profit_loss_ratio": profit_loss_ratio_from_averages(avg_win, avg_loss),
+            }
+        )
+
 
 def _start_monitor_thread(app: Flask, cfg: dict[str, Any]) -> None:
     if app.extensions.get("options_monitor_started"):

lib/options/templates/options_panel.html

@@ -63,34 +63,53 @@
                 <h2>持仓</h2>
                 <button type="button" class="btn-secondary" id="opt-refresh-positions">刷新</button>
             </div>
-            <div class="options-pos-tabs" role="tablist">
-                <button type="button" class="btn-secondary opt-pos-tab active" data-tab="live">当前持仓</button>
-                <button type="button" class="btn-secondary opt-pos-tab" data-tab="history">期权历史</button>
-            </div>
-            <div id="opt-pos-live" class="panel-scroll pos-list options-pos-pane">
-                <div class="pos-empty" id="opt-pos-empty">暂无持仓</div>
-                <div id="opt-pos-cards"></div>
-            </div>
-            <div id="opt-pos-history" class="options-pos-pane" hidden>
-                <div class="options-history-table-wrap">
-                    <table class="options-strike-table" id="opt-history-table">
-                        <thead>
-                            <tr>
-                                <th>合约</th>
-                                <th>张数</th>
-                                <th>权利金</th>
-                                <th>状态</th>
-                                <th>盈亏</th>
-                                <th>时间</th>
-                            </tr>
-                        </thead>
-                        <tbody id="opt-history-tbody">
-                            <tr><td colspan="6" class="muted">加载中…</td></tr>
-                        </tbody>
-                    </table>
+            <div class="options-pos-stack">
+                <div class="card-nested options-pos-subcard">
+                    <h3>当前持仓</h3>
+                    <div id="opt-pos-live" class="panel-scroll pos-list options-pos-live-pane">
+                        <div class="pos-empty" id="opt-pos-empty">暂无持仓</div>
+                        <div id="opt-pos-cards"></div>
+                    </div>
+                </div>
+                <div class="card-nested options-pos-subcard options-pos-stats-card">
+                    <h3>数据统计</h3>
+                    <div class="options-stats-grid">
+                        <div class="options-stat-item">
+                            <span class="k">胜率</span>
+                            <span class="v" id="opt-stats-winrate">—</span>
+                        </div>
+                        <div class="options-stat-item">
+                            <span class="k">盈亏比</span>
+                            <span class="v" id="opt-stats-plr">—</span>
+                        </div>
+                        <div class="options-stat-item">
+                            <span class="k">已平笔数</span>
+                            <span class="v" id="opt-stats-closed">—</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-nested options-pos-subcard options-pos-history-card">
+                    <h3>期权历史</h3>
+                    <div class="options-history-table-wrap">
+                        <table class="options-strike-table" id="opt-history-table">
+                            <thead>
+                                <tr>
+                                    <th>合约</th>
+                                    <th>张数</th>
+                                    <th>权利金</th>
+                                    <th>状态</th>
+                                    <th>盈亏</th>
+                                    <th>时间</th>
+                                </tr>
+                            </thead>
+                            <tbody id="opt-history-tbody">
+                                <tr><td colspan="6" class="muted">加载中…</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
-<script src="/static/options_panel.js?v=5"></script>
+<script src="/static/options_panel.js?v=6"></script>

lib/options/templates/options_settings_panel.html

@@ -44,10 +44,15 @@
                 <option value="USDT" selected>USDT</option>
                 <option value="USDC">USDC</option>
             </select>
-            <select id="opt-set-cross-acct">
+            <select id="opt-set-cross-from-acct">
                 <option value="funding" selected>资金账户</option>
                 <option value="trading">交易账户</option>
             </select>
+            <span>→</span>
+            <select id="opt-set-cross-to-acct">
+                <option value="trading" selected>交易账户</option>
+                <option value="funding">资金账户</option>
+            </select>
             <select id="opt-set-cross-dir">
                 <option value="sub_to_main" selected>子账户 → 主账户</option>
                 <option value="main_to_sub">主账户 → 子账户</option>
@@ -58,4 +63,4 @@
         <div id="opt-set-cross-msg" class="muted"></div>
     </div>
 </div>
-<script src="/static/options_settings.js?v=1"></script>
+<script src="/static/options_settings.js?v=2"></script>