中控增加条件单

2026-05-24 07:35:48 +08:00
parent 19ac702e5a
commit a3218f4fbd
7 changed files with 685 additions and 21 deletions
@@ -545,6 +545,55 @@ button:disabled {
  margin-top: 0;
 }

+.pos-block {
+  margin-bottom: 14px;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed var(--border-soft);
+}
+
+.pos-block:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.pos-orders {
+  margin: 8px 0 0;
+  padding: 8px 10px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  border: 1px solid var(--border-soft);
+}
+
+.pos-orders-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.pos-orders-title {
+  font-size: 10px;
+  color: var(--muted);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.data-table-sub {
+  font-size: 10px;
+}
+
+.data-table-sub th,
+.data-table-sub td {
+  padding: 5px 6px;
+}
+
+.order-empty {
+  font-size: 11px;
+  color: var(--muted);
+  padding: 6px 4px 8px;
+}
+
 .data-table {
  width: 100%;
  border-collapse: collapse;
@@ -136,11 +136,124 @@
        btn.onclick = () =>
          closeOnePosition(btn.dataset.exId, btn.dataset.symbol, btn.dataset.side);
      });
+      box.querySelectorAll(".btn-cancel-order").forEach((btn) => {
+        btn.onclick = () =>
+          cancelOneOrder(
+            btn.dataset.exId,
+            btn.dataset.symbol,
+            btn.dataset.orderId,
+            btn.dataset.channel
+          );
+      });
+      box.querySelectorAll(".btn-cancel-cond-all").forEach((btn) => {
+        btn.onclick = () =>
+          cancelSymbolOrders(btn.dataset.exId, btn.dataset.symbol, "conditional");
+      });
    } catch (e) {
      box.innerHTML = `<div class="err">${esc(e)}</div>`;
    }
  }

