dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-02 13:38:44 +08:00
parent 73a51fd996
commit 21ef97cbdb
4 changed files with 356 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+87
View File
@@ -2060,6 +2060,93 @@ body.login-page {
margin-right: 4px;
}
.market-pos-panel {
flex: 0 0 auto;
padding: 6px 12px 8px;
border-bottom: 1px solid var(--border-soft);
background: rgba(12, 20, 32, 0.98);
font-size: 0.76rem;
}
.market-pos-panel.hidden {
display: none;
}
.market-pos-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
}
.market-pos-side {
padding: 1px 8px;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 600;
}
.market-pos-side.side-long {
background: rgba(0, 255, 157, 0.12);
border: 1px solid rgba(0, 255, 157, 0.35);
color: #00ff9d;
}
.market-pos-side.side-short {
background: rgba(255, 77, 109, 0.12);
border: 1px solid rgba(255, 77, 109, 0.35);
color: #ff4d6d;
}
.market-pos-clear {
margin-left: auto;
font-size: 0.72rem;
padding: 2px 8px;
}
.market-pos-orders {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
margin-top: 6px;
color: var(--muted);
}
.market-pos-orders-empty {
font-size: 0.72rem;
opacity: 0.75;
}
.market-pos-order {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-soft);
white-space: nowrap;
}
.market-pos-order-kind {
color: var(--accent);
font-size: 0.68rem;
}
.market-pos-order-label {
color: var(--text);
}
.market-pos-order-price {
color: #ffb84d;
font-family: var(--font-mono, monospace);
}
.market-pos-order-amt {
color: var(--muted);
font-size: 0.68rem;
}
.sym-link {
background: none;
border: none;
manual_trading_hub/static/app.js
+92 -6
View File
@@ -506,13 +506,97 @@
return (row && (row.key || row.id)) || exchangeId;
}
function openMarketForPosition(exchangeId, symbol, exchangeKey) {
function buildPositionMarketContext(pos, monitorOrder) {
const mo = monitorOrder || {};
const cond = condOrdersFromPosition(pos);
const reg = Array.isArray(pos.regular_orders) ? pos.regular_orders : [];
const guess = guessTpslFromCondOrders(pos.side, cond);
const entry = pos.entry_price != null ? pos.entry_price : mo.trigger_price;
const sl = mo.stop_loss != null ? mo.stop_loss : guess.sl;
const tp = mo.take_profit != null ? mo.take_profit : guess.tp;
const num = function (v) {
if (v == null || v === "") return null;
const n = Number(v);
return Number.isFinite(n) ? n : null;
};
const orders = [];
cond.forEach(function (o) {
orders.push({
kind: "条件",
label: o.label || "条件单",
price: num(o.trigger_price),
amount: num(o.amount),
});
});
reg.forEach(function (o) {
orders.push({
kind: "普通",
label: o.label || o.type || "委托",
price: num(o.price != null ? o.price : o.trigger_price),
amount: num(o.amount),
});
});
return {
side: (pos.side || "long").toLowerCase(),
entry: num(entry),
stop_loss: num(sl),
take_profit: num(tp),
contracts: num(pos.contracts),
orders: orders,
};
}
const HUB_MARKET_POS_CTX_KEY = "hubMarketPosContext";
function encodePosCtx(ctx) {
try {
return btoa(unescape(encodeURIComponent(JSON.stringify(ctx))));
} catch (e) {
return "";
}
}
function decodePosCtx(raw) {
if (!raw) return null;
try {
return JSON.parse(decodeURIComponent(escape(atob(raw))));
} catch (e) {
return null;
}
}
function marketOpenBtnAttrs(exchangeId, exchangeKey, symbol, pos, monitorOrder) {
const symAttr = esc(symbol || "").replace(/"/g, "&quot;");
const exKeyAttr = esc(exchangeKey || exchangeId || "").replace(/"/g, "&quot;");
const ctxEnc = esc(encodePosCtx(buildPositionMarketContext(pos, monitorOrder))).replace(/"/g, "&quot;");
return (
'data-ex-id="' +
esc(exchangeId) +
'" data-ex-key="' +
exKeyAttr +
'" data-symbol="' +
symAttr +
'" data-pos-ctx="' +
ctxEnc +
'"'
);
}
function openMarketForPosition(exchangeId, symbol, exchangeKey, posCtxRaw) {
const exKey = exchangeKey || resolveExchangeKey(exchangeId);
const sym = normalizeMarketSymbol(symbol);
if (!exKey || !sym) {
showToast("无法打开行情：缺少交易所或合约", true);
return;
}
const ctx = decodePosCtx(posCtxRaw);
if (ctx) {
ctx.symbol = sym;
ctx.exchange_key = exKey;
sessionStorage.setItem(HUB_MARKET_POS_CTX_KEY, JSON.stringify(ctx));
} else {
sessionStorage.removeItem(HUB_MARKET_POS_CTX_KEY);
}
if (expandedExchangeId) {
closeExchangeFullscreen();
}
@@ -529,7 +613,7 @@
btn.onclick = (ev) => {
ev.preventDefault();
ev.stopPropagation();
openMarketForPosition(btn.dataset.exId, btn.dataset.symbol, btn.dataset.exKey);
openMarketForPosition(btn.dataset.exId, btn.dataset.symbol, btn.dataset.exKey, btn.dataset.posCtx);
};
});
box.querySelectorAll(".btn-open-instance").forEach((btn) => {
@@ -744,10 +828,11 @@
meta.push(
`<span class="${beOn ? "pos-meta-on" : "pos-meta-off"}">移动保本:${beOn ? "开" : "关"}</span>`
);
const mktAttrs = marketOpenBtnAttrs(exchangeId, exchangeKey, symbol, pos, monitorOrder);
return `<div class="pos-card hub-pos-card">
<div class="pos-card-head">
<div class="pos-card-symbol">
<button type="button" class="btn-open-market sym-link pos-symbol-link" data-ex-id="${esc(exchangeId)}" data-ex-key="${exKeyAttr}" data-symbol="${symAttr}" title="打开行情区"><strong>${esc(symbol)}</strong></button>
<button type="button" class="btn-open-market sym-link pos-symbol-link" ${mktAttrs} title="打开行情区（含入场/止盈止损）"><strong>${esc(symbol)}</strong></button>
<span class="pos-side-badge ${sideCls}">${sideCn}</span>
</div>
<div class="pos-head-actions">
@@ -848,7 +933,7 @@
.join("");
}
function renderPositionBlock(exchangeId, exchangeKey, x) {
function renderPositionBlock(exchangeId, exchangeKey, x, monitorOrder) {
const symAttr = esc(x.symbol || "").replace(/"/g, "&quot;");
const exKeyAttr = esc(exchangeKey || exchangeId || "").replace(/"/g, "&quot;");
const sideAttr = esc((x.side || "").toLowerCase()).replace(/"/g, "&quot;");
@@ -858,11 +943,12 @@
const guess = guessTpslFromCondOrders(x.side, cond);
const slAttr = esc(String(guess.sl)).replace(/"/g, "&quot;");
const tpAttr = esc(String(guess.tp)).replace(/"/g, "&quot;");
const mktAttrs = marketOpenBtnAttrs(exchangeId, exchangeKey, x.symbol, x, monitorOrder);
return `<div class="pos-block">
<div class="table-scroll">
<table class="data-table"><thead><tr><th>合约</th><th>方向</th><th>张数</th><th>浮盈</th><th>操作</th></tr></thead><tbody>
<tr>
<td><button type="button" class="btn-open-market sym-link" data-ex-id="${esc(exchangeId)}" data-ex-key="${exKeyAttr}" data-symbol="${symAttr}" title="打开行情区">${esc(x.symbol)}</button></td>
<td><button type="button" class="btn-open-market sym-link" ${mktAttrs} title="打开行情区（含入场/止盈止损）">${esc(x.symbol)}</button></td>
<td class="${sideDirCls(x.side)}">${renderDirectionHtml(x.side)}</td>
<td>${fmt(x.contracts, 4)}</td>
<td class="${pnlCls(x.unrealized_pnl)}">${fmt(x.unrealized_pnl, 2)}</td>
@@ -886,7 +972,7 @@
</div>`;
inner += `<div class="section-title">交易所持仓 · ${pos.length} 仓</div>`;
if (pos.length) {
inner += pos.map((p) => renderPositionBlock(row.id, row.key || row.id, p)).join("");
inner += pos.map((p) => renderPositionBlock(row.id, row.key || row.id, p, findMonitorOrder(orders, p.symbol, p.side))).join("");
} else {
inner += '<div class="empty-hint">无持仓</div>';
}
manual_trading_hub/static/chart.js
+163
View File
@@ -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, "&amp;")
.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 = {
manual_trading_hub/static/index.html
+14 -3
View File
@@ -8,7 +8,7 @@
<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" media="print" onload="this.media='all'" />
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
<link rel="stylesheet" href="/assets/app.css?v=20260528-hub-pos-market" />
<link rel="stylesheet" href="/assets/app.css?v=20260528-hub-pos-market2" />
</head>
<body>
<div class="app-bg" aria-hidden="true"></div>
@@ -113,6 +113,17 @@
<span class="ohlcv-item"><span class="k">振幅</span><span id="mkt-amp">—</span></span>
</div>
</div>
<div id="market-pos-panel" class="market-pos-panel hidden" aria-label="持仓标记">
<div class="market-pos-row">
<span id="mkt-pos-side" class="market-pos-side"></span>
<span class="ohlcv-item"><span class="k">入场</span><span id="mkt-pos-entry">—</span></span>
<span class="ohlcv-item"><span class="k">止损</span><span id="mkt-pos-sl">—</span></span>
<span class="ohlcv-item"><span class="k">止盈</span><span id="mkt-pos-tp">—</span></span>
<span class="ohlcv-item"><span class="k">张数</span><span id="mkt-pos-size">—</span></span>
<button type="button" id="market-pos-clear" class="ghost market-pos-clear" title="清除 K 线上的持仓价格线">清除标记</button>
</div>
<div id="market-pos-orders" class="market-pos-orders"></div>
</div>
<div class="market-chart-body">
<div id="market-exchange-badge" class="market-exchange-badge" aria-hidden="true"></div>
<div id="market-chart" class="market-chart-host"></div>
@@ -193,7 +204,7 @@
<div id="toast"></div>
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="/assets/chart.js?v=20260528-hub-pos-market"></script>
<script src="/assets/app.js?v=20260528-hub-pos-market"></script>
<script src="/assets/chart.js?v=20260528-hub-pos-market2"></script>
<script src="/assets/app.js?v=20260528-hub-pos-market2"></script>
</body>
</html>