中控

manual_trading_hub/static/app.js

@@ -17,22 +17,65 @@
     return r;
   }
 
-  async function openInstanceInBrowser(exchangeId, nextPath) {
+  let instanceFrameUrl = "";
+
+  async function openInstance(exchangeId, nextPath, opts) {
+    const options = opts || {};
+    const newTab = !!options.newTab;
     const next = nextPath || "/";
     try {
       const q = new URLSearchParams({ exchange_id: String(exchangeId), next });
       const r = await apiFetch("/api/instance/open-url?" + q.toString());
       const j = await r.json();
-      if (j.ok && j.url) {
+      if (!j.ok || !j.url) {
+        showToast(j.detail || "无法生成打开链接", true);
+        return;
+      }
+      if (newTab) {
         window.open(j.url, "_blank", "noopener");
         return;
       }
-      showToast(j.detail || "无法生成打开链接", true);
+      const row = lastMonitorRows.find((x) => String(x.id) === String(exchangeId));
+      openInstanceFrame(j.url, row ? row.name : exchangeId);
     } catch (e) {
       showToast(String(e), true);
     }
   }
 
+  function openInstanceFrame(url, title) {
+    const shell = document.getElementById("instance-frame-shell");
+    const frame = document.getElementById("instance-frame");
+    const titleEl = document.getElementById("instance-frame-title");
+    if (!shell || !frame) {
+      window.open(url, "_blank", "noopener");
+      return;
+    }
+    closeExchangeFullscreen();
+    instanceFrameUrl = url;
+    if (titleEl) titleEl.textContent = title || "实例";
+    frame.src = url;
+    shell.classList.remove("hidden");
+    shell.setAttribute("aria-hidden", "false");
+    document.body.classList.add("hub-instance-frame-open");
+  }
+
+  function closeInstanceFrame() {
+    const shell = document.getElementById("instance-frame-shell");
+    const frame = document.getElementById("instance-frame");
+    instanceFrameUrl = "";
+    if (frame) frame.src = "about:blank";
+    if (shell) {
+      shell.classList.add("hidden");
+      shell.setAttribute("aria-hidden", "true");
+    }
+    document.body.classList.remove("hub-instance-frame-open");
+  }
+
+  /** @deprecated use openInstance */
+  async function openInstanceInBrowser(exchangeId, nextPath) {
+    return openInstance(exchangeId, nextPath, { newTab: false });
+  }
+
   async function initAuth() {
     try {
       const r = await fetch("/api/auth/status");
@@ -379,7 +422,9 @@
       btn.onclick = (ev) => {
         ev.preventDefault();
         ev.stopPropagation();
-        openInstanceInBrowser(btn.dataset.exId, btn.dataset.next || "/");
+        openInstance(btn.dataset.exId, btn.dataset.next || "/", {
+          newTab: ev.ctrlKey || ev.metaKey,
+        });
       };
     });
     box.querySelectorAll(".btn-close-ex").forEach((btn) => {
@@ -928,6 +973,24 @@
     }
   }
 
+  function initInstanceFrame() {
+    const back = document.getElementById("instance-frame-back");
+    const refresh = document.getElementById("instance-frame-refresh");
+    const newTab = document.getElementById("instance-frame-newtab");
+    const frame = document.getElementById("instance-frame");
+    if (back) back.onclick = () => closeInstanceFrame();
+    if (refresh && frame) {
+      refresh.onclick = () => {
+        if (instanceFrameUrl) frame.src = instanceFrameUrl;
+      };
+    }
+    if (newTab) {
+      newTab.onclick = () => {
+        if (instanceFrameUrl) window.open(instanceFrameUrl, "_blank", "noopener");
+      };
+    }
+  }
+
   function initFullscreen() {
     const backdrop = document.getElementById("exchange-fullscreen-backdrop");
     if (backdrop) {
@@ -953,6 +1016,11 @@
     document.addEventListener("keydown", (ev) => {
       if (ev.key === "Escape") {
         closeTpslModal();
+        const shell = document.getElementById("instance-frame-shell");
+        if (shell && !shell.classList.contains("hidden")) {
+          closeInstanceFrame();
+          return;
+        }
         if (expandedExchangeId) {
           closeExchangeFullscreen();
           renderMonitorGrid(lastMonitorRows);
@@ -1261,6 +1329,7 @@
   };
 
   initTpslModal();
+  initInstanceFrame();
   initFullscreen();
   initMobileLayout();