diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css index 623623b..d8b28d5 100644 --- a/lib/common/static/instance_theme.css +++ b/lib/common/static/instance_theme.css @@ -3213,35 +3213,15 @@ html[data-theme="light"] .options-estimate-row { font-size: 0.78rem; color: #b8c0dc; } -.options-pos-live-layout { - display: flex; - flex-direction: column; - min-height: 0; - flex: 1; -} -.opt-pos-expanded-host { - flex-shrink: 0; - margin-top: 8px; - overflow: visible; -} -.opt-pos-expanded-host .opt-pos-card { - margin-bottom: 0; -} -.options-pos-live-pane--bars-only { - flex: 1; - min-height: 72px; - max-height: 140px; - overflow-y: auto; -} -.options-pos-subcard .options-pos-live-layout { - min-height: 0; -} .options-pos-live-pane { flex: 1; min-height: 100px; max-height: 220px; overflow-y: auto; } +.options-pos-live-pane.options-pos-live-pane--accordion { + max-height: 360px; +} .options-pos-stats-card { flex-shrink: 0; } @@ -3308,8 +3288,18 @@ html[data-theme="light"] .options-estimate-row { } .opt-pos-accordion-item.is-expanded .opt-pos-bar { border-color: #4a6fd8; + border-radius: 8px 8px 0 0; + border-bottom-color: transparent; background: #171d2a; } +.opt-pos-accordion-body { + overflow: visible; +} +.opt-pos-card--inline { + margin-bottom: 0 !important; + border-top: none !important; + border-radius: 0 0 8px 8px !important; +} .opt-pos-bar-main { display: flex; align-items: center; diff --git a/lib/common/static/options_panel.js b/lib/common/static/options_panel.js index 524af2c..c1f4f12 100644 --- a/lib/common/static/options_panel.js +++ b/lib/common/static/options_panel.js @@ -470,7 +470,7 @@ ); } - function renderPositionBar(p, expanded) { + function renderPositionAccordionItem(p, expanded) { const upl = p.upl; const uplCls = upl > 0 ? "pos-pnl-profit" : upl < 0 ? "pos-pnl-loss" : ""; const sideCls = (p.opt_type || "").toUpperCase() === "P" ? "pos-side-short" : "pos-side-long"; @@ -494,49 +494,28 @@ '' + (p.upl_ratio_pct != null ? fmt(p.upl_ratio_pct, 2) + "%" : "—") + "" + "" + - "" + "" + + '
' + + '
' + + renderPositionCardInner(p) + + "
" ); } - function renderExpandedPositionCard(p) { - return renderPositionCard(p); - } - - function applyAccordionState(list) { + function applyAccordionState() { const wrap = document.getElementById("opt-pos-cards"); - const expandedHost = document.getElementById("opt-pos-expanded-host"); - const livePane = document.getElementById("opt-pos-live"); if (!wrap) return; - const expanded = (list || []).find(function (p) { return p.inst_id === state.expandedPosInst; }) || null; wrap.querySelectorAll(".opt-pos-accordion-item").forEach(function (el) { const open = el.getAttribute("data-inst") === state.expandedPosInst; el.classList.toggle("is-expanded", open); const btn = el.querySelector(".opt-pos-bar"); + const body = el.querySelector(".opt-pos-accordion-body"); if (btn) btn.setAttribute("aria-expanded", open ? "true" : "false"); + if (body) body.hidden = !open; }); - if (expandedHost) { - if (expanded) { - expandedHost.hidden = false; - expandedHost.setAttribute("aria-hidden", "false"); - expandedHost.innerHTML = renderExpandedPositionCard(expanded); - expandedHost.querySelectorAll(".opt-close-btn").forEach(function (btn) { - btn.addEventListener("click", function (e) { - e.stopPropagation(); - closePosition(btn.getAttribute("data-inst"), btn); - }); - }); - } else { - expandedHost.hidden = true; - expandedHost.setAttribute("aria-hidden", "true"); - expandedHost.innerHTML = ""; - } - } - if (livePane) { - livePane.classList.toggle("options-pos-live-pane--bars-only", !!(list && list.length >= 2)); - } } - function bindPositionActions(container, list) { + function bindPositionActions(container) { if (!container) return; container.querySelectorAll(".opt-close-btn").forEach(function (btn) { btn.addEventListener("click", function (e) { @@ -550,7 +529,7 @@ if (!item) return; const inst = item.getAttribute("data-inst"); state.expandedPosInst = state.expandedPosInst === inst ? null : inst; - applyAccordionState(list); + applyAccordionState(); if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) { OptionsExpiryCountdown.ensureTimer(); } @@ -593,24 +572,19 @@ const d = await apiJson("/api/options/positions"); const wrap = document.getElementById("opt-pos-cards"); const empty = document.getElementById("opt-pos-empty"); - const expandedHost = document.getElementById("opt-pos-expanded-host"); const livePane = document.getElementById("opt-pos-live"); const list = (d.ok && d.positions) || []; wrap.innerHTML = ""; - if (expandedHost) { - expandedHost.hidden = true; - expandedHost.setAttribute("aria-hidden", "true"); - expandedHost.innerHTML = ""; - } if (!list.length) { empty.style.display = ""; state.expandedPosInst = null; - if (livePane) livePane.classList.remove("options-pos-live-pane--bars-only"); + if (livePane) livePane.classList.remove("options-pos-live-pane--accordion"); return; } empty.style.display = "none"; const multi = list.length >= 2; wrap.classList.toggle("opt-pos-cards--accordion", multi); + if (livePane) livePane.classList.toggle("options-pos-live-pane--accordion", multi); if (multi) { const ids = list.map(function (p) { return p.inst_id; }); if (state.expandedPosInst && ids.indexOf(state.expandedPosInst) < 0) { @@ -618,21 +592,18 @@ } list.forEach(function (p) { const div = document.createElement("div"); - div.innerHTML = renderPositionBar(p, p.inst_id === state.expandedPosInst); + div.innerHTML = renderPositionAccordionItem(p, p.inst_id === state.expandedPosInst); wrap.appendChild(div.firstChild); }); - applyAccordionState(list); - bindPositionActions(wrap, list); } else { state.expandedPosInst = null; - if (livePane) livePane.classList.remove("options-pos-live-pane--bars-only"); list.forEach(function (p) { const div = document.createElement("div"); div.innerHTML = renderPositionCard(p); wrap.appendChild(div.firstChild); }); - bindPositionActions(wrap, list); } + bindPositionActions(wrap); if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) { OptionsExpiryCountdown.ensureTimer(); } diff --git a/lib/options/templates/options_panel.html b/lib/options/templates/options_panel.html index b56fb4f..f0bb0c3 100644 --- a/lib/options/templates/options_panel.html +++ b/lib/options/templates/options_panel.html @@ -81,12 +81,9 @@

当前持仓

-
-
-
暂无持仓
-
-
- +
+
暂无持仓
+