恢复下单界面并排布局，品种推荐数据库缓存与 SSE 推送。

期货下单与持仓监控左右并排，推荐按资金过滤存库，后台刷新并通过 EventSource 推送。

Co-authored-by: Cursor <cursoragent@cursor.com>

static/css/trade.css

@@ -1,14 +1,32 @@
-.trade-page{max-width:1100px;margin:0 auto}
+.trade-page{max-width:1200px;margin:0 auto}
 .trade-top-bar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;margin-bottom:1.25rem}
 .trade-dashboard{display:flex;flex-direction:column;gap:1.25rem}
-.trade-card{margin-bottom:0}
-.trade-card h2{margin-bottom:.65rem}
-.trade-order-status{display:grid;gap:.55rem;margin:.75rem 0;padding:.85rem 1rem;background:var(--card-inner);border:1px solid var(--card-border);border-radius:8px;font-size:.85rem}
+.trade-row-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch}
+.trade-card{margin-bottom:0;height:100%;display:flex;flex-direction:column}
+.trade-card h2{margin-bottom:.65rem;flex-shrink:0}
+.trade-card .card-body{flex:1;min-height:0}
+.trade-card-full{margin-bottom:0}
+.trade-order-status{display:grid;gap:.55rem;margin:.5rem 0 .75rem;padding:.65rem .85rem;background:var(--card-inner);border:1px solid var(--card-border);border-radius:8px;font-size:.82rem}
+.trade-order-status-compact{margin-top:0}
 .trade-order-status .status-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .65rem}
