diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css
index 24ce948..d090b07 100644
--- a/lib/common/static/instance_theme.css
+++ b/lib/common/static/instance_theme.css
@@ -3033,7 +3033,8 @@ html[data-theme="light"] .opt-be-dist-down {
}
.options-chain-toolbar .btn-secondary.active,
.opt-uly-btn.active,
-.opt-type-btn.active {
+.opt-type-btn.active,
+.opt-pos-tab.active {
border-color: #5b8cff;
color: #cfe0ff;
background: rgba(74, 124, 255, 0.28);
@@ -3191,13 +3192,49 @@ html[data-theme="light"] .options-estimate-row {
flex-direction: column;
min-height: 0;
}
-.options-pos-stack {
+.options-pos-stack,
+.options-pos-tab-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
}
+.options-pos-tabs {
+ display: flex;
+ gap: 6px;
+ margin-bottom: 8px;
+}
+.opt-pos-tab {
+ flex: 1;
+ font-size: 0.78rem;
+ padding: 6px 8px;
+ min-height: 32px;
+ white-space: nowrap;
+}
+.opt-pos-tab.active {
+ border-color: #5b8cff;
+ color: #cfe0ff;
+ background: rgba(74, 124, 255, 0.28);
+}
+.options-pos-pane {
+ display: none;
+ flex: 1;
+ flex-direction: column;
+ min-height: 0;
+}
+.options-pos-pane.is-active {
+ display: flex;
+}
+.options-pos-live-pane {
+ flex: 1;
+ min-height: 180px;
+ max-height: 420px;
+ overflow-y: auto;
+}
+.options-pos-live-pane.options-pos-live-pane--accordion {
+ max-height: 480px;
+}
.options-pos-subcard {
display: flex;
flex-direction: column;
@@ -3213,22 +3250,14 @@ html[data-theme="light"] .options-estimate-row {
font-size: 0.78rem;
color: #b8c0dc;
}
-.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;
}
.options-stats-grid {
display: flex;
flex-wrap: wrap;
- gap: 8px 14px;
+ gap: 10px 16px;
+ padding: 4px 2px 8px;
}
.options-stat-item {
display: flex;
@@ -3399,7 +3428,8 @@ html[data-theme="light"] .options-estimate-row {
flex: 1;
overflow-y: auto;
overflow-x: auto;
- min-height: 120px;
+ min-height: 180px;
+ max-height: 420px;
}
.opt-history-table {
table-layout: fixed;
@@ -3485,19 +3515,6 @@ html[data-theme="light"] .options-estimate-row {
.options-pos-head h2 {
margin: 0;
}
-.options-pos-tabs {
- display: flex;
- gap: 8px;
- margin-bottom: 10px;
-}
-.opt-pos-tab.active {
- border-color: #5b8cff;
- color: #cfe0ff;
- background: rgba(74, 124, 255, 0.28);
-}
-.options-pos-pane {
- min-height: 200px;
-}
.opt-pos-card {
margin-bottom: 10px;
}
diff --git a/lib/common/static/options_panel.js b/lib/common/static/options_panel.js
index 7f18a98..b30f9b7 100644
--- a/lib/common/static/options_panel.js
+++ b/lib/common/static/options_panel.js
@@ -15,6 +15,7 @@
selectedInst: null,
orderQuote: null,
expandedPosInst: null,
+ posTab: "live",
};
let lastGoodPositions = null;
@@ -576,6 +577,33 @@
}
}
+ function setOptionsPosTab(tabId) {
+ const tab = tabId || "live";
+ state.posTab = tab;
+ document.querySelectorAll(".opt-pos-tab").forEach(function (btn) {
+ const on = btn.getAttribute("data-opt-pos-tab") === tab;
+ btn.classList.toggle("active", on);
+ btn.setAttribute("aria-selected", on ? "true" : "false");
+ });
+ document.querySelectorAll("[data-opt-pos-pane]").forEach(function (pane) {
+ const on = pane.getAttribute("data-opt-pos-pane") === tab;
+ pane.classList.toggle("is-active", on);
+ pane.hidden = !on;
+ });
+ if (tab === "live" && window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
+ OptionsExpiryCountdown.ensureTimer();
+ }
+ }
+
+ function bindOptionsPosTabs() {
+ document.querySelectorAll(".opt-pos-tab").forEach(function (btn) {
+ btn.addEventListener("click", function () {
+ setOptionsPosTab(btn.getAttribute("data-opt-pos-tab"));
+ });
+ });
+ setOptionsPosTab(state.posTab);
+ }
+
function resolvePositionsList(d) {
const now = Date.now();
const list = (d && d.ok && d.positions) ? d.positions : [];
@@ -785,6 +813,7 @@
document.getElementById("opt-load-chain").addEventListener("click", loadChain);
document.getElementById("opt-refresh-positions").addEventListener("click", refreshAllPositions);
document.getElementById("opt-open-btn").addEventListener("click", openPosition);
+ bindOptionsPosTabs();
document.querySelectorAll('input[name="opt-size-mode"]').forEach(function (r) {
r.addEventListener("change", function () {
diff --git a/lib/options/templates/options_panel.html b/lib/options/templates/options_panel.html
index 4e9bdcc..2b63d99 100644
--- a/lib/options/templates/options_panel.html
+++ b/lib/options/templates/options_panel.html
@@ -78,16 +78,19 @@
持仓
-
-
-
当前持仓
+
+
+
+
+
+