增加前端委托

crypto_monitor_binance/templates/index.html

@@ -129,8 +129,26 @@
         .pos-side-badge{padding:3px 8px;border-radius:6px;font-size:.72rem;font-weight:500;line-height:1.2}
         .pos-side-long{background:#253a6e;color:#6eb5ff}
         .pos-side-short{background:#4a2230;color:#ff8a8a}
-        .pos-close-btn{padding:6px 14px;background:#c45454;color:#fff;border-radius:8px;text-decoration:none;font-size:.82rem;font-weight:500;flex-shrink:0;white-space:nowrap}
+        .pos-head-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
+        .pos-entrust-btn{padding:6px 12px;background:#2a4a7a;color:#8fc8ff;border:none;border-radius:8px;font-size:.82rem;font-weight:500;cursor:pointer;white-space:nowrap}
+        .pos-entrust-btn:hover{background:#355d96}
+        .pos-close-btn{padding:6px 14px;background:#c45454;color:#fff;border-radius:8px;text-decoration:none;font-size:.82rem;font-weight:500;flex-shrink:0;white-space:nowrap;border:none;cursor:pointer;display:inline-block}
         .pos-close-btn:hover{background:#d66565;color:#fff}
+        .pos-ex-orders{margin-top:10px;padding-top:10px;border-top:1px dashed #2a3348}
+        .pos-ex-orders-title{font-size:.74rem;color:#7d8799;margin-bottom:6px}
+        .pos-ex-order-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.78rem;color:#c5cce0;margin-top:5px}
+        .pos-ex-order-main{flex:1;min-width:0;line-height:1.35}
+        .pos-ex-cancel-btn{padding:3px 10px;background:#3a3048;color:#d4b8ff;border:none;border-radius:6px;font-size:.74rem;cursor:pointer;flex-shrink:0}
+        .pos-ex-cancel-btn:disabled{opacity:.4;cursor:not-allowed}
+        .tpsl-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;align-items:center;justify-content:center;padding:16px}
+        .tpsl-modal-backdrop.open{display:flex}
+        .tpsl-modal{background:#1a2030;border:1px solid #3a4a66;border-radius:12px;padding:16px 18px;width:min(440px,100%);max-height:90vh;overflow:auto}
+        .tpsl-modal h3{margin:0 0 12px;font-size:1rem;color:#fff}
+        .tpsl-modal .form-row{margin-bottom:10px}
+        .tpsl-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
+        .tpsl-modal-actions button{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:.85rem}
+        .tpsl-modal-submit{background:#2d6a4f;color:#fff}
+        .tpsl-modal-cancel{background:#3a3f52;color:#ddd}
         .pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 14px;margin-bottom:12px}
         .pos-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
         .pos-label{font-size:.72rem;color:#7d8799}
@@ -357,13 +375,22 @@
             <h2 style="margin-bottom:8px">实时持仓</h2>
             <div class="panel-scroll pos-list">
                 {% for o in order %}
-                <div class="pos-card" id="order-row-{{ o.id }}">
+                <div class="pos-card" id="order-row-{{ o.id }}"
+                    data-monitor-id="{{ o.id }}"
+                    data-symbol="{{ o.symbol }}"
+                    data-direction="{{ o.direction }}"
+                    data-plan-sl="{{ o.stop_loss or '' }}"
+                    data-plan-tp="{{ o.take_profit or '' }}"
+                    data-entry="{{ o.trigger_price or '' }}">
                     <div class="pos-card-head">
                         <div class="pos-card-symbol">
                             <strong>{{ o.exchange_symbol or o.symbol }}</strong>
                             <span class="pos-side-badge {{ 'pos-side-long' if o.direction == 'long' else 'pos-side-short' }}">{{ '做多' if o.direction == 'long' else '做空' }}</span>
                         </div>
-                        <a href="/del_order/{{ o.id }}" class="pos-close-btn" onclick="return confirm('删除会触发手动平仓，继续？')">平仓</a>
+                        <div class="pos-head-actions">
+                            <button type="button" class="pos-entrust-btn" onclick="openTpslEntrustModal({{ o.id }})">委托</button>
+                            <a href="/del_order/{{ o.id }}" class="pos-close-btn" onclick="return confirm('删除会触发手动平仓，继续？')">平仓</a>
+                        </div>
                     </div>
                     <div class="pos-meta">
                         <span class="pos-meta-item">来源: {{ o.monitor_type|default('下单监控', true) }}</span>
@@ -413,12 +440,49 @@
                         <span>杠杆: {{ o.leverage or '-' }}x</span>
                         <span>仓位占比: {{ o.position_ratio if o.position_ratio is not none else '-' }}%</span>
                     </div>
+                    <div class="pos-ex-orders">
+                        <div class="pos-ex-orders-title">交易所止盈止损</div>
+                        <div class="pos-ex-order-row">
+                            <span class="pos-ex-order-main" id="ex-sl-text-{{ o.id }}">止损：加载中…</span>
+                            <button type="button" class="pos-ex-cancel-btn" id="ex-sl-cancel-{{ o.id }}" disabled onclick="cancelExchangeTpsl({{ o.id }}, 'sl')">撤单</button>
+                        </div>
+                        <div class="pos-ex-order-row">
+                            <span class="pos-ex-order-main" id="ex-tp-text-{{ o.id }}">止盈：加载中…</span>
+                            <button type="button" class="pos-ex-cancel-btn" id="ex-tp-cancel-{{ o.id }}" disabled onclick="cancelExchangeTpsl({{ o.id }}, 'tp')">撤单</button>
+                        </div>
+                    </div>
                 </div>
                 {% else %}
                 <div class="pos-empty">暂无持仓</div>
                 {% endfor %}
             </div>
         </div>
+
+        <div id="tpsl-modal" class="tpsl-modal-backdrop" onclick="if(event.target===this)closeTpslEntrustModal()">
+            <div class="tpsl-modal" onclick="event.stopPropagation()">
+                <h3 id="tpsl-modal-title">挂止盈止损</h3>
+                <p style="font-size:.78rem;color:#8892b0;margin:0 0 10px">将先撤销该合约已有 TP/SL，再按下列价格重挂。</p>
+                <div class="form-row">
+                    <select id="tpsl-modal-mode" onchange="toggleTpslModalMode()">
+                        <option value="price">价格模式</option>
+                        <option value="pct">百分比模式</option>
+                    </select>
+                </div>
+                <div class="form-row">
+                    <input id="tpsl-modal-sl" step="any" placeholder="止损价格">
+                    <input id="tpsl-modal-tp" step="any" placeholder="止盈价格">
+                </div>
+                <div class="form-row">
+                    <input id="tpsl-modal-sl-pct" type="number" min="0.01" step="0.01" placeholder="止损%" style="display:none">
+                    <input id="tpsl-modal-tp-pct" type="number" min="0.01" step="0.01" placeholder="止盈%" style="display:none">
+                </div>
+                <div class="tpsl-modal-actions">
+                    <button type="button" class="tpsl-modal-cancel" onclick="closeTpslEntrustModal()">取消</button>
+                    <button type="button" class="tpsl-modal-submit" onclick="submitTpslEntrust()">先撤后挂</button>
+                </div>
+            </div>
+        </div>
+
         </div>
         {% endif %}
 
@@ -607,7 +671,10 @@
                 </div>
             </div>
         </div>
+        </div>
+        </div>
         {% endif %}
+                {% endif %}
     </div>
 
     {% if page == 'stats' %}
@@ -1218,6 +1285,102 @@ function rejectManualOrderRr(rr){
     alert(`计划盈亏比 ${rr === null ? '无效' : rr.toFixed(2)}:1 低于最低要求 ${MANUAL_MIN_PLANNED_RR}:1，已阻止人工下单。`);
     return true;
 }
+
+let tpslEntrustMonitorId = null;
+function formatExTpslLine(role, slot){
+    const label = role === 'sl' ? '止损' : '止盈';
+    if(!slot || !slot.order_id) return label + '：未挂单';
+    const px = slot.trigger_display || slot.trigger_price || '-';
+    const amt = slot.amount != null && !Number.isNaN(Number(slot.amount)) ? ` 数量 ${Number(slot.amount)}` : '';
+    return `${label}：触发 ${px}${amt}`;
+}
+function paintExchangeTpslRow(orderId, tpsl){
+    const data = tpsl || {};
+    const slText = document.getElementById(`ex-sl-text-${orderId}`);
+    const tpText = document.getElementById(`ex-tp-text-${orderId}`);
+    const slBtn = document.getElementById(`ex-sl-cancel-${orderId}`);
+    const tpBtn = document.getElementById(`ex-tp-cancel-${orderId}`);
+    if(slText) slText.innerText = formatExTpslLine('sl', data.sl);
+    if(tpText) tpText.innerText = formatExTpslLine('tp', data.tp);
+    if(slBtn) slBtn.disabled = !(data.sl && data.sl.order_id);
+    if(tpBtn) tpBtn.disabled = !(data.tp && data.tp.order_id);
+}
+function toggleTpslModalMode(){
+    const mode = (document.getElementById('tpsl-modal-mode')||{}).value || 'price';
+    const pct = mode === 'pct';
+    ['tpsl-modal-sl','tpsl-modal-tp'].forEach(id=>{ const el=document.getElementById(id); if(el) el.style.display=pct?'none':''; });
+    ['tpsl-modal-sl-pct','tpsl-modal-tp-pct'].forEach(id=>{ const el=document.getElementById(id); if(el) el.style.display=pct?'':'none'; });
+}
+function openTpslEntrustModal(orderId){
+    const card = document.getElementById(`order-row-${orderId}`);
+    if(!card) return;
+    tpslEntrustMonitorId = orderId;
+    const slEl = document.getElementById('tpsl-modal-sl');
+    const tpEl = document.getElementById('tpsl-modal-tp');
+    if(slEl) slEl.value = card.getAttribute('data-plan-sl') || '';
+    if(tpEl) tpEl.value = card.getAttribute('data-plan-tp') || '';
+    const modeEl = document.getElementById('tpsl-modal-mode');
+    if(modeEl) modeEl.value = 'price';
+    toggleTpslModalMode();
+    const title = document.getElementById('tpsl-modal-title');
+    if(title) title.innerText = `挂止盈止损 · ${card.getAttribute('data-symbol')||''}`;
+    const modal = document.getElementById('tpsl-modal');
+    if(modal) modal.classList.add('open');
+}
+function closeTpslEntrustModal(){
+    tpslEntrustMonitorId = null;
+    const modal = document.getElementById('tpsl-modal');
+    if(modal) modal.classList.remove('open');
+}
+function submitTpslEntrust(){
+    const orderId = tpslEntrustMonitorId;
+    if(!orderId) return;
+    const mode = (document.getElementById('tpsl-modal-mode')||{}).value || 'price';
+    const body = { sltp_mode: mode };
+    if(mode === 'pct'){
+        body.sl_pct = Number((document.getElementById('tpsl-modal-sl-pct')||{}).value);
+        body.tp_pct = Number((document.getElementById('tpsl-modal-tp-pct')||{}).value);
+        if(rejectManualOrderRr(calcClientRrFromPct(body.sl_pct, body.tp_pct))) return;
+    }else{
+        body.sl = (document.getElementById('tpsl-modal-sl')||{}).value;
+        body.tp = (document.getElementById('tpsl-modal-tp')||{}).value;
+    }
+    const card = document.getElementById(`order-row-${orderId}`);
+    const direction = (card && card.getAttribute('data-direction')) || 'long';
+    const post = ()=>{
+        fetch(`/api/order/${orderId}/place_tpsl`, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) })
+        .then(r=>r.json()).then(data=>{
+            if(!data.ok){ alert(data.msg || '委托失败'); return; }
+            alert(data.msg || '已提交');
+            closeTpslEntrustModal();
+            if(data.exchange_tpsl) paintExchangeTpslRow(orderId, data.exchange_tpsl);
+            refreshPriceSnapshotConditional();
+        }).catch(()=>alert('委托请求失败'));
+    };
+    if(mode === 'pct'){ post(); return; }
+    const sl = Number(body.sl), tp = Number(body.tp);
+    let entry = sl;
+    const sym = (card && card.getAttribute('data-symbol')) || '';
+    if(!sym){ if(rejectManualOrderRr(calcClientRr(direction, entry, sl, tp))) return; post(); return; }
+    fetch(`/api/order_defaults?symbol=${encodeURIComponent(sym)}&direction=${encodeURIComponent(direction)}`)
+        .then(r=>r.json()).then(data=>{
+            const px = data.last_price || data.price;
+            if(px) entry = Number(px);
+            if(rejectManualOrderRr(calcClientRr(direction, entry, sl, tp))) return;
+            post();
+        }).catch(()=>alert('无法校验盈亏比'));
+}
+function cancelExchangeTpsl(orderId, role){
+    const label = role === 'sl' ? '止损' : '止盈';
+    if(!confirm(`确认撤销交易所${label}委托？（不会平仓）`)) return;
+    fetch(`/api/order/${orderId}/cancel_tpsl`, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ role }) })
+        .then(r=>r.json()).then(data=>{
+            if(!data.ok){ alert(data.msg || '撤单失败'); return; }
+            if(data.exchange_tpsl) paintExchangeTpslRow(orderId, data.exchange_tpsl);
+            else refreshPriceSnapshotConditional();
+        }).catch(()=>alert('撤单请求失败'));
+}
+
 function allowManualOrderSubmit(form){
     form.dataset.rrOk = "1";
     form.submit();
@@ -1325,6 +1488,7 @@ function refreshPriceSnapshot(){
             if(rrEl){
                 rrEl.innerText = formatRrRatio(o.rr_ratio);
             }
+            if(o.exchange_tpsl) paintExchangeTpslRow(o.id, o.exchange_tpsl);
         });
     }).catch(()=>{});
 }