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
@@ -1,31 +1,47 @@
 {
  "exchange": "okx",
  "title": "OKX · 开仓检查清单",
-  "version": "v0.2",
+  "version": "v0.3",
  "groups": [
    {
      "title": "账户与方向",
      "items": [
-        "已选定做多或做空，且与 4H/大级别方向一致",
+        "已选定做多或做空，且与 4H/大级别结构方向一致",
        "趋势户 profile（非 Gate 日内 BTC/ETH 白名单）",
-        "开仓类型已从 大分歧A / 大分歧B / 小分歧 中选定"
+        "计仓模式为以损定仓（risk），关键位自动单已关闭",
+        "同一币种无未计划的对冲叠仓"
      ]
    },
    {
-      "title": "空侧镜像（若做空）",
+      "title": "开仓类型选型",
      "items": [
-        "大分歧A：不创新高企稳",
-        "大分歧B：向下突破确认",
-        "小分歧：二次探顶 / 倒 N / 5m 空头排列"
+        "已明确：大分歧A / 大分歧B / 小分歧 三选一",
+        "大分歧 A/B → 趋势单；小分歧 → 波段单（系统自动）",
+        "第三次小分歧 → 不做新单",
+        "小分歧不追突破"
      ]
    },
    {
-      "title": "纪律与杠杆",
+      "title": "做多 · 结构与入场",
      "items": [
-        "第三次小分歧不做新单",
-        "小分歧不追突破",
-        "杠杆：BTC/ETH 10x，其它 5x",
-        "止盈止损随行情人工设定，本文档不量化 RR"
+        "大分歧A：5m/15m 收敛且不创新低企稳",
+        "大分歧B：向上突破已确认，非仅刺破",
+        "小分歧：二次探底 / N 字 / 5m 三均线重新多头"
+      ]
+    },
+    {
+      "title": "做空 · 结构与入场",
+      "items": [
+        "大分歧A：5m/15m 收敛且不创新高企稳",
+        "大分歧B：向下突破已确认，非仅刺破",
+        "小分歧：二次探顶 / 倒 N / 5m 三均线重新空头"
+      ]
+    },
+    {
+      "title": "杠杆与出场",
+      "items": [
+        "杠杆：BTC/ETH 10x，其它山寨 5x（可选手改但须有理由）",
+        "止盈止损随行情人工设定，不在此清单量化 RR"
      ]
    }
  ]
@@ -1,37 +1,109 @@
 # OKX·多空趋势账户

-> **状态**：v0.2  
-> 与 [binance-alt-trend-long.md](./binance-alt-trend-long.md) 共用开仓类型与 UI；本节仅补 **空侧镜像**。
+> **状态**：v0.3（独立策略说明；已实现开仓类型 UI + 复盘联动）

 ---

-## 1. 账户差异
+## 1. 账户定位

-| 项 | 币安 | OKX |
-|----|------|-----|
-| 方向 | 仅多 | 多 + 空 |
-| 开仓类型 UI | 大分歧A / B / 小分歧 | **相同三字** |
-| profile | 趋势户 | 趋势户（非 BTC/ETH 日内白名单） |
-| 小分歧 | 波段单 | 波段单（同左） |
-| 杠杆默认 | BTC/ETH 10x，其它 5x | **同左** |
+| 项 | 说明 |
+|----|------|
+| 交易所 | OKX 永续合约 |
+| 方向 | **做多 + 做空**（`TRADE_DIRECTION=both`，可按需限制为 `long_only` / `short_only`） |
+| 计仓 | `POSITION_SIZING_MODE=risk`（以损定仓） |
+| 关键位自动单 | `KEY_AUTO_ORDER_ENABLED=false` |
+| UI profile | **趋势户**（非 Gate BTC/ETH 日内白名单） |
+
+**选方向原则**：开仓前确认 4H / 日线大级别结构与所选「做多/做空」一致；逆势单不在本策略范围内。

 ---

-## 2. 空侧镜像（标签不变）
+## 2. 开仓类型（下单监控）

-| 标签 | 做多 | 做空 |
+界面 **仅三选一**，标签与存储 code 三所统一；**方向**由表单「做多/做空」决定，**单型**由下拉决定。
+
+| 界面标签 | 存储 code | 联动 | 做多语义 | 做空语义 |
+|----------|-----------|------|----------|----------|
+| **大分歧A** | `big_div_a` | 趋势单 | 突破前收敛，**不创新低**企稳 | 突破前收敛，**不创新高**企稳 |
+| **大分歧B** | `big_div_b` | 趋势单 | 结构**向上突破**确认后入场 | 结构**向下突破**确认后入场 |
+| **小分歧** | `small_div` | **波段单** | 二次探底 → N 字；或 5m 三均线重新**多头** | 二次探顶 → 倒 N；或 5m 三均线重新**空头** |
+
+- 下拉不可手输；原「趋势单/波段单」手选已隐藏，由开仓类型自动写入 `trade_style`。
+- **小分歧 = 波段单**（界面旁显示「波段单」）；A/B = 趋势单。
+- A/B 差异在 **入场方式**，不绑定盈亏比。
+
+### 杠杆（与开仓类型、方向无关）
+
+| 币种 | 默认杠杆 |
+|------|----------|
+| BTC、ETH | **10x**（`BTC_LEVERAGE`） |
+| 其它山寨 | **5x**（`ALT_LEVERAGE`） |
+
+选币种后表单「杠杆」自动带入；可选手改，须有理由。大分歧 / 小分歧 / 多 / 空 **均适用同一套杠杆规则**。
+
+---
+
+## 3. 大分歧（趋势单）
+
+**前提**：大级别顺势、上方（多）或下方（空）仍有空间。
+
+### 3.1 大分歧A — 做多
+
+- 4h/日线大结构向上
+- 5m/15m 收敛，**不创新低** 企稳进（不等突破）
+
+### 3.2 大分歧A — 做空
+
+- 4h/日线大结构向下
+- 5m/15m 收敛，**不创新高** 企稳进（不等跌破）
+
+### 3.3 大分歧B — 做多
+
+- 同上大级别多头结构
+- **向上突破确认** 后入场（非仅刺破）
+
+### 3.4 大分歧B — 做空
+
+- 同上大级别空头结构
+- **向下突破确认** 后入场（非仅刺破）
+
+---
+
+## 4. 小分歧（波段单）
+
+- **前两次**小分歧可做，**第三次不做**新单
+- 低吸 / 高抛为主，**不追突破**
+- **做多**：二次探底 → N 字突破；或 5m 三均线重新多头排列
+- **做空**：二次探顶 → 倒 N 跌破；或 5m 三均线重新空头排列
+
+---
+
+## 5. 纪律
+
+1. 方向与大级别一致；不做「顺手反向单」
+2. 第三次小分歧不做新单
+3. 小分歧不追突破
+4. 止盈 / 止损 / 是否手平：**随行情**，本文档不量化 RR
+5. 同一币种不宜多空对冲叠仓（除非明确对冲计划）
+
+---
+
+## 6. 持仓与出场（定性）
+
+| 单型 | 做多 | 做空 |
 |------|------|------|
-| 大分歧A | 不创新低企稳 | **不创新高**企稳 |
-| 大分歧B | 向上突破确认 | **向下突破**确认 |
-| 小分歧 | 二次探底 / N 字 / 5m 多头 | 二次**探顶** / 倒 N / 5m **空头** |
-
-方向由表单「做多/做空」决定；复盘与交易记录仍存 `大分歧A` 等短标签。
+| 大分歧 | 可长持；途中两次小分歧后远目标未到，**可手平** | 同左 |
+| 小分歧 | 短拿，常手平 | 短拿，常手平 |

 ---

-## 3–6. 纪律 / 出场 / 系统字段
+## 7. 系统字段

-同 Binance 文档 §3–§7（含不写盈亏比、第三次小分歧不做等）。
+| 操作 | 字段 |
+|------|------|
+| 下单 | `order_monitors.entry_model` + 自动 `trade_style`；方向写入订单侧 |
+| 平仓 | `trade_records.entry_reason` = 界面标签（大分歧A 等） |
+| 复盘 | 下拉同三项 + 策略项 +「其他」 |

 ---

@@ -39,5 +111,6 @@

 | 版本 | 日期 | 说明 |
 |------|------|------|
-| v0.2 | 2026-07-06 | 与 Binance 同步实现 |
+| v0.3 | 2026-07-06 | 独立完整策略说明，不再引用币安镜像 |
+| v0.2 | 2026-07-06 | 定稿 UI 短标签 |
 | v0.1 | 2026-07-06 | 讨论稿 |
@@ -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 };