From 91c8cd8c2a994b28b2784dd229d402ef16a94709 Mon Sep 17 00:00:00 2001 From: dekun Date: Thu, 11 Jun 2026 07:56:55 +0800 Subject: [PATCH] fix: redesign order monitor open form for clearer SL/TP inputs Co-authored-by: Cursor --- crypto_monitor_binance/templates/index.html | 47 +---- crypto_monitor_gate/templates/index.html | 47 +---- crypto_monitor_gate_bot/templates/index.html | 47 +---- crypto_monitor_okx/templates/index.html | 47 +---- static/instance_theme.css | 168 ++++++++++++++++++ .../order_monitor_open_form.html | 83 +++++++++ 6 files changed, 283 insertions(+), 156 deletions(-) create mode 100644 strategy_templates/order_monitor_open_form.html diff --git a/crypto_monitor_binance/templates/index.html b/crypto_monitor_binance/templates/index.html index 106a469..c1480b1 100644 --- a/crypto_monitor_binance/templates/index.html +++ b/crypto_monitor_binance/templates/index.html @@ -233,7 +233,7 @@ .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} - + @@ -355,38 +355,7 @@ -
- - - - - {% if position_sizing_mode != 'full_margin' %} - - {% endif %} - - - 成交价自动取交易所实时+成交回报 - - - - - - - -
+ {% include 'order_monitor_open_form.html' %}

实时持仓

@@ -1994,14 +1963,14 @@ function toggleSltpMode(){ if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; } const pct = mode === "pct"; const fixed = mode === "fixed_rr"; - slEl.style.display = pct ? "none" : ""; - tpEl.style.display = (pct || fixed) ? "none" : ""; - if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none"; + const price = mode === "price"; + document.querySelectorAll("#add-order-form [data-sltp-panel]").forEach(function(el){ + const panels = (el.getAttribute("data-sltp-panel") || "").trim().split(/\s+/); + el.style.display = panels.indexOf(mode) >= 0 ? "" : "none"; + }); slEl.required = !pct; - tpEl.required = !pct && !fixed; + tpEl.required = price; if(fixedRrEl) fixedRrEl.required = fixed; - slPctEl.style.display = pct ? "" : "none"; - tpPctEl.style.display = pct ? "" : "none"; slPctEl.required = pct; tpPctEl.required = pct; refreshOrderTpPreview(); diff --git a/crypto_monitor_gate/templates/index.html b/crypto_monitor_gate/templates/index.html index 934860a..411c357 100644 --- a/crypto_monitor_gate/templates/index.html +++ b/crypto_monitor_gate/templates/index.html @@ -233,7 +233,7 @@ .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} - + @@ -335,38 +335,7 @@ {% endif %}
{% include 'order_monitor_rule_tips_gate.html' %} -
- - - - - {% if position_sizing_mode != 'full_margin' %} - - {% endif %} - - - 成交价自动取交易所实时+成交回报 - - - - - - - -
+ {% include 'order_monitor_open_form.html' %}

实时持仓

@@ -1974,14 +1943,14 @@ function toggleSltpMode(){ if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; } const pct = mode === "pct"; const fixed = mode === "fixed_rr"; - slEl.style.display = pct ? "none" : ""; - tpEl.style.display = (pct || fixed) ? "none" : ""; - if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none"; + const price = mode === "price"; + document.querySelectorAll("#add-order-form [data-sltp-panel]").forEach(function(el){ + const panels = (el.getAttribute("data-sltp-panel") || "").trim().split(/\s+/); + el.style.display = panels.indexOf(mode) >= 0 ? "" : "none"; + }); slEl.required = !pct; - tpEl.required = !pct && !fixed; + tpEl.required = price; if(fixedRrEl) fixedRrEl.required = fixed; - slPctEl.style.display = pct ? "" : "none"; - tpPctEl.style.display = pct ? "" : "none"; slPctEl.required = pct; tpPctEl.required = pct; refreshOrderTpPreview(); diff --git a/crypto_monitor_gate_bot/templates/index.html b/crypto_monitor_gate_bot/templates/index.html index 934860a..411c357 100644 --- a/crypto_monitor_gate_bot/templates/index.html +++ b/crypto_monitor_gate_bot/templates/index.html @@ -233,7 +233,7 @@ .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} - + @@ -335,38 +335,7 @@ {% endif %}
{% include 'order_monitor_rule_tips_gate.html' %} -
- - - - - {% if position_sizing_mode != 'full_margin' %} - - {% endif %} - - - 成交价自动取交易所实时+成交回报 - - - - - - - -
+ {% include 'order_monitor_open_form.html' %}

实时持仓

@@ -1974,14 +1943,14 @@ function toggleSltpMode(){ if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; } const pct = mode === "pct"; const fixed = mode === "fixed_rr"; - slEl.style.display = pct ? "none" : ""; - tpEl.style.display = (pct || fixed) ? "none" : ""; - if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none"; + const price = mode === "price"; + document.querySelectorAll("#add-order-form [data-sltp-panel]").forEach(function(el){ + const panels = (el.getAttribute("data-sltp-panel") || "").trim().split(/\s+/); + el.style.display = panels.indexOf(mode) >= 0 ? "" : "none"; + }); slEl.required = !pct; - tpEl.required = !pct && !fixed; + tpEl.required = price; if(fixedRrEl) fixedRrEl.required = fixed; - slPctEl.style.display = pct ? "" : "none"; - tpPctEl.style.display = pct ? "" : "none"; slPctEl.required = pct; tpPctEl.required = pct; refreshOrderTpPreview(); diff --git a/crypto_monitor_okx/templates/index.html b/crypto_monitor_okx/templates/index.html index 7cc0e0e..80ec3e6 100644 --- a/crypto_monitor_okx/templates/index.html +++ b/crypto_monitor_okx/templates/index.html @@ -233,7 +233,7 @@ .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} - + @@ -364,38 +364,7 @@ -
- - - - - {% if position_sizing_mode != 'full_margin' %} - - {% endif %} - - - 成交价自动取交易所实时+成交回报 - - - - - - - -
+ {% include 'order_monitor_open_form.html' %}

