Redesign roll calculator with auto first entry and chained add legs.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -6938,6 +6938,57 @@ body.funds-fullscreen-open {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.calc-roll-legs-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin: 14px 0 8px;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.calc-roll-legs-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.calc-roll-leg {
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.calc-roll-leg-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.calc-roll-leg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.calc-roll-leg-remove {
|
||||
margin-top: 8px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.calc-done-tag {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.68rem;
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border-soft);
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.calc-layout {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -127,35 +127,169 @@
|
||||
const box = $("calc-roll-result");
|
||||
if (!box) return;
|
||||
box.classList.remove("hidden");
|
||||
let table =
|
||||
'<div class="calc-table-wrap"><table class="calc-table"><thead><tr>' +
|
||||
"<th>阶段</th><th>入场/加仓价</th><th>统一止损</th><th>本次张数</th><th>累计张数</th><th>均价</th><th>止损亏损</th><th>止盈盈利</th><th>盈亏比</th>" +
|
||||
"</tr></thead><tbody>";
|
||||
(data.rows || []).forEach(function (r) {
|
||||
const tag = r.already_done ? ' <span class="calc-done-tag">已完成</span>' : "";
|
||||
table +=
|
||||
"<tr>" +
|
||||
"<td>" +
|
||||
esc(r.label) +
|
||||
tag +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
fmt(r.entry_or_add_price, 4) +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
fmt(r.stop_loss, 4) +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
fmt(r.add_contracts, 4) +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
fmt(r.total_contracts, 4) +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
fmt(r.avg_entry, 4) +
|
||||
"</td>" +
|
||||
'<td class="calc-pnl-loss">' +
|
||||
fmtU(-Math.abs(Number(r.loss_at_sl_u) || 0)) +
|
||||
"</td>" +
|
||||
'<td class="' +
|
||||
pnlClass(r.profit_at_tp_u) +
|
||||
'">' +
|
||||
fmtU(r.profit_at_tp_u) +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
(r.rr != null ? fmt(r.rr, 2) + ":1" : "—") +
|
||||
"</td>" +
|
||||
"</tr>";
|
||||
});
|
||||
table += "</tbody></table></div>";
|
||||
box.innerHTML =
|
||||
'<div class="calc-summary">' +
|
||||
"<div><span>风险预算</span><strong>" +
|
||||
"<div><span>单次风险预算</span><strong>" +
|
||||
fmt(data.risk_budget_u, 2) +
|
||||
"U</strong></div>" +
|
||||
"<div><span>本次加仓张数</span><strong>" +
|
||||
fmt(data.add_contracts, 4) +
|
||||
"<div><span>首仓张数（自动）</span><strong>" +
|
||||
fmt(data.first_contracts, 4) +
|
||||
"</strong></div>" +
|
||||
"<div><span>合并后张数</span><strong>" +
|
||||
fmt(data.qty_after, 4) +
|
||||
"<div><span>最终累计张数</span><strong>" +
|
||||
fmt(data.final_contracts, 4) +
|
||||
"</strong></div>" +
|
||||
"<div><span>合并后均价</span><strong>" +
|
||||
fmt(data.avg_entry_after, 4) +
|
||||
"<div><span>最终均价</span><strong>" +
|
||||
fmt(data.final_avg_entry, 4) +
|
||||
"</strong></div>" +
|
||||
"<div><span>打到新止损亏损</span><strong class=\"calc-pnl-loss\">" +
|
||||
fmtU(-Math.abs(Number(data.loss_at_sl_u) || 0)) +
|
||||
"</strong></div>" +
|
||||
'<div><span>到达首仓止盈盈利</span><strong class="' +
|
||||
pnlClass(data.profit_at_tp_u) +
|
||||
'<div><span>最终止盈盈利</span><strong class="' +
|
||||
pnlClass(data.final_profit_at_tp_u) +
|
||||
'">' +
|
||||
fmtU(data.profit_at_tp_u) +
|
||||
fmtU(data.final_profit_at_tp_u) +
|
||||
"</strong></div>" +
|
||||
"<div><span>金额盈亏比</span><strong>" +
|
||||
(data.rr != null ? fmt(data.rr, 2) + ":1" : "—") +
|
||||
"<div><span>最终盈亏比</span><strong>" +
|
||||
(data.final_rr != null ? fmt(data.final_rr, 2) + ":1" : "—") +
|
||||
"</strong></div>" +
|
||||
"<div><span>下一滚仓序号</span><strong>第 " +
|
||||
esc(data.leg_index_next) +
|
||||
" 次</strong></div>" +
|
||||
"</div>";
|
||||
"</div>" +
|
||||
table;
|
||||
}
|
||||
|
||||
const MAX_ROLL_LEGS = 3;
|
||||
let rollLegCount = 0;
|
||||
|
||||
function maxRollLegsAllowed() {
|
||||
const done = num("calc-roll-legs-done") || 0;
|
||||
return Math.max(0, MAX_ROLL_LEGS - done);
|
||||
}
|
||||
|
||||
function syncRollAddBtn() {
|
||||
const btn = $("calc-roll-add-leg");
|
||||
if (!btn) return;
|
||||
btn.disabled = rollLegCount >= maxRollLegsAllowed();
|
||||
}
|
||||
|
||||
function rollLegRowHtml(index) {
|
||||
return (
|
||||
'<div class="calc-roll-leg" data-leg-index="' +
|
||||
index +
|
||||
'">' +
|
||||
'<div class="calc-roll-leg-title">滚仓 ' +
|
||||
index +
|
||||
"</div>" +
|
||||
'<div class="calc-roll-leg-grid">' +
|
||||
'<label class="calc-field"><span>加仓价</span><input type="number" class="calc-roll-leg-add" min="0" step="any" required /></label>' +
|
||||
'<label class="calc-field"><span>新统一止损</span><input type="number" class="calc-roll-leg-stop" min="0" step="any" required /></label>' +
|
||||
"</div>" +
|
||||
'<button type="button" class="ghost danger calc-roll-leg-remove">删除</button>' +
|
||||
"</div>"
|
||||
);
|
||||
}
|
||||
|
||||
function renumberRollLegs() {
|
||||
const list = $("calc-roll-legs-list");
|
||||
if (!list) return;
|
||||
const rows = list.querySelectorAll(".calc-roll-leg");
|
||||
rollLegCount = rows.length;
|
||||
rows.forEach(function (row, i) {
|
||||
row.setAttribute("data-leg-index", String(i + 1));
|
||||
const title = row.querySelector(".calc-roll-leg-title");
|
||||
if (title) title.textContent = "滚仓 " + (i + 1);
|
||||
});
|
||||
syncRollAddBtn();
|
||||
}
|
||||
|
||||
function addRollLegRow() {
|
||||
if (rollLegCount >= maxRollLegsAllowed()) return;
|
||||
const list = $("calc-roll-legs-list");
|
||||
if (!list) return;
|
||||
list.insertAdjacentHTML("beforeend", rollLegRowHtml(rollLegCount + 1));
|
||||
rollLegCount += 1;
|
||||
syncRollAddBtn();
|
||||
}
|
||||
|
||||
function collectRollLegs() {
|
||||
const legs = [];
|
||||
document.querySelectorAll(".calc-roll-leg").forEach(function (row) {
|
||||
const addEl = row.querySelector(".calc-roll-leg-add");
|
||||
const stopEl = row.querySelector(".calc-roll-leg-stop");
|
||||
const ap = addEl && addEl.value !== "" ? Number(addEl.value) : null;
|
||||
const sl = stopEl && stopEl.value !== "" ? Number(stopEl.value) : null;
|
||||
if (ap == null || sl == null || !Number.isFinite(ap) || !Number.isFinite(sl)) return;
|
||||
legs.push({ add_price: ap, new_stop_loss: sl });
|
||||
});
|
||||
return legs;
|
||||
}
|
||||
|
||||
function bindRollLegsUI() {
|
||||
const addBtn = $("calc-roll-add-leg");
|
||||
const list = $("calc-roll-legs-list");
|
||||
const doneInput = $("calc-roll-legs-done");
|
||||
if (addBtn && !addBtn._bound) {
|
||||
addBtn._bound = true;
|
||||
addBtn.addEventListener("click", addRollLegRow);
|
||||
}
|
||||
if (list && !list._bound) {
|
||||
list._bound = true;
|
||||
list.addEventListener("click", function (e) {
|
||||
const btn = e.target.closest(".calc-roll-leg-remove");
|
||||
if (!btn) return;
|
||||
const row = btn.closest(".calc-roll-leg");
|
||||
if (row) row.remove();
|
||||
renumberRollLegs();
|
||||
});
|
||||
}
|
||||
if (doneInput && !doneInput._bound) {
|
||||
doneInput._bound = true;
|
||||
doneInput.addEventListener("change", function () {
|
||||
while (rollLegCount > maxRollLegsAllowed()) {
|
||||
const rows = list && list.querySelectorAll(".calc-roll-leg");
|
||||
if (rows && rows.length) rows[rows.length - 1].remove();
|
||||
rollLegCount = list ? list.querySelectorAll(".calc-roll-leg").length : 0;
|
||||
}
|
||||
syncRollAddBtn();
|
||||
});
|
||||
}
|
||||
syncRollAddBtn();
|
||||
}
|
||||
|
||||
function showErr(boxId, msg) {
|
||||
@@ -203,11 +337,10 @@
|
||||
direction: ($("calc-roll-direction") && $("calc-roll-direction").value) || "long",
|
||||
capital_usdt: num("calc-roll-capital"),
|
||||
risk_percent: num("calc-roll-risk"),
|
||||
qty_existing: num("calc-roll-qty"),
|
||||
entry_existing: num("calc-roll-entry"),
|
||||
entry_price: num("calc-roll-entry"),
|
||||
stop_loss: num("calc-roll-sl"),
|
||||
take_profit: num("calc-roll-tp"),
|
||||
add_price: num("calc-roll-add-price"),
|
||||
new_stop_loss: num("calc-roll-sl"),
|
||||
add_legs: collectRollLegs(),
|
||||
legs_done: num("calc-roll-legs-done") || 0,
|
||||
};
|
||||
try {
|
||||
@@ -240,6 +373,7 @@
|
||||
dirSel.addEventListener("change", syncTrendAddLabel);
|
||||
syncTrendAddLabel();
|
||||
}
|
||||
bindRollLegsUI();
|
||||
}
|
||||
|
||||
window.hubCalculatorPage = {
|
||||
|
||||
@@ -760,7 +760,7 @@
|
||||
|
||||
<section class="calc-card card">
|
||||
<h2>滚仓计算器</h2>
|
||||
<p class="calc-hint">逻辑与实例滚仓一致：合并持仓打到新止损 ≈ 账户风险；止盈锁定首仓；加仓价手动输入。</p>
|
||||
<p class="calc-hint">首仓按「单次风险」以损定仓；每次滚仓后合并持仓打到新止损 ≈ 单次风险；止盈锁定首仓价不变。最多 3 次滚仓。</p>
|
||||
<form id="calc-roll-form" class="calc-form">
|
||||
<div class="calc-form-grid">
|
||||
<label class="calc-field">
|
||||
@@ -768,7 +768,7 @@
|
||||
<input id="calc-roll-capital" type="number" min="0.01" step="any" value="1000" required />
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
<span>总风险 %</span>
|
||||
<span>单次风险 %</span>
|
||||
<input id="calc-roll-risk" type="number" min="0.1" step="0.1" value="5" required />
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
@@ -779,30 +779,27 @@
|
||||
</select>
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
<span>现有张数</span>
|
||||
<input id="calc-roll-qty" type="number" min="0.0001" step="any" required />
|
||||
<span>首仓入场价</span>
|
||||
<input id="calc-roll-entry" type="number" min="0" step="any" placeholder="手动输入" required />
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
<span>现有均价</span>
|
||||
<input id="calc-roll-entry" type="number" min="0" step="any" required />
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
<span>首仓止盈价</span>
|
||||
<input id="calc-roll-tp" type="number" min="0" step="any" required />
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
<span>加仓价</span>
|
||||
<input id="calc-roll-add-price" type="number" min="0" step="any" placeholder="手动输入" required />
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
<span>新统一止损</span>
|
||||
<span>首仓止损价</span>
|
||||
<input id="calc-roll-sl" type="number" min="0" step="any" required />
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
<span>止盈价（锁定）</span>
|
||||
<input id="calc-roll-tp" type="number" min="0" step="any" required />
|
||||
</label>
|
||||
<label class="calc-field">
|
||||
<span>已完成滚仓次数</span>
|
||||
<input id="calc-roll-legs-done" type="number" min="0" max="3" step="1" value="0" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="calc-roll-legs-head">
|
||||
<strong>滚仓加仓（最多 3 次）</strong>
|
||||
<button type="button" id="calc-roll-add-leg" class="ghost">+ 添加滚仓</button>
|
||||
</div>
|
||||
<div id="calc-roll-legs-list" class="calc-roll-legs-list"></div>
|
||||
<div class="calc-actions">
|
||||
<button type="submit" class="primary">计算</button>
|
||||
</div>
|
||||
@@ -944,7 +941,7 @@
|
||||
<script src="/assets/chart_draw.js?v=20260609-market-day-split"></script>
|
||||
<script src="/assets/chart.js?v=20260609-prev-day-lines"></script>
|
||||
<script src="/assets/plan.js?v=20260614-entry-plan-scheme"></script>
|
||||
<script src="/assets/calculator.js?v=1"></script>
|
||||
<script src="/assets/calculator.js?v=2"></script>
|
||||
<script src="/assets/archive.js?v=20260612-archive-ai-chat"></script>
|
||||
<script src="/assets/funds.js?v=20260609-hub-funds-fold"></script>
|
||||
<script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
|
||||
|
||||
Reference in New Issue
Block a user