dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep options review paging in-card without layout jump.

Browse Source 
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>
This commit is contained in:
dekun
2026-07-17 11:40:23 +08:00
parent 77ab7503a1
commit 57f8d6761c
2 changed files with 64 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/options_review.js
+59 -10
View File
@@ -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 = '<tr><td colspan="6" class="muted">加载中…</td></tr>';
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;
tbody.innerHTML = '<tr><td colspan="6" class="muted">加载中…</td></tr>';
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
+5 -4
View File
@@ -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">
<div class="options-strike-table-wrap or-reviewed-table-wrap" id="or-reviewed-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>