Switch hedge-plan modes to high-contrast tabs with history/stats placeholders.

EOF

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

lib/common/static/hedge_plan.js

@@ -6,6 +6,7 @@
   if (!root) return;
 
   const state = {
+    tab: "perp_options",
     mode: "perp_options",
     underlying: root.getAttribute("data-default-underly") || "ETH",
     chain: null,
@@ -37,14 +38,28 @@
     return dir === "short" ? "C" : "P";
   }
 
-  function syncModeUI() {
-    document.querySelectorAll(".hp-mode-btn").forEach(function (b) {
-      b.classList.toggle("active", b.getAttribute("data-mode") === state.mode);
+  function syncTabUI() {
+    const tab = state.tab || "perp_options";
+    document.querySelectorAll(".hp-tab").forEach(function (b) {
+      const on = b.getAttribute("data-tab") === tab;
+      b.classList.toggle("active", on);
+      b.setAttribute("aria-selected", on ? "true" : "false");
     });
-    const po = $("hp-po-layout");
-    const oo = $("hp-oo-layout");
-    if (po) po.classList.toggle("hidden", state.mode !== "perp_options");
-    if (oo) oo.classList.toggle("hidden", state.mode !== "options_options");
+    ["perp_options", "options_options", "history", "stats"].forEach(function (id) {
+      const panel = $("hp-tab-" + id);
+      if (!panel) return;
+      const on = id === tab;
+      panel.classList.toggle("hidden", !on);
+      if (on) panel.removeAttribute("hidden");
+      else panel.setAttribute("hidden", "");
+    });
+    if (tab === "perp_options" || tab === "options_options") {
+      state.mode = tab;
+    }
+  }
+
+  function syncModeUI() {
+    syncTabUI();
   }
 
   function setGateLine(gates) {
@@ -341,11 +356,12 @@
   }
 
   async function runPreview() {
-    const tbody = $("hp-result-tbody");
-    const summary = $("hp-summary");
+    const isOo = state.mode === "options_options";
+    const tbody = $(isOo ? "hp-result-tbody-oo" : "hp-result-tbody");
+    const summary = $(isOo ? "hp-summary-oo" : "hp-summary");
     try {
       let body;
-      if (state.mode === "options_options") {
+      if (isOo) {
         if (!state.legA || !state.legB) throw new Error("请选用两条期权腿");
         const target = Number(($("hp-target") && $("hp-target").value) || 0);
         if (!target) throw new Error("请填写目标价");
@@ -408,6 +424,7 @@
             (s.expiry_is_loss ? " · 到期无盈利(记总亏损)" : "");
         }
       }
+      if (!tbody) return;
       tbody.innerHTML = "";
       (d.scenarios || []).forEach(function (sc) {
         const tr = document.createElement("tr");
@@ -441,11 +458,21 @@
   }
 
   function bind() {
-    document.querySelectorAll(".hp-mode-btn").forEach(function (b) {
+    document.querySelectorAll(".hp-tab").forEach(function (b) {
       b.addEventListener("click", function () {
-        state.mode = b.getAttribute("data-mode") || "perp_options";
-        syncModeUI();
-        loadGates();
+        state.tab = b.getAttribute("data-tab") || "perp_options";
+        syncTabUI();
+        if (state.tab === "perp_options" || state.tab === "options_options") {
+          void loadGates();
+        } else {
+          const el = $("hp-gate-line");
+          if (el) {
+            el.textContent =
+              state.tab === "history"
+                ? "历史记录:独立对冲表,与普通交易记录分离"
+                : "统计:止盈=盈利−保费;止损=期权盈利−永续亏损";
+          }
+        }
       });
     });
     document.querySelectorAll(".hp-uly-btn, .hp-uly-btn-oo").forEach(function (b) {
@@ -468,27 +495,37 @@
         });
       });
     }
-    if ($("hp-refresh")) $("hp-refresh").addEventListener("click", function () {
-      void refreshAll();
-    });
-    if ($("hp-load-chain")) $("hp-load-chain").addEventListener("click", function () {
-      void loadChain();
-    });
-    if ($("hp-oo-load-chain")) $("hp-oo-load-chain").addEventListener("click", function () {
-      void loadChain();
-    });
-    if ($("hp-exp-select"))
-      $("hp-exp-select").addEventListener("change", renderListStrikes);
-    if ($("hp-oo-exp-select"))
-      $("hp-oo-exp-select").addEventListener("change", renderTStrikes);
+    if ($("hp-refresh"))
+      $("hp-refresh").addEventListener("click", function () {
+        void refreshAll();
+      });
+    if ($("hp-load-chain"))
+      $("hp-load-chain").addEventListener("click", function () {
+        void loadChain();
+      });
+    if ($("hp-oo-load-chain"))
+      $("hp-oo-load-chain").addEventListener("click", function () {
+        void loadChain();
+      });
+    if ($("hp-exp-select")) $("hp-exp-select").addEventListener("change", renderListStrikes);
+    if ($("hp-oo-exp-select")) $("hp-oo-exp-select").addEventListener("change", renderTStrikes);
     if ($("hp-sheets")) $("hp-sheets").addEventListener("input", updatePremiumLine);
-    if ($("hp-preview-btn")) $("hp-preview-btn").addEventListener("click", function () {
-      void runPreview();
-    });
+    if ($("hp-preview-btn"))
+      $("hp-preview-btn").addEventListener("click", function () {
+        state.mode = "perp_options";
+        void runPreview();
+      });
+    if ($("hp-preview-btn-oo"))
+      $("hp-preview-btn-oo").addEventListener("click", function () {
+        state.mode = "options_options";
+        void runPreview();
+      });
   }
 
   async function refreshAll() {
-    await loadGates();
+    if (state.tab === "perp_options" || state.tab === "options_options") {
+      await loadGates();
+    }
     try {
       await loadMarket();
     } catch (e) {
@@ -503,7 +540,7 @@
     }
   }
 
-  syncModeUI();
+  syncTabUI();
   bind();
   void refreshAll();
 })();