+  function renderOrderRows(exchangeId, symbol, orders, kind) {
+    if (!orders || !orders.length) {
+      const hint =
+        kind === "conditional"
+          ? "暂无条件单（止盈/止损等）"
+          : "暂无普通委托";
+      return `<div class="order-empty">${hint}</div>`;
+    }
+    const symAttr = esc(symbol || "").replace(/"/g, "&quot;");
+    const rows = orders
+      .map((o) => {
+        const oidAttr = esc(o.id || "").replace(/"/g, "&quot;");
+        const chAttr = esc(o.channel || "regular").replace(/"/g, "&quot;");
+        const trig =
+          o.trigger_price != null ? fmt(o.trigger_price, 4) : o.price != null ? fmt(o.price, 4) : "—";
+        return `<tr>
+          <td>${esc(o.label || o.type || "委托")}</td>
+          <td>${fmt(o.amount, 4)}</td>
+          <td>${trig}</td>
+          <td class="td-actions"><button type="button" class="btn-cancel-order ghost" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}" data-order-id="${oidAttr}" data-channel="${chAttr}">撤单</button></td>
+        </tr>`;
+      })
+      .join("");
+    return `<table class="data-table data-table-sub"><thead><tr><th>类型</th><th>数量</th><th>触发/价格</th><th>操作</th></tr></thead><tbody>${rows}</tbody></table>`;
+  }
+
+  function renderPositionBlock(exchangeId, x) {
+    const symAttr = esc(x.symbol || "").replace(/"/g, "&quot;");
+    const sideAttr = esc((x.side || "").toLowerCase()).replace(/"/g, "&quot;");
+    const cond = Array.isArray(x.conditional_orders) ? x.conditional_orders : [];
+    const reg = Array.isArray(x.regular_orders) ? x.regular_orders : [];
+    const condAllBtn =
+      cond.length > 0
+        ? `<button type="button" class="btn-cancel-cond-all ghost" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}">撤销全部条件单</button>`
+        : "";
+    return `<div class="pos-block">
+      <table class="data-table"><thead><tr><th>合约</th><th>方向</th><th>张数</th><th>浮盈</th><th>操作</th></tr></thead><tbody>
+        <tr>
+          <td>${esc(x.symbol)}</td>
+          <td>${esc(x.side)}</td>
+          <td>${fmt(x.contracts, 4)}</td>
+          <td class="${pnlCls(x.unrealized_pnl)}">${fmt(x.unrealized_pnl, 4)}</td>
+          <td class="td-actions"><button type="button" class="btn-close-pos danger" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}" data-side="${sideAttr}">平仓</button></td>
+        </tr>
+      </tbody></table>
+      <div class="pos-orders">
+        <div class="pos-orders-head">
+          <span class="pos-orders-title">条件单 · ${cond.length}</span>
+          ${condAllBtn}
+        </div>
+        ${renderOrderRows(exchangeId, x.symbol, cond, "conditional")}
+        <div class="pos-orders-head" style="margin-top:10px">
+          <span class="pos-orders-title">普通委托 · ${reg.length}</span>
+        </div>
+        ${renderOrderRows(exchangeId, x.symbol, reg, "limit")}
+      </div>
+    </div>`;
+  }
+
+  async function cancelOneOrder(exchangeId, symbol, orderId, channel) {
+    if (!confirm(`撤销委托 ${symbol} #${orderId}？`)) return;
+    try {
+      const r = await apiFetch("/api/orders/" + encodeURIComponent(exchangeId) + "/cancel", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ symbol, order_id: orderId, channel: channel || "regular" }),
+      });
+      const j = await r.json();
+      const pl = j.payload || {};
+      const ok = j.ok && pl.ok !== false;
+      showToast(ok ? "已撤单" : pl.error || JSON.stringify(j), !ok);
+      loadMonitorBoard();
+    } catch (e) {
+      showToast(String(e), true);
+    }
+  }
+
+  async function cancelSymbolOrders(exchangeId, symbol, scope) {
+    const label = scope === "conditional" ? "全部条件单" : "全部委托";
+    if (!confirm(`确认撤销 ${symbol} 的${label}？`)) return;
+    try {
+      const r = await apiFetch(
+        "/api/orders/" + encodeURIComponent(exchangeId) + "/cancel-symbol",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ symbol, scope }),
+        }
+      );
+      const j = await r.json();
+      const pl = j.payload || {};
+      const ok = j.ok && pl.ok !== false;
+      const n = pl.cancelled_count != null ? pl.cancelled_count : "?";
+      showToast(ok ? `已撤销 ${n} 笔` : pl.error || JSON.stringify(j), !ok);
+      loadMonitorBoard();
+    } catch (e) {
+      showToast(String(e), true);
+    }
+  }
+
  function renderMonitorCard(row) {
    const ag = row.agent || {};
    const pos = Array.isArray(ag.positions) ? ag.positions : [];
@@ -168,20 +281,7 @@
      </div>`;
      inner += `<div class="section-title">交易所持仓</div>`;
      if (pos.length) {
-        const posRows = pos
-          .map((x) => {
-            const symAttr = esc(x.symbol || "").replace(/"/g, "&quot;");
-            const sideAttr = esc((x.side || "").toLowerCase()).replace(/"/g, "&quot;");
-            return `<tr>
-              <td>${esc(x.symbol)}</td>
-              <td>${esc(x.side)}</td>
-              <td>${fmt(x.contracts, 4)}</td>
-              <td class="${pnlCls(x.unrealized_pnl)}">${fmt(x.unrealized_pnl, 4)}</td>
-              <td class="td-actions"><button type="button" class="btn-close-pos danger" data-ex-id="${esc(row.id)}" data-symbol="${symAttr}" data-side="${sideAttr}">平仓</button></td>
-            </tr>`;
-          })
-          .join("");
-        inner += `<table class="data-table"><thead><tr><th>合约</th><th>方向</th><th>张数</th><th>浮盈</th><th>操作</th></tr></thead><tbody>${posRows}</tbody></table>`;
+        inner += pos.map((x) => renderPositionBlock(row.id, x)).join("");
      } else {
        inner += `<div class="empty-hint">无持仓</div>`;
      }
@@ -7,7 +7,7 @@
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="/assets/app.css?v=20260522-close-pos" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260524-open-orders" />
 </head>
 <body>
  <div class="app-bg" aria-hidden="true"></div>
@@ -80,6 +80,6 @@
  </div>

  <div id="toast"></div>
-  <script src="/assets/app.js?v=20260522-close-pos"></script>
+  <script src="/assets/app.js?v=20260524-open-orders"></script>
 </body>
 </html>