Keep calendar day trades inline and hide K-line by default.

Show selected-day trades under the calendar without tab jumps, put trades first, and open the chart only via toolbar or row actions.

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

manual_trading_hub/static/archive.js

@@ -43,6 +43,9 @@
   const elQuoteDayTradesBody = document.getElementById("archive-quote-day-trades-body");
   const elChartSection = document.getElementById("archive-chart-section");
   const elChartTitle = document.getElementById("archive-chart-title");
+  const elBtnChartClose = document.getElementById("archive-btn-chart-close");
+  const elCalDayTradesMeta = document.getElementById("archive-calendar-day-trades-meta");
+  const elCalDayTradesBody = document.getElementById("archive-calendar-day-trades-body");
   const elTfTabs = document.getElementById("archive-tf-tabs");
   const elViewMode = document.getElementById("archive-view-mode");
   const elJumpAt = document.getElementById("archive-jump-at");
@@ -324,7 +327,7 @@
   }
 
   function isChartOpen() {
-    return !!(elChartSection && elChartSection.open);
+    return !!(elChartSection && !elChartSection.hidden);
   }
 
   function syncTradesLayout() {
@@ -346,12 +349,16 @@
 
   function setChartOpen(on) {
     if (!elChartSection) return;
-    elChartSection.open = !!on;
+    const want = !!on;
+    elChartSection.hidden = !want;
     if (elBtnChartToggle) {
-      elBtnChartToggle.classList.toggle("is-active", !!on);
+      elBtnChartToggle.classList.toggle("is-active", want);
+    }
+    if (want && archiveContentTab !== "trades") {
+      setArchiveContentTab("trades");
     }
     syncTradesLayout();
-    if (!on) {
+    if (!want) {
       destroyChart();
       return;
     }
@@ -561,7 +568,6 @@
         if (elQuoteDate) elQuoteDate.value = day;
         if (elFilterSick) elFilterSick.checked = false;
         syncPeriodUI();
-        setArchiveContentTab("trades");
         void loadDailyTrades();
       },
     });
@@ -999,6 +1005,7 @@
       void loadQuoteDayTrades();
     } else if (next === "calendar") {
       void loadCalendar();
+      renderCalendarDayTrades();
     } else if (next === "trades") {
       requestAnimationFrame(syncTradesLayout);
     }
@@ -1714,6 +1721,75 @@
     await switchToTrade(tr);
   }
 
+  function renderCalendarDayTrades() {
+    if (!elCalDayTradesBody) return;
+    const day =
+      selectedCalendarDay ||
+      (periodMode === "today" && tradingDay) ||
+      (elTradingDay && elTradingDay.value) ||
+      "";
+    if (elCalDayTradesMeta) {
+      elCalDayTradesMeta.textContent =
+        periodMode === "today" && day ? day + " · " + dailyTrades.length + " 笔" : "";
+    }
+    if (periodMode !== "today" || !day) {
+      elCalDayTradesBody.innerHTML =
+        '<p class="archive-empty">点击日历中的日期,在下方查看当日交易记录.</p>';
+      return;
+    }
+    if (!dailyTrades.length) {
+      elCalDayTradesBody.innerHTML =
+        '<p class="archive-empty">该日暂无交易记录.</p>';
+      return;
+    }
+    elCalDayTradesBody.innerHTML =
+      '<table class="archive-quote-day-trades-table"><thead><tr>' +
+      "<th>交易所</th><th>合约</th><th>方向</th><th>开仓</th><th>平仓</th><th>盈亏</th><th>标签</th><th></th>" +
+      "</tr></thead><tbody>" +
+      dailyTrades
+        .map(function (t) {
+          const rowKey = tradeRowKey(t);
+          const tag = quoteTagLabel(t);
+          return (
+            "<tr>" +
+            "<td>" +
+            esc(tradeRowExchange(t)) +
+            "</td>" +
+            "<td>" +
+            esc(t.symbol || "—") +
+            "</td>" +
+            "<td>" +
+            esc(t.direction || "—") +
+            "</td>" +
+            '<td class="archive-dt">' +
+            fmtDt(t.opened_at) +
+            "</td>" +
+            '<td class="archive-dt">' +
+            fmtDt(t.closed_at) +
+            "</td>" +
+            '<td class="' +
+            pnlClass(t.pnl_amount) +
+            '">' +
+            fmtPnl(t.pnl_amount) +
+            "</td>" +
+            "<td>" +
+            esc(tag) +
+            "</td>" +
+            '<td><button type="button" class="ghost archive-cal-chart-btn" data-key="' +
+            esc(rowKey) +
+            '">图表</button></td></tr>'
+          );
+        })
+        .join("") +
+      "</tbody></table>";
+    elCalDayTradesBody.querySelectorAll(".archive-cal-chart-btn").forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        const tr = findTradeByKey(btn.getAttribute("data-key"));
+        if (tr) void openTradeChart(tr);
+      });
+    });
+  }
+
   function tradesPageCount() {
     return Math.max(1, Math.ceil((dailyTrades.length || 0) / TRADES_PAGE_SIZE));
   }
@@ -2000,6 +2076,7 @@
     }
     renderStats();
     renderTrades();
+    renderCalendarDayTrades();
     void loadCalendar();
     if (archiveContentTab === "quotes") void loadQuoteDayTrades();
     setStatus(
@@ -2122,16 +2199,9 @@
         }
       });
     }
-    if (elChartSection) {
-      elChartSection.addEventListener("toggle", async function () {
-        if (elBtnChartToggle) elBtnChartToggle.classList.toggle("is-active", elChartSection.open);
-        syncTradesLayout();
-        if (elChartSection.open) {
-          await ensureChartSelection();
-          void loadChart();
-        } else {
-          destroyChart();
-        }
+    if (elBtnChartClose) {
+      elBtnChartClose.addEventListener("click", function () {
+        setChartOpen(false);
       });
     }
     if (elQuoteForm) elQuoteForm.addEventListener("submit", submitQuoteForm);