From 57f8d6761c897a3104c6bb440619b3f4d5b56108 Mon Sep 17 00:00:00 2001 From: dekun Date: Fri, 17 Jul 2026 11:40:23 +0800 Subject: [PATCH] Keep options review paging in-card without layout jump. Soft-load table rows on prev/next so height stays stable and the page below does not flash. Co-authored-by: Cursor --- lib/common/static/options_review.js | 69 ++++++++++++++++--- .../templates/options_review_panel.html | 9 +-- 2 files changed, 64 insertions(+), 14 deletions(-) diff --git a/lib/common/static/options_review.js b/lib/common/static/options_review.js index 1c39242..ab35614 100644 --- a/lib/common/static/options_review.js +++ b/lib/common/static/options_review.js @@ -256,12 +256,37 @@ return clamped; } + function beginListLoad(wrapId, soft) { + var wrap = $(wrapId); + if (!wrap) return null; + if (soft) { + if (!wrap.style.minHeight) { + wrap.style.minHeight = Math.max(wrap.offsetHeight, 1) + "px"; + } + wrap.classList.add("or-list-loading"); + } else { + wrap.classList.remove("or-list-loading"); + wrap.style.minHeight = ""; + } + return wrap; + } + + function endListLoad(wrap) { + if (!wrap) return; + wrap.classList.remove("or-list-loading"); + wrap.style.minHeight = ""; + } + function loadTrades(opts) { opts = opts || {}; var doSync = opts.sync !== false; + var soft = !!opts.soft; var tbody = $("or-trades-tbody"); if (!tbody) return; - tbody.innerHTML = '加载中…'; + var wrap = beginListLoad("or-trades-wrap", soft); + if (!soft) { + tbody.innerHTML = '加载中…'; + } var p = baseQs(); p.set("reviewed", "0"); p.set("limit", String(PAGE_SIZE)); @@ -275,6 +300,7 @@ if (doSync) setSyncStatus("本地记录已加载"); if (!data.ok) { tbody.innerHTML = '加载失败'; + endListLoad(wrap); return; } if (applyPagerMeta(data, "trades") && Number(data.total || 0) > 0) { @@ -286,6 +312,7 @@ if (!rows.length) { tbody.innerHTML = '暂无待复盘记录'; + endListLoad(wrap); return; } tbody.innerHTML = rows @@ -341,18 +368,24 @@ hideTrade(Number(btn.getAttribute("data-id"))); }); }); + endListLoad(wrap); }) .catch(function () { tbody.innerHTML = '加载失败'; + endListLoad(wrap); }); } function loadReviewed(opts) { opts = opts || {}; var doSync = opts.sync === true; + var soft = !!opts.soft; var tbody = $("or-reviewed-tbody"); if (!tbody) return; - tbody.innerHTML = '加载中…'; + var wrap = beginListLoad("or-reviewed-wrap", soft); + if (!soft) { + tbody.innerHTML = '加载中…'; + } var p = baseQs(); p.set("reviewed", "1"); p.set("limit", String(PAGE_SIZE)); @@ -365,6 +398,7 @@ .then(function (data) { if (!data.ok) { tbody.innerHTML = '加载失败'; + endListLoad(wrap); return; } if (applyPagerMeta(data, "reviewed") && Number(data.total || 0) > 0) { @@ -375,6 +409,7 @@ reviewedCache = {}; if (!rows.length) { tbody.innerHTML = '暂无复盘记录'; + endListLoad(wrap); return; } tbody.innerHTML = rows @@ -413,9 +448,11 @@ openDetail(Number(tr.getAttribute("data-id"))); }); }); + endListLoad(wrap); }) .catch(function () { tbody.innerHTML = '加载失败'; + endListLoad(wrap); }); } @@ -988,31 +1025,43 @@ if (clearBtn) clearBtn.addEventListener("click", hideJournalForm); if (delBtn) delBtn.addEventListener("click", deleteEntry); if (prevBtn) { - prevBtn.addEventListener("click", function () { + prevBtn.addEventListener("click", function (ev) { + ev.preventDefault(); + ev.stopPropagation(); if (tradesPage <= 0) return; tradesPage -= 1; - loadTrades({ sync: false }); + updateTradesPager(); + loadTrades({ sync: false, soft: true }); }); } if (nextBtn) { - nextBtn.addEventListener("click", function () { + nextBtn.addEventListener("click", function (ev) { + ev.preventDefault(); + ev.stopPropagation(); if (tradesPage + 1 >= tradesPages) return; tradesPage += 1; - loadTrades({ sync: false }); + updateTradesPager(); + loadTrades({ sync: false, soft: true }); }); } if (reviewedPrev) { - reviewedPrev.addEventListener("click", function () { + reviewedPrev.addEventListener("click", function (ev) { + ev.preventDefault(); + ev.stopPropagation(); if (reviewedPage <= 0) return; reviewedPage -= 1; - loadReviewed({ sync: false }); + updateReviewedPager(); + loadReviewed({ sync: false, soft: true }); }); } if (reviewedNext) { - reviewedNext.addEventListener("click", function () { + reviewedNext.addEventListener("click", function (ev) { + ev.preventDefault(); + ev.stopPropagation(); if (reviewedPage + 1 >= reviewedPages) return; reviewedPage += 1; - loadReviewed({ sync: false }); + updateReviewedPager(); + loadReviewed({ sync: false, soft: true }); }); } if (detailClose) detailClose.addEventListener("click", hideDetail); diff --git a/lib/options/templates/options_review_panel.html b/lib/options/templates/options_review_panel.html index 98f1512..ad097a8 100644 --- a/lib/options/templates/options_review_panel.html +++ b/lib/options/templates/options_review_panel.html @@ -36,6 +36,8 @@ .or-detail-img-label{display:block;font-size:.7rem;margin-bottom:4px;opacity:.8} .or-detail-img-thumb{max-width:100%;max-height:160px;border-radius:4px;cursor:pointer} .or-pager{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.74rem} + .or-list-loading{opacity:.55;pointer-events:none;transition:opacity .12s ease} + .or-trades-table-wrap,.or-reviewed-table-wrap{min-height:9.5rem} {# 1. 交易记录(含 Tab/筛选,固定约5行) #} @@ -70,7 +72,7 @@

期权交易记录

-
+
@@ -180,8 +182,7 @@

复盘记录

已保存的复盘(每页5条).点一行查看详情.

-

保存后出现在此.点一行查看详情(含截图与完整复盘内容).

-
+
@@ -223,4 +224,4 @@ - +