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 <cursoragent@cursor.com>

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;
+    var wrap = beginListLoad("or-trades-wrap", soft);
+    if (!soft) {
       tbody.innerHTML = '<tr><td colspan="6" class="muted">加载中…</td></tr>';
+    }
     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 = '<tr><td colspan="6" class="muted">加载失败</td></tr>';
+          endListLoad(wrap);
           return;
         }
         if (applyPagerMeta(data, "trades") && Number(data.total || 0) > 0) {
@@ -286,6 +312,7 @@
         if (!rows.length) {
           tbody.innerHTML =
             '<tr><td colspan="6" class="muted">暂无待复盘记录</td></tr>';
+          endListLoad(wrap);
           return;
         }
         tbody.innerHTML = rows
@@ -341,18 +368,24 @@
             hideTrade(Number(btn.getAttribute("data-id")));
           });
         });
+        endListLoad(wrap);
       })
       .catch(function () {
         tbody.innerHTML = '<tr><td colspan="6" class="muted">加载失败</td></tr>';
+        endListLoad(wrap);
       });
   }
 
   function loadReviewed(opts) {
     opts = opts || {};
     var doSync = opts.sync === true;
+    var soft = !!opts.soft;
     var tbody = $("or-reviewed-tbody");
     if (!tbody) return;
+    var wrap = beginListLoad("or-reviewed-wrap", soft);
+    if (!soft) {
       tbody.innerHTML = '<tr><td colspan="6" class="muted">加载中…</td></tr>';
+    }
     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 = '<tr><td colspan="6" class="muted">加载失败</td></tr>';
+          endListLoad(wrap);
           return;
         }
         if (applyPagerMeta(data, "reviewed") && Number(data.total || 0) > 0) {
@@ -375,6 +409,7 @@
         reviewedCache = {};
         if (!rows.length) {
           tbody.innerHTML = '<tr><td colspan="6" class="muted">暂无复盘记录</td></tr>';
+          endListLoad(wrap);
           return;
         }
         tbody.innerHTML = rows
@@ -413,9 +448,11 @@
             openDetail(Number(tr.getAttribute("data-id")));
           });
         });
+        endListLoad(wrap);
       })
       .catch(function () {
         tbody.innerHTML = '<tr><td colspan="6" class="muted">加载失败</td></tr>';
+        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);

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}
     </style>
 
     {# 1. 交易记录(含 Tab/筛选,固定约5行) #}
@@ -70,7 +72,7 @@
             </label>
         </div>
         <h3 id="or-list-title" style="margin-top:0">期权交易记录</h3>
-        <div class="options-strike-table-wrap">
+        <div class="options-strike-table-wrap or-trades-table-wrap" id="or-trades-wrap">
             <table class="options-strike-table or-trades-table" id="or-trades-table">
                 <thead>
                     <tr>
@@ -180,8 +182,7 @@
     <div class="card" style="margin-bottom:10px">
         <h3>复盘记录</h3>
         <p class="muted" style="margin:0 0 8px;font-size:.72rem">已保存的复盘(每页5条).点一行查看详情.</p>
-        <p class="muted" style="margin-top:0;font-size:.72rem">保存后出现在此.点一行查看详情(含截图与完整复盘内容).</p>
+        <div class="options-strike-table-wrap or-reviewed-table-wrap" id="or-reviewed-wrap">
-        <div class="options-strike-table-wrap">
             <table class="options-strike-table or-reviewed-table" id="or-reviewed-table">
                 <thead>
                     <tr>
@@ -223,4 +224,4 @@
     </div>
 </div>
 
-<script src="/static/options_review.js?v=9"></script>
+<script src="/static/options_review.js?v=10"></script>