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

Auto-size hub order popup iframe so trade form shows without scrollbars.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-25 23:22:49 +08:00
parent 1767566951
commit 95d5469d12
7 changed files with 105 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
embed_templates/embed_page_fragment.html
+2
View File
@@ -24,6 +24,7 @@
{% elif page == 'trade' %}
<div class="dual-panel-grid{% if order_popup %} order-popup-trade-grid{% endif %}" style="grid-column:1/-1">
<div class="card order-popup-form-card">
{% if not order_popup %}
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px">
<h2 style="margin-bottom:0">实盘下单监控</h2>
{% if focus_order_id %}
@@ -32,6 +33,7 @@
<span class="btn-del" style="background:#2f2f44;color:#9aa;cursor:not-allowed">暂无持仓可放大</span>
{% endif %}
</div>
{% endif %}
{% include order_rule_tips_tpl %}
<form id="add-order-form" action="/add_order" method="post" class="form-row" data-risk-percent="{{ risk_percent }}">
<input id="order-symbol" name="symbol" placeholder="BTC 或 BTC/USDT" required>
embed_templates/embed_shell.html
+5 -3
View File
@@ -21,9 +21,10 @@
data-price-refresh-ms="{{ price_refresh_seconds * 1000 }}"
>
{% if order_popup %}
<link rel="stylesheet" href="/static/embed_order_popup.css?v=1">
<link rel="stylesheet" href="/static/embed_order_popup.css?v=2">
{% endif %}
<div class="container{% if order_popup %} embed-order-popup-shell{% endif %}">
{% if not order_popup %}
<div class="header{% if order_popup %} embed-order-popup-head{% endif %}">
<h1>{% if order_popup %}{{ exchange_display }} · 实盘下单{% else %}加密货币｜交易监控 + AI复盘一体化{% endif %}</h1>
<div class="header-row">
@@ -43,6 +44,7 @@
</div>
</div>
</div>
{% endif %}
{% if not order_popup %}
<nav class="top-nav embed-top-nav" aria-label="实例导航">
<a href="/key_monitor" data-embed-tab="key_monitor" class="{% if initial_tab == 'key_monitor' %}active{% endif %}">关键位监控</a>
@@ -90,7 +92,7 @@
<div class="stat-item"><div class="label">交易日</div><div class="value">{{ trading_day }}</div></div>
<div class="stat-item"><div class="label">当日资金(交易账户)</div><div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div></div>
</div>
{% if include_transfer_block %}
{% if include_transfer_block and not order_popup %}
{% include 'gate_transfer_block.html' %}
{% endif %}
@@ -124,6 +126,6 @@
<script src="/static/manual_order_rr_preview.js?v=4"></script>
<script src="/static/key_monitor_form.js?v=1"></script>
{% include 'embed_boot_scripts.html' %}
<script src="/static/instance_embed.js?v=5"></script>
<script src="/static/instance_embed.js?v=6"></script>
</body>
</html>
manual_trading_hub/static/app.css
+11 -8
View File
@@ -2527,8 +2527,9 @@ button.btn-sm {
}
.order-popup-modal .order-popup-card {
width: min(920px, calc(100vw - 24px));
max-height: calc(100vh - 32px);
width: min(980px, calc(100vw - 20px));
max-width: none;
max-height: calc(100vh - 20px);
display: flex;
flex-direction: column;
padding: 0;
@@ -2536,7 +2537,7 @@ button.btn-sm {
}
.order-popup-head {
padding: 12px 14px;
padding: 10px 14px;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
}
@@ -2549,19 +2550,21 @@ button.btn-sm {
.order-popup-frame-wrap {
position: relative;
flex: 1;
min-height: 420px;
max-height: calc(100vh - 120px);
flex: 0 0 auto;
width: 100%;
min-height: 0;
overflow: hidden;
background: #0b0d14;
}
.order-popup-frame {
width: 100%;
height: 100%;
min-height: 420px;
height: 520px;
min-height: 0;
border: 0;
display: block;
background: #0b0d14;
overflow: hidden;
}
.order-popup-loading {
manual_trading_hub/static/app.js
+25 -1
View File
@@ -458,12 +458,30 @@
modal.classList.toggle("is-loading", !!loading);
}
function applyOrderPopupFrameHeight(height) {
const frame = document.getElementById("order-popup-frame");
const wrap = document.querySelector(".order-popup-frame-wrap");
if (!frame || !wrap) return;
const maxH = Math.max(320, window.innerHeight - 96);
const h = Math.min(Math.max(Number(height) || 0, 320), maxH);
frame.style.height = h + "px";
wrap.style.height = h + "px";
}
function resetOrderPopupFrameHeight() {
const frame = document.getElementById("order-popup-frame");
const wrap = document.querySelector(".order-popup-frame-wrap");
if (frame) frame.style.height = "";
if (wrap) wrap.style.height = "";
}
function closeOrderPopup() {
const modal = document.getElementById("order-popup-modal");
const frame = document.getElementById("order-popup-frame");
orderPopupUrl = "";
orderPopupCtx = null;
if (frame) frame.src = "about:blank";
resetOrderPopupFrameHeight();
if (modal) {
modal.classList.add("hidden");
modal.setAttribute("aria-hidden", "true");
@@ -556,7 +574,13 @@
window.__hubOrderPopupMsgBound = true;
window.addEventListener("message", (ev) => {
const d = ev.data;
if (!d || d.type !== "hub-order-popup-done") return;
if (!d || typeof d !== "object") return;
if (d.type === "hub-order-popup-resize") {
applyOrderPopupFrameHeight(d.height);
setOrderPopupLoading(false);
return;
}
if (d.type !== "hub-order-popup-done") return;
refreshMonitorBoardNow();
showToast(
d.message || (d.ok ? "开仓请求已提交，请查看监控区" : "开仓提交可能失败，请查看表单提示"),
manual_trading_hub/static/index.html
+1 -1
View File
@@ -1016,7 +1016,7 @@
<span class="instance-frame-spinner" aria-hidden="true"></span>
<span>加载实例下单页…</span>
</div>
<iframe id="order-popup-frame" class="order-popup-frame" title="实盘下单"></iframe>
<iframe id="order-popup-frame" class="order-popup-frame" title="实盘下单" scrolling="no"></iframe>
</div>
</div>
</div>
static/embed_order_popup.css
+33 -20
View File
@@ -1,24 +1,14 @@
/* 中控弹窗 iframe：仅保留实盘下单表单区 */
/* 中控弹窗 iframe：紧凑表单，无内部滚动条 */
html:has(body[data-order-popup="1"]),
body[data-order-popup="1"] {
overflow-x: hidden;
overflow: hidden !important;
height: auto !important;
}
body[data-order-popup="1"] .container.embed-order-popup-shell {
max-width: 100%;
padding: 10px 12px 16px;
}
body[data-order-popup="1"] .embed-order-popup-head {
margin-bottom: 8px;
}
body[data-order-popup="1"] .embed-order-popup-head h1 {
font-size: 1rem;
margin: 0;
}
body[data-order-popup="1"] .header-row {
margin-top: 6px;
padding: 8px 10px 10px;
overflow: hidden;
}
body[data-order-popup="1"] .embed-order-popup-hide {
@@ -32,12 +22,35 @@ body[data-order-popup="1"] .order-popup-trade-grid {
body[data-order-popup="1"] .order-popup-form-card {
margin: 0;
padding: 10px 12px 12px;
}
body[data-order-popup="1"] .order-popup-form-card h2 {
font-size: 0.95rem;
body[data-order-popup="1"] .order-popup-form-card .tip-collapse {
margin-bottom: 4px;
}
body[data-order-popup="1"] .order-popup-form-card > div:first-child span.btn-del {
display: none;
body[data-order-popup="1"] .order-popup-form-card .tip-collapse-summary {
padding: 6px 8px;
font-size: 12px;
}
body[data-order-popup="1"] #add-order-form {
gap: 6px 8px;
flex-wrap: wrap;
align-items: center;
}
body[data-order-popup="1"] #add-order-form input,
body[data-order-popup="1"] #add-order-form select,
body[data-order-popup="1"] #add-order-form button[type="submit"] {
max-width: 100%;
}
body[data-order-popup="1"] #add-order-form label,
body[data-order-popup="1"] #add-order-form > span {
font-size: 0.78rem !important;
}
body[data-order-popup="1"] .order-plan-preview-bar {
margin-top: 8px;
}
static/instance_embed.js
+28
View File
@@ -35,6 +35,22 @@
} catch (_) {}
}
function reportOrderPopupSize() {
if (!isOrderPopup()) return;
const root = document.querySelector(".embed-order-popup-shell") || document.body;
const h = Math.ceil(
Math.max(
root.scrollHeight,
root.offsetHeight,
document.documentElement.scrollHeight,
document.body.scrollHeight
)
);
try {
window.parent.postMessage({ type: "hub-order-popup-resize", height: h }, "*");
} catch (_) {}
}
function prefillOrderSymbolFromQuery() {
if (!isOrderPopup()) return;
let sym = "";
@@ -109,6 +125,7 @@
if (typeof global.refreshPriceSnapshotConditional === "function") {
global.refreshPriceSnapshotConditional();
}
reportOrderPopupSize();
}
function injectFragment(html) {
@@ -280,6 +297,17 @@
patchHardNavigations();
bindNav();
runPageInit(getTab());
reportOrderPopupSize();
if (isOrderPopup()) {
window.setTimeout(reportOrderPopupSize, 120);
window.setTimeout(reportOrderPopupSize, 450);
if (typeof ResizeObserver !== "undefined") {
const root = document.querySelector(".embed-order-popup-shell") || document.body;
try {
new ResizeObserver(() => reportOrderPopupSize()).observe(root);
} catch (_) {}
}
}
try {
window.parent.postMessage({ type: "instance-frame-ready" }, "*");
} catch (_) {}