crypto_okx_hub/static/hub.js

(function (global) {
  function fmtPnl(v) {
    if (v == null || v === "") return "—";
    const n = Number(v);
    if (!Number.isFinite(n)) return "—";
    return (n > 0 ? "+" : "") + n.toFixed(2) + " U";
  }

  function pnlClass(v) {
    const n = Number(v);
    if (!Number.isFinite(n) || n === 0) return "pnl-flat";
    return n > 0 ? "pnl-up" : "pnl-down";
  }

  function fmtPnlHtml(v) {
    return '<span class="' + pnlClass(v) + '">' + escapeHtml(fmtPnl(v)) + "</span>";
  }

  function escapeHtml(s) {
    return String(s)
      .replace(/&/g, "&amp;")
      .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 = p.inst_id || "";
      const sheets = escapeHtml(String(p.sheets != null ? p.sheets : "—"));
      return (
        "<li>" +
        escapeHtml(id) +
        " · " +
        sheets +
        "张 · " +
        fmtPnlHtml(p.pnl_usdt) +
        "</li>"
      );
    });
    const more =
      list.length > 8
        ? '<li class="muted">…共 ' + list.length + " 笔</li>"
        : "";
    return "<ul class=\"pos-brief\">" + items.join("") + more + "</ul>";
  }

  function closeActionButtons(brief, instanceId, online) {
    if (!online) return "";
    const list = (brief || []).filter(function (p) {
      return !!(p && p.inst_id);
    });
    if (!list.length) return "";
    return list
      .slice(0, 8)
      .map(function (p) {
        const id = p.inst_id || "";
        const invalid = !!(
          p.bid_invalid ||
          (p.bid_px == null && (p.bid_sz == null || p.bid_sz === ""))
        );
        const reason = (p.bid_invalid_reason || "买一无效,禁止平仓").toString();
        const tip = list.length > 1 ? id + " · 买一限价全平" : "买一限价全平";
        if (invalid) {
          return (
            '<button type="button" class="btn btn-danger" disabled title="' +
            escapeHtml(reason) +
            '">平仓</button>'
          );
        }
        return (
          '<button type="button" class="btn btn-danger" data-close-inst="' +
          encodeURIComponent(String(instanceId)) +
          '" data-close-opt="' +
          encodeURIComponent(id) +
          '" title="' +
          escapeHtml(tip) +
          '">平仓</button>'
        );
      })
      .join("");
  }

  function fmtBidPx(v) {
    if (v == null || v === "") return "—";
    const n = Number(v);
    if (!Number.isFinite(n)) return "—";
    let s = n.toFixed(4).replace(/\.?0+$/, "");
    return s || "0";
  }

  function isLiquidityWeak(p) {
    if (!p) return false;
    if (p.liquidity_ok === false || p.bid_invalid) return true;
    const uncovered = Number(p.uncovered_sheets);
    return Number.isFinite(uncovered) && uncovered > 0;
  }

  function bidLiquidityLine(p) {
    if (p.bid_invalid || (p.bid_px == null && (p.bid_sz == null || p.bid_sz === ""))) {
      const reason = (p.bid_invalid_reason || "无买一/残档").toString();
      const short = reason.length > 18 ? reason.slice(0, 18) + "…" : reason;
      return { text: short, weak: true };
    }
    const px = fmtBidPx(p.bid_px);
    const sz = p.bid_sz != null ? String(p.bid_sz) : "—";
    const uncovered = Number(p.uncovered_sheets);
    let text = px + " / " + sz + "张";
    const weak = isLiquidityWeak(p);
    if (Number.isFinite(uncovered) && uncovered > 0) {
      text += "(差" + uncovered + ")";
    }
    return { text: text, weak: weak };
  }

  function bidLiquiditySummary(brief) {
    const list = brief || [];
    if (!list.length) return '<span class="muted">—</span>';
    const items = list.slice(0, 8).map(function (p) {
      const line = bidLiquidityLine(p);
      const cls = line.weak ? "liq-warn" : "liq-ok";
      return '<li class="' + cls + '">' + escapeHtml(line.text) + "</li>";
    });
    const more =
      list.length > 8
        ? '<li class="muted">…共 ' + list.length + " 笔</li>"
        : "";
    const anyWeak = list.some(isLiquidityWeak);
    const wrapCls = anyWeak ? "pos-brief liq-brief liq-brief--warn" : "pos-brief liq-brief";
    return '<ul class="' + wrapCls + '">' + items.join("") + more + "</ul>";
  }

  function fmtMoneyU(v) {
    if (v == null || v === "") return "—";
    const n = Number(v);
    if (!Number.isFinite(n)) return "—";
    return n.toFixed(2) + " U";
  }

  function fmtRatioPct(v) {
    if (v == null || v === "") return "—";
    const n = Number(v);
    if (!Number.isFinite(n)) return "—";
    return n.toFixed(2) + "%";
  }

  function premiumCell(snap) {
    const prem = snap.premium || {};
    const paid = prem.paid_usdt;
    const equity = prem.equity_usdt;
    const cash = prem.cash_usdt;
    const tipParts = [];
    if (cash != null) tipParts.push("余额 " + fmtMoneyU(cash));
    if (paid != null) tipParts.push("开仓占用 " + fmtMoneyU(paid));
    if (equity != null) tipParts.push("合计(余额+占用) " + fmtMoneyU(equity));
    const tip = tipParts.join(" · ") || "账户资金暂无";
    return (
      '<span title="' +
      escapeHtml(tip) +
      '">' +
      escapeHtml(fmtMoneyU(paid)) +
      "</span>"
    );
  }

  function premiumRatioCell(snap) {
    const prem = snap.premium || {};
    const ratio = prem.ratio_pct;
    const tip =
      prem.paid_usdt != null && prem.equity_usdt != null
        ? "开仓占用 " +
          fmtMoneyU(prem.paid_usdt) +
          " / (余额+占用) " +
          fmtMoneyU(prem.equity_usdt)
        : "";
    return (
      '<span title="' +
      escapeHtml(tip) +
      '">' +
      escapeHtml(fmtRatioPct(ratio)) +
      "</span>"
    );
  }

  function renderRow(row) {
    const snap = row.snapshot || {};
    const inst = snap.instance || {};
    const pnl =
      snap.pnl && snap.pnl.unrealized_usdt != null
        ? snap.pnl.unrealized_usdt
        : snap.upl_total_usdc;
    const brief = snap.positions_brief || snap.positions || [];
    const online = !!row.online;
    const status = online
      ? '<span class="status-on">在线</span>'
      : '<span class="status-off">离线</span>';
    const err = row.error
      ? '<div class="muted">错误: ' + escapeHtml(row.error) + "</div>"
      : "";
    return (
      "<tr>" +
      "<td><strong>" +
      escapeHtml(row.name || "") +
      "</strong>" +
      err +
      "</td>" +
      "<td>" +
      status +
      "</td>" +
      "<td>" +
      escapeHtml(inst.mode || "—") +
      "</td>" +
      "<td>" +
      fmtPnlHtml(pnl) +
      "</td>" +
      "<td>" +
      premiumCell(snap) +
      "</td>" +
      "<td>" +
      premiumRatioCell(snap) +
      "</td>" +
      "<td>" +
      positionSummary(brief) +
      "</td>" +
      "<td>" +
      bidLiquiditySummary(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>' +
      '<button type="button" class="btn" data-open-tab="' +
      encodeURIComponent(row.id) +
      '">新标签</button>' +
      closeActionButtons(brief, row.id, online) +
      "</div></td>" +
      "</tr>"
    );
  }

  async function requestClose(btn) {
    const instanceId = decodeURIComponent(btn.getAttribute("data-close-inst") || "");
    const optId = decodeURIComponent(btn.getAttribute("data-close-opt") || "");
    if (!instanceId || !optId) return;
    if (
      !confirm(
        "确认向该客户端下发买一限价全平?\n\n合约: " +
          optId +
          "\n\n无效买一将被拒绝;下单在客户端本地执行。"
      )
    ) {
      return;
    }
    const oldText = btn.textContent;
    btn.disabled = true;
    btn.textContent = "平仓中…";
    try {
      const rr = await fetch("/api/instances/" + encodeURIComponent(instanceId) + "/options/close", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ inst_id: optId }),
      });
      let dd = {};
      try {
        dd = await rr.json();
      } catch (e) {
        dd = {};
      }
      if (dd && dd.ok) {
        let msg = dd.msg || "已提交买一全平";
        if (dd.submitted_sheets != null) msg += " · " + dd.submitted_sheets + " 张";
        if (dd.fully_closed) msg += " · 已全平";
        alert(msg);
        await refresh();
      } else {
        alert((dd && dd.msg) || "平仓失败");
        btn.disabled = false;
        btn.textContent = oldText;
      }
    } catch (e) {
      alert((e && e.message) || "请求失败");
      btn.disabled = false;
      btn.textContent = oldText;
    }
  }

  async function refresh() {
    const status = document.getElementById("overview-status");
    const grid = document.getElementById("overview-grid");
    if (!grid) return;
    if (status) status.textContent = "刷新中…";
    try {
      const r = await fetch("/api/overview");
      const d = await r.json();
      if (!d.ok) throw new Error(d.msg || "失败");
      const list = d.instances || [];
      if (!list.length) {
        grid.innerHTML =
          '<p class="muted">暂无启用实例,请先到「实例」添加.</p>';
      } else {
        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><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");
            const rr = await fetch("/api/instances/" + id + "/open_url");
            const dd = await rr.json();
            if (dd.ok && dd.url) window.open(dd.url, "_blank", "noopener");
            else alert(dd.msg || "无法打开");
          });
        });
        grid.querySelectorAll("[data-close-opt]").forEach(function (btn) {
          btn.addEventListener("click", function () {
            requestClose(btn);
          });
        });
      }
      if (status) status.textContent = "已更新 · 共 " + list.length + " 台";
    } catch (e) {
      if (status) status.textContent = e.message || "加载失败";
    }
  }

  function formatBeijingNow() {
    try {
      return new Intl.DateTimeFormat("zh-CN", {
        timeZone: "Asia/Shanghai",
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
      }).format(new Date());
    } catch (e) {
      const d = new Date();
      const utc = d.getTime() + d.getTimezoneOffset() * 60000;
      const bj = new Date(utc + 8 * 3600000);
      const p = function (n) {
        return String(n).padStart(2, "0");
      };
      return (
        bj.getFullYear() +
        "/" +
        p(bj.getMonth() + 1) +
        "/" +
        p(bj.getDate()) +
        " " +
        p(bj.getHours()) +
        ":" +
        p(bj.getMinutes()) +
        ":" +
        p(bj.getSeconds())
      );
    }
  }

  function tickBeijingClock() {
    const el = document.getElementById("overview-bj-time");
    if (!el) return;
    el.textContent = formatBeijingNow();
  }

  function boot() {
    const btn = document.getElementById("btn-refresh");
    if (btn) btn.addEventListener("click", refresh);
    tickBeijingClock();
    setInterval(tickBeijingClock, 1000);
    refresh();
    setInterval(refresh, 10000);
  }

  global.HubOverview = { boot: boot, refresh: refresh };
})(window);