监控跳转行情区：展示入场价、止盈止损与委托单并在K线标注

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

manual_trading_hub/static/chart.js

@@ -38,6 +38,16 @@
   const elSymLabel = document.getElementById("mkt-symbol-label");
   const elTfLabel = document.getElementById("mkt-tf-label");
   const elPriceAuto = document.getElementById("market-price-auto");
+  const elPosPanel = document.getElementById("market-pos-panel");
+  const elPosSide = document.getElementById("mkt-pos-side");
+  const elPosEntry = document.getElementById("mkt-pos-entry");
+  const elPosSl = document.getElementById("mkt-pos-sl");
+  const elPosTp = document.getElementById("mkt-pos-tp");
+  const elPosSize = document.getElementById("mkt-pos-size");
+  const elPosOrders = document.getElementById("market-pos-orders");
+  const elPosClear = document.getElementById("market-pos-clear");
+
+  const HUB_MARKET_POS_CTX_KEY = "hubMarketPosContext";
 
   let chart = null;
   let candleSeries = null;
@@ -45,6 +55,8 @@
   let priceTick = null;
   let priceAutoScale = true;
   let rangeMarkers = [];
+  let positionLines = [];
+  let posContext = null;
   let currentPriceLine = null;
   let lastCandles = [];
   let candleByTime = {};
@@ -56,6 +68,151 @@
   let currentTf = "1d";
   let priceTagTimer = null;
 
+  function escHtml(s) {
+    return String(s || "")
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  function normalizeMarketSymbol(sym) {
+    const s = String(sym || "").trim().toUpperCase();
+    const m = s.match(/^([A-Z0-9]+)\/([A-Z0-9]+)(?::([A-Z0-9]+))?$/);
+    if (!m) return s;
+    return m[1] + "/" + m[2];
+  }
+
+  function loadPosContextFromStorage() {
+    try {
+      const raw = sessionStorage.getItem(HUB_MARKET_POS_CTX_KEY);
+      if (!raw) return null;
+      return JSON.parse(raw);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function posContextMatches(ctx, exKey, sym) {
+    if (!ctx) return false;
+    const ctxSym = normalizeMarketSymbol(ctx.symbol || "");
+    const ctxEx = String(ctx.exchange_key || "").trim();
+    return ctxSym === normalizeMarketSymbol(sym) && ctxEx === String(exKey || "").trim();
+  }
+
+  function clearPosPanel() {
+    if (elPosPanel) elPosPanel.classList.add("hidden");
+    if (elPosSide) {
+      elPosSide.textContent = "";
+      elPosSide.className = "market-pos-side";
+    }
+    ["entry", "sl", "tp", "size"].forEach(function (k) {
+      const el = { entry: elPosEntry, sl: elPosSl, tp: elPosTp, size: elPosSize }[k];
+      if (el) el.textContent = "—";
+    });
+    if (elPosOrders) elPosOrders.innerHTML = "";
+  }
+
+  function renderPosPanel(ctx) {
+    if (!elPosPanel || !ctx) {
+      clearPosPanel();
+      return;
+    }
+    elPosPanel.classList.remove("hidden");
+    if (elPosSide) {
+      const isShort = (ctx.side || "").toLowerCase() === "short";
+      elPosSide.textContent = isShort ? "空" : "多";
+      elPosSide.className = "market-pos-side " + (isShort ? "side-short" : "side-long");
+    }
+    if (elPosEntry) elPosEntry.textContent = ctx.entry != null ? fmtPrice(ctx.entry) : "—";
+    if (elPosSl) elPosSl.textContent = ctx.stop_loss != null ? fmtPrice(ctx.stop_loss) : "—";
+    if (elPosTp) elPosTp.textContent = ctx.take_profit != null ? fmtPrice(ctx.take_profit) : "—";
+    if (elPosSize) elPosSize.textContent = ctx.contracts != null ? String(ctx.contracts) : "—";
+    if (elPosOrders) {
+      const orders = Array.isArray(ctx.orders) ? ctx.orders : [];
+      if (!orders.length) {
+        elPosOrders.innerHTML = '<span class="market-pos-orders-empty">暂无委托单</span>';
+      } else {
+        elPosOrders.innerHTML = orders
+          .map(function (o) {
+            const price = o.price != null ? fmtPrice(o.price) : "—";
+            const amt = o.amount != null ? String(o.amount) : "";
+            return (
+              '<span class="market-pos-order">' +
+              '<span class="market-pos-order-kind">' +
+              escHtml(o.kind || "") +
+              "</span>" +
+              '<span class="market-pos-order-label">' +
+              escHtml(o.label || "") +
+              "</span>" +
+              '<span class="market-pos-order-price">' +
+              price +
+              "</span>" +
+              (amt ? '<span class="market-pos-order-amt">×' + escHtml(amt) + "</span>" : "") +
+              "</span>"
+            );
+          })
+          .join("");
+      }
+    }
+  }
+
+  function clearPositionLines() {
+    positionLines.forEach(function (m) {
+      try {
+        candleSeries.removePriceLine(m);
+      } catch (e) {}
+    });
+    positionLines = [];
+  }
+
+  function updatePositionLines() {
+    clearPositionLines();
+    if (!candleSeries || !posContext) return;
+    const specs = [
+      { price: posContext.entry, color: "#5b9cf5", title: "入场" },
+      { price: posContext.stop_loss, color: "#ff4d6d", title: "止损" },
+      { price: posContext.take_profit, color: "#00ff9d", title: "止盈" },
+    ];
+    specs.forEach(function (s) {
+      if (s.price == null || !Number.isFinite(Number(s.price))) return;
+      positionLines.push(
+        candleSeries.createPriceLine({
+          price: Number(s.price),
+          color: s.color,
+          lineWidth: 1,
+          lineStyle: 2,
+          axisLabelVisible: true,
+          title: s.title,
+        })
+      );
+    });
+  }
+
+  function clearPosContext() {
+    posContext = null;
+    try {
+      sessionStorage.removeItem(HUB_MARKET_POS_CTX_KEY);
+    } catch (e) {}
+    clearPosPanel();
+    clearPositionLines();
+  }
+
+  function applyPosContext(ctx) {
+    posContext = ctx;
+    renderPosPanel(ctx);
+    updatePositionLines();
+  }
+
+  function syncPosContextForView(exKey, sym) {
+    const stored = loadPosContextFromStorage();
+    if (stored && posContextMatches(stored, exKey, sym)) {
+      applyPosContext(stored);
+      return;
+    }
+    clearPosContext();
+  }
+
   function fmtVol(v) {
     if (v == null || Number.isNaN(Number(v))) return "-";
     const n = Number(v);
@@ -553,6 +710,7 @@
       }
       applyPriceAutoScale();
       updateVisibleRangeMarkers();
+      syncPosContextForView(exKey, sym);
       showLatestOhlcv();
 
       const limit = data.limit || lastCandles.length;
@@ -620,6 +778,11 @@
         applyPriceAutoScale();
       });
     }
+    if (elPosClear) {
+      elPosClear.addEventListener("click", function () {
+        clearPosContext();
+      });
+    }
   }
 
   window.hubMarketChart = {