-.trade-order-status .trend-active{padding-top:.35rem;border-top:1px dashed var(--card-border)}
-.trade-order-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1rem}
-.trade-footer{background:var(--card-inner);border-radius:8px;padding:.75rem 1rem;font-size:.82rem;line-height:1.55;border:1px solid var(--card-border);margin-top:1rem}
+.trade-input-row,.trade-risk-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.65rem;margin-bottom:.75rem}
+.trade-field label{display:block;font-size:.72rem;margin-bottom:.25rem;color:var(--text-label)}
+.trade-btn-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.75rem 0}
+.trade-btn{border:none;border-radius:8px;padding:.65rem .3rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.12rem;color:#fff;font-weight:600}
+.trade-btn .btn-price{font-size:1rem}
+.trade-btn .btn-label{font-size:.82rem}
+.trade-btn .btn-sub{font-size:.66rem;opacity:.85;font-weight:400}
+.trade-btn.long{background:linear-gradient(180deg,#e74c3c,#c0392b)}
+.trade-btn.lock{background:linear-gradient(180deg,#27ae60,#1e8449)}
+.trade-btn.close{background:linear-gradient(180deg,#3498db,#2980b9)}
+.trade-footer{background:var(--card-inner);border-radius:8px;padding:.65rem .85rem;font-size:.78rem;line-height:1.5;border:1px solid var(--card-border);margin-top:.5rem}
 .trade-footer strong{color:var(--accent)}
 .rec-blocked td{opacity:.55}
 .rec-ok td:first-child{font-weight:600}
-#positions .card-body{max-height:520px}
+#positions .card-body{max-height:480px;overflow-y:auto}
+
+@media (max-width:900px){
+    .trade-row-split{grid-template-columns:1fr}
+    #positions .card-body{max-height:360px}
+    .trade-btn-row{grid-template-columns:repeat(2,1fr)}
+}

static/js/trade.js

@@ -1,7 +1,15 @@
 (function () {
     var list = document.getElementById('position-live-list');
     var recommendList = document.getElementById('recommend-list');
+    var symInput = document.getElementById('trade-symbol');
+    var lotsInput = document.getElementById('trade-lots');
+    var priceInput = document.getElementById('trade-price');
+    var footer = document.getElementById('trade-footer');
+    var slInput = document.getElementById('trade-sl');
+    var tpInput = document.getElementById('trade-tp');
     var pollTimer = null;
+    var recommendSource = null;
+    var quoteTimer = null;
 
     function runWhenReady(fn) {
         if (document.readyState === 'loading') {
@@ -16,104 +24,120 @@
         return Number(v).toFixed(digits === undefined ? 2 : digits);
     }
 
+    function selectedSymbol() {
+        return (symInput && symInput.value || '').trim();
+    }
+
+    function refreshQuote() {
+        var sym = selectedSymbol();
+        var lots = lotsInput ? lotsInput.value : '1';
+        if (!sym) return;
+        fetch('/api/trade/quote?symbol=' + encodeURIComponent(sym) + '&lots=' + encodeURIComponent(lots))
+            .then(function (r) { return r.json(); })
+            .then(function (data) {
+                if (!data.ok) return;
+                if (priceInput && !priceInput.dataset.manual && data.price) {
+                    priceInput.value = data.price;
+                }
+                var px = data.price != null ? data.price : '—';
+                ['px-long', 'px-short'].forEach(function (id) {
+                    var el = document.getElementById(id);
+                    if (el) el.textContent = px;
+                });
+                var pl = document.getElementById('pos-long');
+                var ps = document.getElementById('pos-short');
+                if (pl) pl.textContent = '≤' + (data.pos_long || 0);
+                if (ps) ps.textContent = '≤' + (data.pos_short || 0);
+                if (footer && data.metrics) {
+                    var m = data.metrics;
+                    var hint = footer.querySelector('.hint');
+                    var extra =
+                        '<p><strong>' + (data.name || sym) + '</strong> 精度 <strong>' + m.price_precision +
+                        '</strong> 位 · 每跳 <strong class="text-accent">' + m.tick_value_total + '</strong> 元（' + lots + ' 手）</p>';
+                    if (hint) {
+                        hint.insertAdjacentHTML('afterend', extra);
+                        var olds = footer.querySelectorAll('p:not(.hint):not(.text-loss)');
+                        for (var i = 0; i < olds.length - 1; i++) olds[i].remove();
+                    }
+                }
+            }).catch(function () {});
+    }
+
+    function scheduleQuote() {
+        clearTimeout(quoteTimer);
+        quoteTimer = setTimeout(refreshQuote, 400);
+    }
+
+    function postOrder(offset, direction) {
+        var sym = selectedSymbol();
+        if (!sym) { alert('请选择品种'); return; }
+        var body = {
+            symbol: sym,
+            offset: offset,
+            direction: direction,
+            lots: parseInt(lotsInput.value, 10) || 1,
+            price: parseFloat(priceInput.value) || 0,
+            stop_loss: slInput ? parseFloat(slInput.value) : null,
+            take_profit: tpInput ? parseFloat(tpInput.value) : null
+        };
+        fetch('/api/trade/order', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        }).then(function (r) { return r.json(); }).then(function (data) {
+            if (!data.ok) { alert(data.error || '下单失败'); return; }
+            alert('已提交 ' + (data.lots || '') + ' 手');
+            pollPositions();
+            refreshQuote();
+        });
+    }
+
     function buildPosCard(row) {
-        var pnlClass = '';
-        if (row.float_pnl > 0) pnlClass = 'pnl-pos';
-        if (row.float_pnl < 0) pnlClass = 'pnl-neg';
+        var pnlClass = row.float_pnl > 0 ? 'pnl-pos' : (row.float_pnl < 0 ? 'pnl-neg' : '');
         var pnlText = '--';
         if (row.float_pnl != null) {
             var sign = row.float_pnl >= 0 ? '+' : '';
             pnlText = sign + fmtNum(row.float_pnl) + '元';
-            if (row.float_pct != null) {
-                pnlText += ' (' + sign + fmtNum(row.float_pct) + '%)';
-            }
+            if (row.float_pct != null) pnlText += ' (' + sign + fmtNum(row.float_pct) + '%)';
         }
         var rr = row.rr_ratio != null ? row.rr_ratio + ':1' : '--';
         var openT = (row.open_time || '').replace('T', ' ').slice(0, 16);
         var dirBadge = row.direction_label || (row.direction === 'long' ? '做多' : '做空');
         var closeBtn = '';
-
         if (row.close_url) {
-            closeBtn =
-                '<form method="post" action="' + row.close_url + '" style="display:inline" onsubmit="return confirm(\'确认平仓？\')">' +
+            closeBtn = '<form method="post" action="' + row.close_url + '" style="display:inline" onsubmit="return confirm(\'确认平仓？\')">' +
                 '<button type="submit" class="btn-del pos-del">平仓</button></form>';
         } else if (row.can_close) {
-            closeBtn =
-                '<button type="button" class="btn-del pos-del" data-close=\'' + JSON.stringify({
-                    source: row.source,
-                    symbol_code: row.symbol_code,
-                    direction: row.direction,
-                    lots: row.lots,
-                    mark_price: row.mark_price,
-                    monitor_id: row.monitor_id || null
-                }) + '\'>平仓</button>';
+            closeBtn = '<button type="button" class="btn-del pos-del" data-close=\'' + JSON.stringify({
+                source: row.source, symbol_code: row.symbol_code, direction: row.direction,
+                lots: row.lots, mark_price: row.mark_price, monitor_id: row.monitor_id || null
+            }) + '\'>平仓</button>';
         }
-
-        var metaParts = ['来源 <strong>' + (row.source_label || row.source) + '</strong>'];
-        if (row.risk_pct != null) {
-            metaParts.push('风险 <strong>' + fmtNum(row.risk_pct) + '%≈' + fmtNum(row.risk_amount) + '元</strong>');
-        }
-        if (row.tick_value_total != null) {
-            metaParts.push('每跳 <strong>' + fmtNum(row.tick_value_total) + '元</strong>');
-        }
-
-        var slTp =
-            '<div class="cell"><label>止损</label><div>' + (row.stop_loss != null ? fmtNum(row.stop_loss) : '--') + '</div></div>' +
-            '<div class="cell"><label>止盈</label><div>' + (row.take_profit != null ? fmtNum(row.take_profit) : '--') + '</div></div>';
-
-        var footerParts = ['张数 ' + row.lots];
-        if (row.margin != null) footerParts.push('保证金 ' + fmtNum(row.margin) + '元');
-        if (row.position_pct != null) footerParts.push('仓位占比 ' + fmtNum(row.position_pct) + '%');
-        if (openT) footerParts.push('开仓 ' + openT);
-        if (row.holding_duration) footerParts.push('持仓 ' + row.holding_duration);
-        if (row.est_fee != null) footerParts.push('手续费(估) ' + fmtNum(row.est_fee) + '元');
-
         return (
             '<div class="pos-card" data-key="' + (row.key || '') + '">' +
-            '<div class="pos-card-head">' +
-            '<div><div class="title">' + row.symbol + ' <span class="badge dir">' + dirBadge + '</span></div>' +
-            (row.symbol_code && row.symbol_code !== row.symbol ? '<div class="text-muted" style="font-size:.72rem;margin-top:.15rem">' + row.symbol_code + '</div>' : '') +
-            '</div>' + closeBtn + '</div>' +
-            '<div class="pos-card-meta">' + metaParts.join(' · ') + '</div>' +
+            '<div class="pos-card-head"><div><div class="title">' + row.symbol + ' <span class="badge dir">' + dirBadge + '</span></div></div>' + closeBtn + '</div>' +
+            '<div class="pos-card-meta">来源 <strong>' + (row.source_label || row.source) + '</strong></div>' +
             '<div class="pos-metrics">' +
             '<div class="cell"><label>成交价</label><div>' + fmtNum(row.entry_price) + '</div></div>' +
-            slTp +
-            '<div class="cell"><label>盈亏比</label><div>' + rr + '</div></div>' +
-            '<div class="cell"><label>标记价</label><div>' + (row.mark_price != null ? fmtNum(row.mark_price) : '--') + '</div></div>' +
-            '<div class="cell ' + pnlClass + '"><label>浮盈亏</label><div>' + pnlText + '</div></div>' +
-            (row.est_fee != null ?
-                '<div class="cell"><label>预估手续费</label><div>' + fmtNum(row.est_fee) + '元</div></div>' +
-                '<div class="cell ' + (row.est_pnl_net > 0 ? 'pnl-pos' : (row.est_pnl_net < 0 ? 'pnl-neg' : '')) + '">' +
-                '<label>扣费后</label><div>' + (row.est_pnl_net != null ? fmtNum(row.est_pnl_net) + '元' : '--') + '</div></div>'
-                : '') +
-            '</div>' +
-            '<div class="pos-footer">' + footerParts.map(function (s) { return '<span>' + s + '</span>'; }).join('') + '</div>' +
-            '</div>'
+            '<div class="cell"><label>止损</label><div>' + (row.stop_loss != null ? fmtNum(row.stop_loss) : '--') + '</div></div>' +
+            '<div class="cell"><label>止盈</label><div>' + (row.take_profit != null ? fmtNum(row.take_profit) : '--') + '</div></div>' +
+            '<div class="cell"><label>浮盈亏</label><div class="' + pnlClass + '">' + pnlText + '</div></div>' +
+            '</div><div class="pos-footer"><span>张数 ' + row.lots + '</span></div></div>'
         );
     }
 
     function closePosition(payload) {
         var price = payload.mark_price;
-        if (!price || price <= 0) {
-            alert('无法获取现价，请稍后重试');
-            return;
-        }
+        if (!price || price <= 0) { alert('无法获取现价'); return; }
         if (!confirm('确认以 ' + price + ' 限价平仓 ' + payload.lots + ' 手？')) return;
         fetch('/api/trading/close', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                source: payload.source,
-                symbol_code: payload.symbol_code,
-                direction: payload.direction,
-                lots: payload.lots,
-                price: price,
-                monitor_id: payload.monitor_id
-            })
+            body: JSON.stringify(payload)
         }).then(function (r) { return r.json(); }).then(function (d) {
             if (!d.ok) { alert(d.error || '平仓失败'); return; }
             pollPositions();
-        }).catch(function () { alert('平仓请求失败'); });
+        });
     }
 
     function pollPositions() {
@@ -140,7 +164,7 @@
                 }
                 var rows = data.rows || [];
                 if (!rows.length) {
-                    list.innerHTML = '<div class="empty-hint">暂无持仓。请通过上方「期货下单 → 策略交易」开仓，或连接 CTP 同步柜台持仓。</div>';
+                    list.innerHTML = '<div class="empty-hint">暂无持仓。可在左侧下单，或通过策略交易开仓。</div>';
                     return;
                 }
                 list.innerHTML = rows.map(buildPosCard).join('');
@@ -152,53 +176,76 @@
             })
             .catch(function () {
                 if (list.innerHTML.indexOf('pos-card') < 0) {
-                    list.innerHTML = '<div class="empty-hint text-loss">加载失败，请刷新页面</div>';
+                    list.innerHTML = '<div class="empty-hint text-loss">持仓加载失败</div>';
                 }
             });
     }
 
     function badgeClass(status) {
         if (status === 'ok') return 'profit';
-        if (status === 'blocked') return 'loss';
         return 'planned';
     }
 
-    function buildRecommendRow(r) {
-        return (
-            '<tr class="rec-' + (r.status || '') + '">' +
-            '<td><strong>' + (r.name || '') + '</strong> <span class="text-muted">' + (r.ths || '') + '</span></td>' +
-            '<td>' + (r.exchange || '') + '</td>' +
-            '<td>' + (r.price != null ? r.price : '—') + '</td>' +
-            '<td>' + (r.margin_one_lot != null ? r.margin_one_lot : '—') + '</td>' +
-            '<td>' + (r.min_capital_one_lot != null ? r.min_capital_one_lot : '—') + '</td>' +
-            '<td><span class="badge ' + badgeClass(r.status) + '">' + (r.status_label || '') + '</span></td>' +
-            '</tr>'
-        );
+    function renderRecommendations(data) {
+        if (!recommendList || !data) return;
+        var recCap = document.getElementById('rec-capital');
+        if (recCap && data.capital != null) recCap.textContent = Number(data.capital).toFixed(2);
+        var recUpd = document.getElementById('rec-updated');
+        if (recUpd && data.updated_at) recUpd.textContent = '更新 ' + data.updated_at;
+        var rows = data.rows || [];
+        if (!rows.length) {
+            recommendList.innerHTML = '<tr><td colspan="6" class="empty-hint">当前资金下暂无推荐品种</td></tr>';
+            return;
+        }
+        recommendList.innerHTML = rows.map(function (r) {
+            return (
+                '<tr class="rec-' + (r.status || '') + '">' +
+                '<td><strong>' + (r.name || '') + '</strong> <span class="text-muted">' + (r.ths || '') + '</span></td>' +
+                '<td>' + (r.exchange || '') + '</td>' +
+                '<td class="rec-price">' + (r.price != null ? r.price : '—') + '</td>' +
+                '<td>' + (r.margin_one_lot != null ? r.margin_one_lot : '—') + '</td>' +
+                '<td>' + (r.min_capital_one_lot != null ? r.min_capital_one_lot : '—') + '</td>' +
+                '<td><span class="badge ' + badgeClass(r.status) + '">' + (r.status_label || '') + '</span></td>' +
+                '</tr>'
+            );
+        }).join('');
     }
 
-    function loadRecommendations() {
-        if (!recommendList) return;
-        fetch('/api/recommend/list')
-            .then(function (r) {
-                if (!r.ok) throw new Error('HTTP ' + r.status);
-                return r.json();
-            })
-            .then(function (data) {
-                if (!data.ok) throw new Error(data.error || 'load failed');
-                var recCap = document.getElementById('rec-capital');
-                if (recCap && data.capital != null) recCap.textContent = Number(data.capital).toFixed(2);
-                var rows = data.rows || [];
-                if (!rows.length) {
-                    recommendList.innerHTML = '<tr><td colspan="6" class="empty-hint">暂无推荐数据</td></tr>';
-                    return;
-                }
-                recommendList.innerHTML = rows.map(buildRecommendRow).join('');
-            })
-            .catch(function () {
-                recommendList.innerHTML = '<tr><td colspan="6" class="empty-hint text-loss">品种推荐加载失败，请刷新页面</td></tr>';
-            });
+    function connectRecommendStream() {
+        if (recommendSource) {
+            recommendSource.close();
+            recommendSource = null;
+        }
+        recommendSource = new EventSource('/api/recommend/stream');
+        recommendSource.addEventListener('recommend', function (ev) {
+            try {
+                renderRecommendations(JSON.parse(ev.data));
+            } catch (e) { /* ignore */ }
+        });
+        recommendSource.onerror = function () {
+            if (recommendSource) {
+                recommendSource.close();
+                recommendSource = null;
+            }
+            setTimeout(connectRecommendStream, 5000);
+        };
     }
 
+    if (symInput) symInput.addEventListener('input', scheduleQuote);
+    if (lotsInput) lotsInput.addEventListener('input', scheduleQuote);
+    if (priceInput) {
+        priceInput.addEventListener('input', function () { priceInput.dataset.manual = '1'; });
+    }
+
+    var btnLong = document.getElementById('btn-open-long');
+    var btnShort = document.getElementById('btn-open-short');
+    var btnCloseL = document.getElementById('btn-close-long');
+    var btnCloseS = document.getElementById('btn-close-short');
+    if (btnLong) btnLong.addEventListener('click', function () { postOrder('open', 'long'); });
+    if (btnShort) btnShort.addEventListener('click', function () { postOrder('open', 'short'); });
+    if (btnCloseL) btnCloseL.addEventListener('click', function () { postOrder('close', 'long'); });
+    if (btnCloseS) btnCloseS.addEventListener('click', function () { postOrder('close', 'short'); });
+
     var btnConnect = document.getElementById('btn-ctp-connect');
     if (btnConnect) {
         btnConnect.addEventListener('click', function () {
@@ -219,7 +266,8 @@
 
     runWhenReady(function () {
         pollPositions();
-        loadRecommendations();
+        connectRecommendStream();
         pollTimer = setInterval(pollPositions, 3000);
+        scheduleQuote();
     });
 })();