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

Show estimated risk, profit, and RR below manual order form.

Browse Source 
Add a preview bar under the live order form with risk in red and profit in green; extend preview logic for all SL/TP modes across embed and standalone instances.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-25 19:19:32 +08:00
parent cfc703ae5b
commit 0a20ee7eec
11 changed files with 181 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crypto_monitor_binance/templates/index.html
+10 -6
View File
@@ -37,6 +37,12 @@
.form-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.form-row > input:not([type=checkbox]):not([type=radio]),.form-row > select{flex:0 1 auto;width:10rem;max-width:200px;min-width:7rem}
#add-order-form #sltp-mode{min-width:12.5rem;max-width:16rem;width:auto}
.order-plan-preview{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:4px 0 10px;padding:10px 12px;background:#151a28;border:1px solid #2a3150;border-radius:8px;font-size:.85rem}
.order-preview-risk{color:#ff6b6b}.order-preview-risk strong{color:#ff8f8f;font-weight:600}
.order-preview-profit{color:#4cd97f}.order-preview-profit strong{color:#6ee7a0;font-weight:600}
.order-preview-rr{color:#cfd3ef}.order-preview-rr strong{font-weight:600;color:#dbe4ff}
.order-preview-rr.order-preview-rr-low strong{color:#ff8f8f}
.order-preview-rr.order-preview-rr-ok strong{color:#8fc8ff}
.form-row > button,.form-row > label{flex:0 0 auto}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
/* 复盘表单：长下拉文案需可收缩，否则会撑破四列网格 */
@@ -240,7 +246,7 @@
<link rel="stylesheet" href="/static/instance_theme.css?v=18">
</head>
<body data-page="{{ page }}">
<body data-page="{{ page }}" data-risk-percent="{{ risk_percent }}">
{% macro period_stats(title, s) %}
<div class="stats-period-block">
<h3>{{ title }}</h3>
@@ -360,7 +366,7 @@
</select>
<button type="submit">手动划转</button>
</form>
<form id="add-order-form" action="/add_order" method="post" class="form-row">
<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>
<select id="order-direction" name="direction" required>
<option value="">方向</option><option value="long">做多</option><option value="short">做空</option>
@@ -400,9 +406,9 @@
<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">
<span id="order-rr-preview" class="order-rr-preview" style="display:none;font-size:.82rem;color:#8fc8ff;align-self:center">预估盈亏比：—</span>
<button type="submit">{{ open_position_button_label }}</button>
</form>
{% include 'order_plan_preview_bar.html' %}
</div>
<div class="card">
<h2 style="margin-bottom:8px">实时持仓</h2>
@@ -827,7 +833,7 @@
<script src="/static/time_close_ui.js?v=2"></script>
<script src="/static/ai_review_render.js?v=2"></script>
<script src="/static/form_submit_guard.js?v=2"></script>
<script src="/static/manual_order_rr_preview.js?v=3"></script>
<script src="/static/manual_order_rr_preview.js?v=4"></script>
<script>
const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
@@ -1989,13 +1995,11 @@ function toggleSltpMode(){
const slEl = document.getElementById("order-sl");
const tpEl = document.getElementById("order-tp");
const fixedRrEl = document.getElementById("order-fixed-rr");
const rrPreviewEl = document.getElementById("order-rr-preview");
const slPctEl = document.getElementById("order-sl-pct");
const tpPctEl = document.getElementById("order-tp-pct");
if(!slEl || !tpEl || !slPctEl || !tpPctEl){ return; }
const pct = mode === "pct";
const fixed = mode === "fixed_rr";
if(rrPreviewEl) rrPreviewEl.style.display = fixed ? "none" : "";
slEl.style.display = pct ? "none" : "";
tpEl.style.display = (pct || fixed) ? "none" : "";
if(fixedRrEl) fixedRrEl.style.display = fixed ? "" : "none";