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>
2026-07-06 03:25:56 +08:00
parent a4cd966370
commit 0d5b20c0db
5 changed files with 232 additions and 60 deletions
@@ -7523,14 +7523,38 @@ body.funds-fullscreen-open {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
-  align-items: stretch;
+  align-items: start;
 }
 .strategy-doc-card,
 .strategy-checklist-card {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
-  min-height: min(72vh, 900px);
+  min-width: 0;
+}
+.strategy-doc-card {
+  overflow: hidden;
+}
+.strategy-col-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+.strategy-col-head .strategy-col-title {
+  margin: 0;
+}
+.strategy-col-title-print {
+  display: none;
+  margin: 0 0 14px;
+  font-size: 0.95rem;
+  color: var(--text-soft);
+}
+.strategy-col-print {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  font-size: 0.78rem;
 }
 .strategy-col-title {
  margin: 0 0 14px;
@@ -7540,11 +7564,14 @@ body.funds-fullscreen-open {
 .strategy-doc-body {
  flex: 1 1 auto;
  min-height: 0;
+  max-height: 100%;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
  padding: 2px 10px 2px 4px;
+  scrollbar-gutter: stable;
 }
 .strategy-doc-body h2 {
  font-size: 1rem;
@@ -7589,9 +7616,8 @@ body.funds-fullscreen-open {
  color: var(--muted);
 }
 .strategy-checklist-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
+  flex: 0 0 auto;
+  overflow: visible;
  padding: 2px 10px 2px 4px;
 }
 .strategy-checklist-body ul {
@@ -7652,7 +7678,10 @@ body.funds-fullscreen-open {
  }
  .strategy-doc-card,
  .strategy-checklist-card {
-    min-height: auto;
+    align-self: stretch;
+  }
+  .strategy-doc-body {
+    max-height: min(50vh, 520px);
  }
 }

@@ -7669,10 +7698,22 @@ body.funds-fullscreen-open {
  body.hub-strategy-printing .strategy-print-header {
    display: block !important;
  }
+  body.hub-strategy-printing .strategy-col-title-print {
+    display: block !important;
+  }
  body.hub-strategy-printing .strategy-doc-body {
    max-height: none;
    overflow: visible;
  }
+  body.hub-strategy-print-doc .strategy-checklist-card {
+    display: none !important;
+  }
+  body.hub-strategy-print-checklist .strategy-doc-card {
+    display: none !important;
+  }
+  body.hub-strategy-printing .strategy-layout {
+    grid-template-columns: 1fr;
+  }
  body.hub-strategy-printing .card {
    break-inside: avoid;
    box-shadow: none;
@@ -15,7 +15,7 @@
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
  <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-  <link rel="stylesheet" href="/assets/app.css?v=20260706-strategy-layout" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260706-strategy-scroll" />
  <link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=3" />
  <link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
  <script src="/assets/account_risk_badge.js?v=4"></script>
@@ -860,7 +860,6 @@
          <p class="page-desc">三所策略文档 · 开仓前检查清单 · 可打印 / 下载</p>
        </div>
        <div class="strategy-page-actions no-print">
-          <button type="button" id="strategy-btn-print" class="ghost">打印当前</button>
          <button type="button" id="strategy-btn-download" class="primary">下载 HTML</button>
        </div>
      </div>
@@ -875,12 +874,20 @@
        </div>
        <div class="strategy-layout">
          <section class="card strategy-doc-card">
-            <h3 class="strategy-col-title">策略说明</h3>
+            <div class="strategy-col-head no-print">
+              <h3 class="strategy-col-title">策略说明</h3>
+              <button type="button" id="strategy-btn-print-doc" class="ghost strategy-col-print">打印</button>
+            </div>
+            <h3 class="strategy-col-title strategy-col-title-print">策略说明</h3>
            <div id="strategy-doc-body" class="strategy-doc-body prose"></div>
            <p id="strategy-doc-source" class="strategy-doc-source"></p>
          </section>
          <section class="card strategy-checklist-card">
-            <h3 id="strategy-checklist-title" class="strategy-col-title">开仓检查清单</h3>
+            <div class="strategy-col-head no-print">
+              <h3 id="strategy-checklist-title" class="strategy-col-title">开仓检查清单</h3>
+              <button type="button" id="strategy-btn-print-checklist" class="ghost strategy-col-print">打印</button>
+            </div>
+            <h3 id="strategy-checklist-title-print" class="strategy-col-title strategy-col-title-print">开仓检查清单</h3>
            <div id="strategy-checklist-body" class="strategy-checklist-body"></div>
            <ul id="strategy-checklist-footnotes" class="strategy-checklist-footnotes"></ul>
          </section>
@@ -1153,7 +1160,7 @@
  <script src="/assets/archive.js?v=20260626-archive-layout"></script>
  <script src="/assets/funds.js?v=20260609-hub-funds-fold"></script>
  <script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
-  <script src="/assets/strategy.js?v=1"></script>
+  <script src="/assets/strategy.js?v=2"></script>
  <script src="/assets/ai_review_render.js?v=3"></script>
  <script src="/assets/time_close_ui.js?v=3"></script>
  <script src="/assets/backup.js?v=1"></script>
@@ -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, "&quot;");
  }

+  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 };