实时持仓

@@ -2027,14 +1996,14 @@ function toggleSltpMode(){ if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; } const pct = mode === "pct"; const fixed = mode === "fixed_rr"; - slEl.style.display = pct ? "none" : ""; - tpEl.style.display = (pct || fixed) ? "none" : ""; - if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none"; + const price = mode === "price"; + document.querySelectorAll("#add-order-form [data-sltp-panel]").forEach(function(el){ + const panels = (el.getAttribute("data-sltp-panel") || "").trim().split(/\s+/); + el.style.display = panels.indexOf(mode) >= 0 ? "" : "none"; + }); slEl.required = !pct; - tpEl.required = !pct && !fixed; + tpEl.required = price; if(fixedRrEl) fixedRrEl.required = fixed; - slPctEl.style.display = pct ? "" : "none"; - tpPctEl.style.display = pct ? "" : "none"; slPctEl.required = pct; tpPctEl.required = pct; refreshOrderTpPreview(); diff --git a/static/instance_theme.css b/static/instance_theme.css index 8d5cbcf..1e6281b 100644 --- a/static/instance_theme.css +++ b/static/instance_theme.css @@ -992,3 +992,171 @@ html[data-theme="light"] .key-row-collapse.key-history-failed .key-history-outco border-color: rgba(192, 48, 48, 0.22) !important; } +/* 实盘下单监控：分组表单 */ +.order-open-form { + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 4px; +} + +.order-open-section { + display: flex; + flex-direction: column; + gap: 8px; + padding: 10px 12px; + border-radius: 8px; + border: 1px solid color-mix(in srgb, #3a4a66 55%, transparent); + background: color-mix(in srgb, #0f1420 88%, transparent); +} + +html[data-theme="light"] .order-open-section { + border-color: rgba(26, 40, 56, 0.14); + background: rgba(248, 250, 252, 0.92); +} + +.order-open-section-title { + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.06em; + color: #8fc8ff; + text-transform: uppercase; +} + +html[data-theme="light"] .order-open-section-title { + color: #2a5f8f; +} + +.order-open-grid { + display: grid; + gap: 8px 10px; + align-items: end; +} + +.order-open-grid-basic { + grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); +} + +.order-open-grid-sltp { + grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); +} + +.order-open-field { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; +} + +.order-open-field-wide { + grid-column: span 1; + min-width: 10.5rem; +} + +@media (min-width: 640px) { + .order-open-field-wide { + grid-column: span 2; + } +} + +.order-open-label { + font-size: 0.72rem; + color: #9aa3c7; + line-height: 1.2; +} + +html[data-theme="light"] .order-open-label { + color: #5a6478; +} + +.order-open-form input:not([type="checkbox"]), +.order-open-form select { + width: 100%; + min-width: 0; + max-width: 100%; + padding: 8px 10px; + border-radius: 6px; + border: 1px solid #3a4a66; + background: #0f1420; + color: #eee; + font-size: 0.86rem; + line-height: 1.35; +} + +html[data-theme="light"] .order-open-form input:not([type="checkbox"]), +html[data-theme="light"] .order-open-form select { + border-color: rgba(26, 40, 56, 0.18); + background: #fff; + color: #1a2838; +} + +.order-open-form select { + padding-right: 1.6rem; + text-overflow: ellipsis; +} + +.order-open-tp-preview { + display: none; + align-self: center; + font-size: 0.8rem; + color: #8fc8ff; + padding: 8px 0; + min-height: 2.2rem; +} + +.order-open-hint { + margin: 0; + font-size: 0.75rem; + color: #7d8aa8; + line-height: 1.4; +} + +.order-open-section-options { + gap: 6px; + border-style: dashed; +} + +.order-open-check { + display: flex; + align-items: flex-start; + gap: 8px; + font-size: 0.8rem; + color: #cfd3ef; + line-height: 1.45; + cursor: pointer; +} + +html[data-theme="light"] .order-open-check { + color: #3a4558; +} + +.order-open-check input { + margin-top: 0.2rem; + flex-shrink: 0; +} + +.order-open-actions { + display: flex; + justify-content: flex-end; +} + +.order-open-submit { + min-width: 11rem; + padding: 10px 18px; + border-radius: 8px; + border: none; + background: linear-gradient(135deg, #2d6a4f, #1f4f74); + color: #fff; + font-size: 0.92rem; + font-weight: 600; + cursor: pointer; +} + +.order-open-submit:hover { + filter: brightness(1.06); +} + +.order-open-form [data-sltp-panel] { + display: none; +} + diff --git a/strategy_templates/order_monitor_open_form.html b/strategy_templates/order_monitor_open_form.html new file mode 100644 index 0000000..4b150e9 --- /dev/null +++ b/strategy_templates/order_monitor_open_form.html @@ -0,0 +1,83 @@ +
+
+
品种与方向
+
+ + + + {% if position_sizing_mode != 'full_margin' %} + + {% endif %} +
+
+ +
+
止盈止损
+
+ + + + 预估止盈：— + + + +
+

成交价自动取交易所实时价与成交回报

+
+ +
+ + +
+ +
+ +
+