Paginate hub archive trade records at 5 per page.

Match the instance records pager so 内照明心 lists stay compact with prev/next controls.

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/archive.js

@@ -45,8 +45,13 @@
   const elMarkAuto = document.getElementById("archive-mark-auto");
   const elTrades = document.getElementById("archive-trades");
   const elTradesSection = document.getElementById("archive-trades-section");
+  const elTradesPager = document.getElementById("archive-trades-pager");
+  const elTradesPrev = document.getElementById("archive-trades-prev");
+  const elTradesNext = document.getElementById("archive-trades-next");
+  const elTradesPageLabel = document.getElementById("archive-trades-page-label");
   const ARCHIVE_MARK_AUTO_KEY = "hubArchiveMarkAuto";
-  const TRADES_VISIBLE_ROWS_CHART_OPEN = 10;
+  const TRADES_PAGE_SIZE = 5;
+  const TRADES_VISIBLE_ROWS_CHART_OPEN = 5;
 
   const TF_MS = {
     "5m": 5 * 60_000,
@@ -61,6 +66,7 @@
   let selectedQuoteId = null;
   let editingQuoteId = null;
   let dailyTrades = [];
+  let tradesPage = 0;
   let dailyStats = { open_count: 0, by_exchange: {} };
   let periodMode = "today";
   let periodLabel = "";
@@ -1487,6 +1493,16 @@
     );
   }
 
+  function ensureTradePageVisible(tr) {
+    if (!tr || !dailyTrades.length) return;
+    const key = tradeRowKey(tr);
+    const idx = dailyTrades.findIndex(function (t) {
+      return tradeRowKey(t) === key;
+    });
+    if (idx < 0) return;
+    tradesPage = Math.floor(idx / TRADES_PAGE_SIZE);
+  }
+
   async function switchToTrade(tr) {
     if (!tr) return;
     const exKey = String(tr.exchange_key || "").toLowerCase();
@@ -1502,6 +1518,7 @@
 
     selected = { exchange_key: exKey, symbol: sym };
     selectedTradeKey = key;
+    ensureTradePageVisible(tr);
     renderTrades();
 
     const needSymbolReload = prevEx !== exKey || prevSym !== sym;
@@ -1535,19 +1552,49 @@
     await switchToTrade(tr);
   }
 
+  function tradesPageCount() {
+    return Math.max(1, Math.ceil((dailyTrades.length || 0) / TRADES_PAGE_SIZE));
+  }
+
+  function clampTradesPage() {
+    const pages = tradesPageCount();
+    if (tradesPage >= pages) tradesPage = pages - 1;
+    if (tradesPage < 0) tradesPage = 0;
+  }
+
+  function updateTradesPager() {
+    clampTradesPage();
+    const pages = tradesPageCount();
+    const show = dailyTrades.length > TRADES_PAGE_SIZE;
+    if (elTradesPager) elTradesPager.hidden = !show;
+    if (elTradesPageLabel) {
+      elTradesPageLabel.textContent = "第 " + (tradesPage + 1) + " / " + pages + " 页";
+    }
+    if (elTradesPrev) elTradesPrev.disabled = tradesPage <= 0;
+    if (elTradesNext) elTradesNext.disabled = tradesPage + 1 >= pages;
+  }
+
+  function pagedDailyTrades() {
+    clampTradesPage();
+    const start = tradesPage * TRADES_PAGE_SIZE;
+    return dailyTrades.slice(start, start + TRADES_PAGE_SIZE);
+  }
+
   function renderTrades() {
     if (!elTrades) return;
     if (!dailyTrades.length) {
       elTrades.innerHTML =
         '<p class="archive-empty">该日暂无交易记录.可调整日期或点击「同步」拉取数据.</p>';
+      updateTradesPager();
       return;
     }
+    const pageRows = pagedDailyTrades();
     elTrades.innerHTML =
       '<table class="archive-trades-table"><thead><tr>' +
       "<th>交易所</th><th>合约</th><th>开仓类型</th><th>开仓时间</th><th>平仓时间</th><th>持仓时长</th>" +
       "<th>方向</th><th>结果</th><th>盈亏</th><th>成交额</th><th>手续费</th><th>标签</th><th>备注</th><th>操作</th>" +
       "</tr></thead><tbody>" +
-      dailyTrades
+      pageRows
         .map(function (t) {
           const tid = t.trade_id || t.id;
           const exKey = String(t.exchange_key || "").toLowerCase();
@@ -1643,6 +1690,8 @@
         .join("") +
       "</tbody></table>";
 
+    updateTradesPager();
+
     elTrades.querySelectorAll(".archive-del-btn").forEach(function (btn) {
       btn.addEventListener("click", function (ev) {
         ev.stopPropagation();
@@ -1781,6 +1830,7 @@
     if (elQuoteDate && tradingDay && !elQuoteDate.value) elQuoteDate.value = tradingDay;
     syncPeriodUI();
     dailyTrades = j.trades || [];
+    tradesPage = 0;
     dailyStats = j.stats || { open_count: 0, by_exchange: {} };
     if (periodMode === "today" && tradingDay) {
       selectedCalendarDay = tradingDay;
@@ -1852,6 +1902,20 @@
   function bindEvents() {
     if (elBtnRefresh) elBtnRefresh.addEventListener("click", loadDailyTrades);
     if (elBtnSync) elBtnSync.addEventListener("click", syncAll);
+    if (elTradesPrev) {
+      elTradesPrev.addEventListener("click", function () {
+        if (tradesPage <= 0) return;
+        tradesPage -= 1;
+        renderTrades();
+      });
+    }
+    if (elTradesNext) {
+      elTradesNext.addEventListener("click", function () {
+        if (tradesPage + 1 >= tradesPageCount()) return;
+        tradesPage += 1;
+        renderTrades();
+      });
+    }
     if (elExchange) {
       elExchange.addEventListener("change", function () {
         void loadDailyTrades();