fix: redesign order monitor open form for clearer SL/TP inputs
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -233,7 +233,7 @@
|
|||||||
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
|
.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}
|
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="/static/instance_theme.css?v=13">
|
<link rel="stylesheet" href="/static/instance_theme.css?v=14">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body data-page="{{ page }}">
|
<body data-page="{{ page }}">
|
||||||
@@ -355,38 +355,7 @@
|
|||||||
</select>
|
</select>
|
||||||
<button type="submit">手动划转</button>
|
<button type="submit">手动划转</button>
|
||||||
</form>
|
</form>
|
||||||
<form id="add-order-form" action="/add_order" method="post" class="form-row">
|
{% include 'order_monitor_open_form.html' %}
|
||||||
<input id="order-symbol" name="symbol" placeholder="BTC 或 BTC/USDT" required>
|
|
||||||
<select id="order-direction" name="direction" required>
|
|
||||||
<option value="">方向</option><option value="long">做多</option><option value="short">做空</option>
|
|
||||||
</select>
|
|
||||||
<select id="sltp-mode" name="sltp_mode">
|
|
||||||
<option value="fixed_rr" selected>止盈止损：固定盈亏比</option>
|
|
||||||
<option value="price">止盈止损：价格模式</option>
|
|
||||||
<option value="pct">止盈止损：百分比模式</option>
|
|
||||||
</select>
|
|
||||||
<select name="trade_style" required>
|
|
||||||
<option value="trend">趋势单</option>
|
|
||||||
<option value="swing">波段单</option>
|
|
||||||
</select>
|
|
||||||
{% if position_sizing_mode != 'full_margin' %}
|
|
||||||
<input id="order-leverage" name="leverage" type="number" min="1" step="1" placeholder="杠杆(可选)">
|
|
||||||
{% endif %}
|
|
||||||
<label style="display:flex;align-items:center;gap:4px;font-size:.82rem;color:#cfd3ef">
|
|
||||||
<input type="checkbox" name="breakeven_enabled" value="1" checked> 启用移动保本（关闭则仅保留初始止损与交易所挂单）
|
|
||||||
</label>
|
|
||||||
<label style="display:flex;align-items:center;gap:4px;font-size:.82rem;color:#cfd3ef">
|
|
||||||
<input type="checkbox" name="order_chart" value="true"> 开仓后生成多周期K线图（各周期100根，含开平仓标记）
|
|
||||||
</label>
|
|
||||||
<span style="display:flex;align-items:center;padding:0 10px;font-size:.8rem;color:#8fc8ff">成交价自动取交易所实时+成交回报</span>
|
|
||||||
<input id="order-sl" name="sl" step="any" placeholder="止损价格" required>
|
|
||||||
<input id="order-fixed-rr" name="fixed_rr" type="number" min="0.01" step="0.01" placeholder="盈亏比(默认1.5)" value="1.5" title="止盈距离=止损距离×盈亏比">
|
|
||||||
<span id="order-tp-preview" style="display:none;font-size:.8rem;color:#8fc8ff;align-self:center">预估止盈：—</span>
|
|
||||||
<input id="order-tp" name="tgt" step="any" placeholder="止盈价格" style="display:none">
|
|
||||||
<input id="order-sl-pct" name="sl_pct" type="number" min="0.01" step="0.01" placeholder="止损%" style="display:none">
|
|
||||||
<input id="order-tp-pct" name="tp_pct" type="number" min="0.01" step="0.01" placeholder="止盈%" style="display:none">
|
|
||||||
<button type="submit">{{ open_position_button_label }}</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h2 style="margin-bottom:8px">实时持仓</h2>
|
<h2 style="margin-bottom:8px">实时持仓</h2>
|
||||||
@@ -1994,14 +1963,14 @@ function toggleSltpMode(){
|
|||||||
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
|
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
|
||||||
const pct = mode === "pct";
|
const pct = mode === "pct";
|
||||||
const fixed = mode === "fixed_rr";
|
const fixed = mode === "fixed_rr";
|
||||||
slEl.style.display = pct ? "none" : "";
|
const price = mode === "price";
|
||||||
tpEl.style.display = (pct || fixed) ? "none" : "";
|
document.querySelectorAll("#add-order-form [data-sltp-panel]").forEach(function(el){
|
||||||
if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none";
|
const panels = (el.getAttribute("data-sltp-panel") || "").trim().split(/\s+/);
|
||||||
|
el.style.display = panels.indexOf(mode) >= 0 ? "" : "none";
|
||||||
|
});
|
||||||
slEl.required = !pct;
|
slEl.required = !pct;
|
||||||
tpEl.required = !pct && !fixed;
|
tpEl.required = price;
|
||||||
if(fixedRrEl) fixedRrEl.required = fixed;
|
if(fixedRrEl) fixedRrEl.required = fixed;
|
||||||
slPctEl.style.display = pct ? "" : "none";
|
|
||||||
tpPctEl.style.display = pct ? "" : "none";
|
|
||||||
slPctEl.required = pct;
|
slPctEl.required = pct;
|
||||||
tpPctEl.required = pct;
|
tpPctEl.required = pct;
|
||||||
refreshOrderTpPreview();
|
refreshOrderTpPreview();
|
||||||
|
|||||||
@@ -233,7 +233,7 @@
|
|||||||
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
|
.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}
|
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="/static/instance_theme.css?v=13">
|
<link rel="stylesheet" href="/static/instance_theme.css?v=14">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body data-page="{{ page }}">
|
<body data-page="{{ page }}">
|
||||||
@@ -335,38 +335,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% include 'order_monitor_rule_tips_gate.html' %}
|
{% include 'order_monitor_rule_tips_gate.html' %}
|
||||||
<form id="add-order-form" action="/add_order" method="post" class="form-row">
|
{% include 'order_monitor_open_form.html' %}
|
||||||
<input id="order-symbol" name="symbol" placeholder="BTC 或 BTC/USDT" required>
|
|
||||||
<select id="order-direction" name="direction" required>
|
|
||||||
<option value="">方向</option><option value="long">做多</option><option value="short">做空</option>
|
|
||||||
</select>
|
|
||||||
<select id="sltp-mode" name="sltp_mode">
|
|
||||||
<option value="fixed_rr" selected>止盈止损：固定盈亏比</option>
|
|
||||||
<option value="price">止盈止损：价格模式</option>
|
|
||||||
<option value="pct">止盈止损：百分比模式</option>
|
|
||||||
</select>
|
|
||||||
<select name="trade_style" required>
|
|
||||||
<option value="trend">趋势单</option>
|
|
||||||
<option value="swing">波段单</option>
|
|
||||||
</select>
|
|
||||||
{% if position_sizing_mode != 'full_margin' %}
|
|
||||||
<input id="order-leverage" name="leverage" type="number" min="1" step="1" placeholder="杠杆(可选)">
|
|
||||||
{% endif %}
|
|
||||||
<label style="display:flex;align-items:center;gap:4px;font-size:.82rem;color:#cfd3ef">
|
|
||||||
<input type="checkbox" name="breakeven_enabled" value="1" checked> 启用移动保本（关闭则仅保留初始止损与交易所挂单）
|
|
||||||
</label>
|
|
||||||
<label style="display:flex;align-items:center;gap:4px;font-size:.82rem;color:#cfd3ef">
|
|
||||||
<input type="checkbox" name="order_chart" value="true"> 开仓后生成多周期K线图（各周期100根，含开平仓标记）
|
|
||||||
</label>
|
|
||||||
<span style="display:flex;align-items:center;padding:0 10px;font-size:.8rem;color:#8fc8ff">成交价自动取交易所实时+成交回报</span>
|
|
||||||
<input id="order-sl" name="sl" step="any" placeholder="止损价格" required>
|
|
||||||
<input id="order-fixed-rr" name="fixed_rr" type="number" min="0.01" step="0.01" placeholder="盈亏比(默认1.5)" value="1.5" title="止盈距离=止损距离×盈亏比">
|
|
||||||
<span id="order-tp-preview" style="display:none;font-size:.8rem;color:#8fc8ff;align-self:center">预估止盈：—</span>
|
|
||||||
<input id="order-tp" name="tgt" step="any" placeholder="止盈价格" style="display:none">
|
|
||||||
<input id="order-sl-pct" name="sl_pct" type="number" min="0.01" step="0.01" placeholder="止损%" style="display:none">
|
|
||||||
<input id="order-tp-pct" name="tp_pct" type="number" min="0.01" step="0.01" placeholder="止盈%" style="display:none">
|
|
||||||
<button type="submit">{{ open_position_button_label }}</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h2 style="margin-bottom:8px">实时持仓</h2>
|
<h2 style="margin-bottom:8px">实时持仓</h2>
|
||||||
@@ -1974,14 +1943,14 @@ function toggleSltpMode(){
|
|||||||
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
|
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
|
||||||
const pct = mode === "pct";
|
const pct = mode === "pct";
|
||||||
const fixed = mode === "fixed_rr";
|
const fixed = mode === "fixed_rr";
|
||||||
slEl.style.display = pct ? "none" : "";
|
const price = mode === "price";
|
||||||
tpEl.style.display = (pct || fixed) ? "none" : "";
|
document.querySelectorAll("#add-order-form [data-sltp-panel]").forEach(function(el){
|
||||||
if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none";
|
const panels = (el.getAttribute("data-sltp-panel") || "").trim().split(/\s+/);
|
||||||
|
el.style.display = panels.indexOf(mode) >= 0 ? "" : "none";
|
||||||
|
});
|
||||||
slEl.required = !pct;
|
slEl.required = !pct;
|
||||||
tpEl.required = !pct && !fixed;
|
tpEl.required = price;
|
||||||
if(fixedRrEl) fixedRrEl.required = fixed;
|
if(fixedRrEl) fixedRrEl.required = fixed;
|
||||||
slPctEl.style.display = pct ? "" : "none";
|
|
||||||
tpPctEl.style.display = pct ? "" : "none";
|
|
||||||
slPctEl.required = pct;
|
slPctEl.required = pct;
|
||||||
tpPctEl.required = pct;
|
tpPctEl.required = pct;
|
||||||
refreshOrderTpPreview();
|
refreshOrderTpPreview();
|
||||||
|
|||||||
@@ -233,7 +233,7 @@
|
|||||||
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
|
.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}
|
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="/static/instance_theme.css?v=13">
|
<link rel="stylesheet" href="/static/instance_theme.css?v=14">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body data-page="{{ page }}">
|
<body data-page="{{ page }}">
|
||||||
@@ -335,38 +335,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% include 'order_monitor_rule_tips_gate.html' %}
|
{% include 'order_monitor_rule_tips_gate.html' %}
|
||||||
<form id="add-order-form" action="/add_order" method="post" class="form-row">
|
{% include 'order_monitor_open_form.html' %}
|
||||||
<input id="order-symbol" name="symbol" placeholder="BTC 或 BTC/USDT" required>
|
|
||||||
<select id="order-direction" name="direction" required>
|
|
||||||
<option value="">方向</option><option value="long">做多</option><option value="short">做空</option>
|
|
||||||
</select>
|
|
||||||
<select id="sltp-mode" name="sltp_mode">
|
|
||||||
<option value="fixed_rr" selected>止盈止损：固定盈亏比</option>
|
|
||||||
<option value="price">止盈止损：价格模式</option>
|
|
||||||
<option value="pct">止盈止损：百分比模式</option>
|
|
||||||
</select>
|
|
||||||
<select name="trade_style" required>
|
|
||||||
<option value="trend">趋势单</option>
|
|
||||||
<option value="swing">波段单</option>
|
|
||||||
</select>
|
|
||||||
{% if position_sizing_mode != 'full_margin' %}
|
|
||||||
<input id="order-leverage" name="leverage" type="number" min="1" step="1" placeholder="杠杆(可选)">
|
|
||||||
{% endif %}
|
|
||||||
<label style="display:flex;align-items:center;gap:4px;font-size:.82rem;color:#cfd3ef">
|
|
||||||
<input type="checkbox" name="breakeven_enabled" value="1" checked> 启用移动保本（关闭则仅保留初始止损与交易所挂单）
|
|
||||||
</label>
|
|
||||||
<label style="display:flex;align-items:center;gap:4px;font-size:.82rem;color:#cfd3ef">
|
|
||||||
<input type="checkbox" name="order_chart" value="true"> 开仓后生成多周期K线图（各周期100根，含开平仓标记）
|
|
||||||
</label>
|
|
||||||
<span style="display:flex;align-items:center;padding:0 10px;font-size:.8rem;color:#8fc8ff">成交价自动取交易所实时+成交回报</span>
|
|
||||||
<input id="order-sl" name="sl" step="any" placeholder="止损价格" required>
|
|
||||||
<input id="order-fixed-rr" name="fixed_rr" type="number" min="0.01" step="0.01" placeholder="盈亏比(默认1.5)" value="1.5" title="止盈距离=止损距离×盈亏比">
|
|
||||||
<span id="order-tp-preview" style="display:none;font-size:.8rem;color:#8fc8ff;align-self:center">预估止盈：—</span>
|
|
||||||
<input id="order-tp" name="tgt" step="any" placeholder="止盈价格" style="display:none">
|
|
||||||
<input id="order-sl-pct" name="sl_pct" type="number" min="0.01" step="0.01" placeholder="止损%" style="display:none">
|
|
||||||
<input id="order-tp-pct" name="tp_pct" type="number" min="0.01" step="0.01" placeholder="止盈%" style="display:none">
|
|
||||||
<button type="submit">{{ open_position_button_label }}</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h2 style="margin-bottom:8px">实时持仓</h2>
|
<h2 style="margin-bottom:8px">实时持仓</h2>
|
||||||
@@ -1974,14 +1943,14 @@ function toggleSltpMode(){
|
|||||||
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
|
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
|
||||||
const pct = mode === "pct";
|
const pct = mode === "pct";
|
||||||
const fixed = mode === "fixed_rr";
|
const fixed = mode === "fixed_rr";
|
||||||
slEl.style.display = pct ? "none" : "";
|
const price = mode === "price";
|
||||||
tpEl.style.display = (pct || fixed) ? "none" : "";
|
document.querySelectorAll("#add-order-form [data-sltp-panel]").forEach(function(el){
|
||||||
if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none";
|
const panels = (el.getAttribute("data-sltp-panel") || "").trim().split(/\s+/);
|
||||||
|
el.style.display = panels.indexOf(mode) >= 0 ? "" : "none";
|
||||||
|
});
|
||||||
slEl.required = !pct;
|
slEl.required = !pct;
|
||||||
tpEl.required = !pct && !fixed;
|
tpEl.required = price;
|
||||||
if(fixedRrEl) fixedRrEl.required = fixed;
|
if(fixedRrEl) fixedRrEl.required = fixed;
|
||||||
slPctEl.style.display = pct ? "" : "none";
|
|
||||||
tpPctEl.style.display = pct ? "" : "none";
|
|
||||||
slPctEl.required = pct;
|
slPctEl.required = pct;
|
||||||
tpPctEl.required = pct;
|
tpPctEl.required = pct;
|
||||||
refreshOrderTpPreview();
|
refreshOrderTpPreview();
|
||||||
|
|||||||
@@ -233,7 +233,7 @@
|
|||||||
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
|
.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}
|
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="/static/instance_theme.css?v=13">
|
<link rel="stylesheet" href="/static/instance_theme.css?v=14">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body data-page="{{ page }}">
|
<body data-page="{{ page }}">
|
||||||
@@ -364,38 +364,7 @@
|
|||||||
</select>
|
</select>
|
||||||
<button type="submit">手动划转</button>
|
<button type="submit">手动划转</button>
|
||||||
</form>
|
</form>
|
||||||
<form id="add-order-form" action="/add_order" method="post" class="form-row">
|
{% include 'order_monitor_open_form.html' %}
|
||||||
<input id="order-symbol" name="symbol" placeholder="BTC 或 BTC/USDT" required>
|
|
||||||
<select id="order-direction" name="direction" required>
|
|
||||||
<option value="">方向</option><option value="long">做多</option><option value="short">做空</option>
|
|
||||||
</select>
|
|
||||||
<select id="sltp-mode" name="sltp_mode">
|
|
||||||
<option value="fixed_rr" selected>止盈止损：固定盈亏比</option>
|
|
||||||
<option value="price">止盈止损：价格模式</option>
|
|
||||||
<option value="pct">止盈止损：百分比模式</option>
|
|
||||||
</select>
|
|
||||||
<select name="trade_style" required>
|
|
||||||
<option value="trend">趋势单</option>
|
|
||||||
<option value="swing">波段单</option>
|
|
||||||
</select>
|
|
||||||
{% if position_sizing_mode != 'full_margin' %}
|
|
||||||
<input id="order-leverage" name="leverage" type="number" min="1" step="1" placeholder="杠杆(可选)">
|
|
||||||
{% endif %}
|
|
||||||
<label style="display:flex;align-items:center;gap:4px;font-size:.82rem;color:#cfd3ef">
|
|
||||||
<input type="checkbox" name="breakeven_enabled" value="1" checked> 启用移动保本（关闭则仅保留初始止损与交易所挂单）
|
|
||||||
</label>
|
|
||||||
<label style="display:flex;align-items:center;gap:4px;font-size:.82rem;color:#cfd3ef">
|
|
||||||
<input type="checkbox" name="order_chart" value="true"> 开仓后生成多周期K线图（各周期100根，含开平仓标记）
|
|
||||||
</label>
|
|
||||||
<span style="display:flex;align-items:center;padding:0 10px;font-size:.8rem;color:#8fc8ff">成交价自动取交易所实时+成交回报</span>
|
|
||||||
<input id="order-sl" name="sl" step="any" placeholder="止损价格" required>
|
|
||||||
<input id="order-fixed-rr" name="fixed_rr" type="number" min="0.01" step="0.01" placeholder="盈亏比(默认1.5)" value="1.5" title="止盈距离=止损距离×盈亏比">
|
|
||||||
<span id="order-tp-preview" style="display:none;font-size:.8rem;color:#8fc8ff;align-self:center">预估止盈：—</span>
|
|
||||||
<input id="order-tp" name="tgt" step="any" placeholder="止盈价格" style="display:none">
|
|
||||||
<input id="order-sl-pct" name="sl_pct" type="number" min="0.01" step="0.01" placeholder="止损%" style="display:none">
|
|
||||||
<input id="order-tp-pct" name="tp_pct" type="number" min="0.01" step="0.01" placeholder="止盈%" style="display:none">
|
|
||||||
<button type="submit">{{ open_position_button_label }}</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h2 style="margin-bottom:8px">实时持仓</h2>
|
<h2 style="margin-bottom:8px">实时持仓</h2>
|
||||||
@@ -2027,14 +1996,14 @@ function toggleSltpMode(){
|
|||||||
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
|
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
|
||||||
const pct = mode === "pct";
|
const pct = mode === "pct";
|
||||||
const fixed = mode === "fixed_rr";
|
const fixed = mode === "fixed_rr";
|
||||||
slEl.style.display = pct ? "none" : "";
|
const price = mode === "price";
|
||||||
tpEl.style.display = (pct || fixed) ? "none" : "";
|
document.querySelectorAll("#add-order-form [data-sltp-panel]").forEach(function(el){
|
||||||
if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none";
|
const panels = (el.getAttribute("data-sltp-panel") || "").trim().split(/\s+/);
|
||||||
|
el.style.display = panels.indexOf(mode) >= 0 ? "" : "none";
|
||||||
|
});
|
||||||
slEl.required = !pct;
|
slEl.required = !pct;
|
||||||
tpEl.required = !pct && !fixed;
|
tpEl.required = price;
|
||||||
if(fixedRrEl) fixedRrEl.required = fixed;
|
if(fixedRrEl) fixedRrEl.required = fixed;
|
||||||
slPctEl.style.display = pct ? "" : "none";
|
|
||||||
tpPctEl.style.display = pct ? "" : "none";
|
|
||||||
slPctEl.required = pct;
|
slPctEl.required = pct;
|
||||||
tpPctEl.required = pct;
|
tpPctEl.required = pct;
|
||||||
refreshOrderTpPreview();
|
refreshOrderTpPreview();
|
||||||
|
|||||||
@@ -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;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,83 @@
|
|||||||
|
<form id="add-order-form" action="/add_order" method="post" class="order-open-form">
|
||||||
|
<div class="order-open-section">
|
||||||
|
<div class="order-open-section-title">品种与方向</div>
|
||||||
|
<div class="order-open-grid order-open-grid-basic">
|
||||||
|
<label class="order-open-field">
|
||||||
|
<span class="order-open-label">合约</span>
|
||||||
|
<input id="order-symbol" name="symbol" placeholder="BTC 或 BTC/USDT" required>
|
||||||
|
</label>
|
||||||
|
<label class="order-open-field">
|
||||||
|
<span class="order-open-label">方向</span>
|
||||||
|
<select id="order-direction" name="direction" required>
|
||||||
|
<option value="">请选择</option>
|
||||||
|
<option value="long">做多</option>
|
||||||
|
<option value="short">做空</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label class="order-open-field">
|
||||||
|
<span class="order-open-label">风格</span>
|
||||||
|
<select name="trade_style" required>
|
||||||
|
<option value="trend">趋势单</option>
|
||||||
|
<option value="swing">波段单</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
{% if position_sizing_mode != 'full_margin' %}
|
||||||
|
<label class="order-open-field">
|
||||||
|
<span class="order-open-label">杠杆</span>
|
||||||
|
<input id="order-leverage" name="leverage" type="number" min="1" step="1" placeholder="可选">
|
||||||
|
</label>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="order-open-section">
|
||||||
|
<div class="order-open-section-title">止盈止损</div>
|
||||||
|
<div class="order-open-grid order-open-grid-sltp">
|
||||||
|
<label class="order-open-field order-open-field-wide">
|
||||||
|
<span class="order-open-label">方案</span>
|
||||||
|
<select id="sltp-mode" name="sltp_mode">
|
||||||
|
<option value="fixed_rr" selected>固定盈亏比</option>
|
||||||
|
<option value="price">价格模式</option>
|
||||||
|
<option value="pct">百分比模式</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label class="order-open-field" data-sltp-panel="price fixed_rr">
|
||||||
|
<span class="order-open-label">止损价</span>
|
||||||
|
<input id="order-sl" name="sl" step="any" placeholder="止损价格" required>
|
||||||
|
</label>
|
||||||
|
<label class="order-open-field" data-sltp-panel="fixed_rr">
|
||||||
|
<span class="order-open-label">盈亏比</span>
|
||||||
|
<input id="order-fixed-rr" name="fixed_rr" type="number" min="0.01" step="0.01" placeholder="默认 1.5" value="1.5" title="止盈距离=止损距离×盈亏比">
|
||||||
|
</label>
|
||||||
|
<span id="order-tp-preview" class="order-open-tp-preview" data-sltp-panel="fixed_rr">预估止盈：—</span>
|
||||||
|
<label class="order-open-field" data-sltp-panel="price">
|
||||||
|
<span class="order-open-label">止盈价</span>
|
||||||
|
<input id="order-tp" name="tgt" step="any" placeholder="止盈价格">
|
||||||
|
</label>
|
||||||
|
<label class="order-open-field" data-sltp-panel="pct">
|
||||||
|
<span class="order-open-label">止损 %</span>
|
||||||
|
<input id="order-sl-pct" name="sl_pct" type="number" min="0.01" step="0.01" placeholder="如 1.5">
|
||||||
|
</label>
|
||||||
|
<label class="order-open-field" data-sltp-panel="pct">
|
||||||
|
<span class="order-open-label">止盈 %</span>
|
||||||
|
<input id="order-tp-pct" name="tp_pct" type="number" min="0.01" step="0.01" placeholder="如 3">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p class="order-open-hint">成交价自动取交易所实时价与成交回报</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="order-open-section order-open-section-options">
|
||||||
|
<label class="order-open-check">
|
||||||
|
<input type="checkbox" name="breakeven_enabled" value="1" checked>
|
||||||
|
<span>启用移动保本（关=仅保留初始止损与交易所挂单）</span>
|
||||||
|
</label>
|
||||||
|
<label class="order-open-check">
|
||||||
|
<input type="checkbox" name="order_chart" value="true">
|
||||||
|
<span>开仓后生成多周期 K 线（各 100 根，含开平仓标记）</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="order-open-actions">
|
||||||
|
<button type="submit" class="order-open-submit">{{ open_position_button_label }}</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
Reference in New Issue
Block a user