feat: strategy page scroll layout, OKX standalone docs, split print

Right checklist drives card height with left doc scroll; rewrite OKX strategy MD and checklist as standalone; add per-column print buttons.

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

manual_trading_hub/static/strategy.js

@@ -9,19 +9,24 @@
   const statusEl = document.getElementById("strategy-load-status");
   const docBody = document.getElementById("strategy-doc-body");
   const docSource = document.getElementById("strategy-doc-source");
+  const docCard = page.querySelector(".strategy-doc-card");
+  const checklistCard = page.querySelector(".strategy-checklist-card");
   const checklistTitle = document.getElementById("strategy-checklist-title");
+  const checklistTitlePrint = document.getElementById("strategy-checklist-title-print");
   const checklistBody = document.getElementById("strategy-checklist-body");
   const footnotesEl = document.getElementById("strategy-checklist-footnotes");
   const printTitle = document.getElementById("strategy-print-title");
   const printMeta = document.getElementById("strategy-print-meta");
   const printHeader = document.getElementById("strategy-print-header");
-  const btnPrint = document.getElementById("strategy-btn-print");
+  const btnPrintDoc = document.getElementById("strategy-btn-print-doc");
+  const btnPrintChecklist = document.getElementById("strategy-btn-print-checklist");
   const btnDownload = document.getElementById("strategy-btn-download");
 
   let activeKey = "binance";
   let tabsMeta = [];
   let cache = {};
   let bound = false;
+  let heightSyncRaf = 0;
 
   async function apiFetch(url, opts) {
     const r = await fetch(url, { credentials: "same-origin", ...(opts || {}) });
@@ -43,6 +48,22 @@
       .replace(/"/g, """);
   }
 
+  function syncDocCardHeight() {
+    if (!docCard || !checklistCard || window.matchMedia("(max-width: 960px)").matches) {
+      if (docCard) docCard.style.height = "";
+      return;
+    }
+    docCard.style.height = `${checklistCard.offsetHeight}px`;
+  }
+
+  function scheduleHeightSync() {
+    if (heightSyncRaf) cancelAnimationFrame(heightSyncRaf);
+    heightSyncRaf = requestAnimationFrame(() => {
+      heightSyncRaf = 0;
+      syncDocCardHeight();
+    });
+  }
+
   function renderTabs() {
     if (!tabsEl) return;
     tabsEl.innerHTML = tabsMeta
@@ -64,9 +85,9 @@
 
   function renderChecklist(checklist) {
     const cl = checklist || {};
-    if (checklistTitle) {
-      checklistTitle.textContent = cl.title || "开仓检查清单";
-    }
+    const title = cl.title || "开仓检查清单";
+    if (checklistTitle) checklistTitle.textContent = title;
+    if (checklistTitlePrint) checklistTitlePrint.textContent = title;
     if (!checklistBody) return;
     const groups = cl.groups || [];
     if (!groups.length) {
@@ -86,6 +107,7 @@
       footnotesEl.innerHTML = notes.map((n) => `<li>${esc(n)}</li>`).join("");
       footnotesEl.classList.toggle("hidden", !notes.length);
     }
+    scheduleHeightSync();
   }
 
   function renderPayload(data) {
@@ -101,6 +123,7 @@
       printMeta.textContent = `${data.label || activeKey}${ver}`;
     }
     if (printHeader) printHeader.classList.remove("hidden");
+    scheduleHeightSync();
   }
 
   async function loadExchange(key) {
@@ -117,6 +140,7 @@
       if (statusEl) statusEl.textContent = String(e);
       if (docBody) docBody.innerHTML = "";
       if (checklistBody) checklistBody.innerHTML = "";
+      scheduleHeightSync();
     }
   }
 
@@ -129,25 +153,36 @@
     renderTabs();
   }
 
+  function printSection(mode) {
+    document.body.classList.remove("hub-strategy-print-doc", "hub-strategy-print-checklist");
+    document.body.classList.add("hub-strategy-printing");
+    if (mode === "doc") document.body.classList.add("hub-strategy-print-doc");
+    if (mode === "checklist") document.body.classList.add("hub-strategy-print-checklist");
+    window.print();
+    window.addEventListener(
+      "afterprint",
+      () => {
+        document.body.classList.remove(
+          "hub-strategy-printing",
+          "hub-strategy-print-doc",
+          "hub-strategy-print-checklist"
+        );
+      },
+      { once: true }
+    );
+  }
+
   function bindActions() {
     if (bound) return;
     bound = true;
-    if (btnPrint) {
-      btnPrint.addEventListener("click", () => {
-        document.body.classList.add("hub-strategy-printing");
-        window.print();
-        window.addEventListener(
-          "afterprint",
-          () => document.body.classList.remove("hub-strategy-printing"),
-          { once: true }
-        );
-      });
-    }
+    if (btnPrintDoc) btnPrintDoc.addEventListener("click", () => printSection("doc"));
+    if (btnPrintChecklist) btnPrintChecklist.addEventListener("click", () => printSection("checklist"));
     if (btnDownload) {
       btnDownload.addEventListener("click", () => {
         window.location.href = `/api/strategy/${encodeURIComponent(activeKey)}/export`;
       });
     }
+    window.addEventListener("resize", scheduleHeightSync);
   }
 
   async function init() {
@@ -161,7 +196,7 @@
   }
 
   function destroy() {
-    /* 保留 cache，切页再进更快 */
+    window.removeEventListener("resize", scheduleHeightSync);
   }
 
   window.hubStrategyPage = { init, destroy };