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/app.css

@@ -8741,8 +8741,41 @@ body.funds-fullscreen-open {
   font-size: 0.76rem;
   color: var(--muted);
 }
+.archive-calendar-day-trades {
+  margin-top: 12px;
+  border-top: 1px solid var(--border-soft);
+  padding-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.archive-calendar-day-trades .archive-panel-head h3 {
+  margin: 0;
+  font-size: 0.9rem;
+}
+.archive-calendar-day-trades-body {
+  overflow: auto;
+  max-height: min(360px, 45vh);
+}
+.archive-chart-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  background: var(--inset-surface);
+  margin-bottom: 10px;
+}
+.archive-chart-section[hidden] {
+  display: none !important;
+}
+.archive-chart-title-row {
+  font-size: 0.78rem;
+  color: var(--muted);
+}
 .archive-chart-section > :not(summary) {
-  padding: 0 10px 10px;
+  padding: 0;
 }
 .archive-trades-section {
   flex: 0 0 auto;

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) {
+    if (elBtnChartClose) {
-      elChartSection.addEventListener("toggle", async function () {
+      elBtnChartClose.addEventListener("click", function () {
-        if (elBtnChartToggle) elBtnChartToggle.classList.toggle("is-active", elChartSection.open);
+        setChartOpen(false);
-        syncTradesLayout();
-        if (elChartSection.open) {
-          await ensureChartSelection();
-          void loadChart();
-        } else {
-          destroyChart();
-        }
       });
     }
     if (elQuoteForm) elQuoteForm.addEventListener("submit", submitQuoteForm);

manual_trading_hub/static/index.html

@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-      <link rel="stylesheet" href="/assets/app.css?v=20260717-archive-4tabs" />
+      <link rel="stylesheet" href="/assets/app.css?v=20260717-archive-cal-chart" />
   <link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=4" />
   <link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
   <script src="/assets/account_risk_badge.js?v=4"></script>
@@ -445,7 +445,7 @@
     <div id="page-archive" class="page hidden">
       <div class="page-head">
         <h1><span class="head-tag">IN</span> 内照明心</h1>
-        <p class="page-desc">统计分析 · 图表概览 · 交易日历 · 交易记录 · 复盘语录</p>
+        <p class="page-desc">交易记录 · 交易日历 · 图表概览 · 复盘语录</p>
       </div>
       <div class="archive-toolbar toolbar">
         <label class="chk-label archive-toolbar-desktop"><input type="checkbox" id="archive-filter-profit" /> 盈利单</label>
@@ -487,35 +487,13 @@
       </section>
       <div class="archive-layout">
         <div class="archive-content-tabs" id="archive-content-tabs" role="tablist" aria-label="内照明心分区">
-          <button type="button" class="archive-content-tab" role="tab" aria-selected="false" data-archive-tab="viz" id="archive-tab-viz">图表概览</button>
-          <button type="button" class="archive-content-tab" role="tab" aria-selected="false" data-archive-tab="calendar" id="archive-tab-calendar">交易日历</button>
           <button type="button" class="archive-content-tab is-active" role="tab" aria-selected="true" data-archive-tab="trades" id="archive-tab-trades">交易记录</button>
+          <button type="button" class="archive-content-tab" role="tab" aria-selected="false" data-archive-tab="calendar" id="archive-tab-calendar">交易日历</button>
+          <button type="button" class="archive-content-tab" role="tab" aria-selected="false" data-archive-tab="viz" id="archive-tab-viz">图表概览</button>
           <button type="button" class="archive-content-tab" role="tab" aria-selected="false" data-archive-tab="quotes" id="archive-tab-quotes">复盘语录</button>
         </div>
-        <section class="archive-viz-panel archive-tab-panel" id="archive-panel-viz" role="tabpanel" aria-labelledby="archive-tab-viz" hidden>
-          <div class="archive-panel-head">
-            <h2>图表概览</h2>
-            <span id="archive-stats-viz-sub" class="archive-panel-meta"></span>
-          </div>
-          <div id="archive-stats-charts" class="archive-stats-charts"></div>
-        </section>
-        <section class="archive-calendar-panel archive-tab-panel" id="archive-panel-calendar" role="tabpanel" aria-labelledby="archive-tab-calendar" hidden>
-          <div class="archive-panel-head">
-            <h2>交易日历</h2>
-            <span id="archive-cal-summary-sub" class="archive-panel-meta">—</span>
-          </div>
-          <div id="archive-calendar-wrap" class="trade-cal-wrap">
-            <div class="trade-cal-head">
-              <button type="button" id="archive-cal-prev" class="ghost" title="上一月">‹</button>
-              <span id="archive-cal-title" class="trade-cal-title"></span>
-              <button type="button" id="archive-cal-next" class="ghost" title="下一月">›</button>
-            </div>
-            <div id="archive-calendar" class="trade-cal-grid-host" role="grid" aria-label="交易日历"></div>
-          </div>
-        </section>
         <main class="archive-main-panel archive-tab-panel is-active" id="archive-panel-trades" role="tabpanel" aria-labelledby="archive-tab-trades">
-          <details id="archive-chart-section" class="archive-acc-section archive-chart-section archive-panel-desktop">
+          <div id="archive-chart-section" class="archive-acc-section archive-chart-section" hidden>
-            <summary class="archive-acc-summary">K 线图表 <span id="archive-chart-title" class="archive-acc-sub">—</span></summary>
             <div class="archive-chart-toolbar toolbar">
               <div class="archive-tf-tabs" id="archive-tf-tabs" role="tablist">
                 <button type="button" class="archive-tf-btn" data-tf="5m">5m</button>
@@ -536,22 +514,58 @@
               </label>
               <button type="button" id="archive-btn-jump" class="ghost">跳转</button>
               <button type="button" id="archive-btn-reload-chart" class="primary">重载图表</button>
+              <button type="button" id="archive-btn-chart-close" class="ghost">关闭图表</button>
             </div>
             <div class="archive-chart-wrap">
               <div id="archive-chart" class="archive-chart-host"></div>
               <button type="button" id="archive-mark-auto" class="archive-mark-auto is-on" title="开启:该币种全部交易均标注开/平;关闭:仅当前选中一笔">自动</button>
             </div>
-          </details>
+            <div class="archive-chart-title-row">
-          <details id="archive-trades-section" class="archive-acc-section archive-trades-section archive-panel-desktop" open>
+              <span id="archive-chart-title" class="archive-acc-sub">—</span>
-            <summary class="archive-acc-summary">交易记录</summary>
+            </div>
+          </div>
+          <div id="archive-trades-section" class="archive-acc-section archive-trades-section">
+            <div class="archive-panel-head">
+              <h2>交易记录</h2>
+            </div>
             <div id="archive-trades" class="archive-trades"></div>
             <div class="archive-trades-pager" id="archive-trades-pager" hidden>
               <button type="button" class="ghost" id="archive-trades-prev">上一页</button>
               <span class="muted" id="archive-trades-page-label">第 1 / 1 页</span>
               <button type="button" class="ghost" id="archive-trades-next">下一页</button>
             </div>
-          </details>
+          </div>
         </main>
+        <section class="archive-calendar-panel archive-tab-panel" id="archive-panel-calendar" role="tabpanel" aria-labelledby="archive-tab-calendar" hidden>
+          <div class="archive-panel-head">
+            <h2>交易日历</h2>
+            <span id="archive-cal-summary-sub" class="archive-panel-meta">—</span>
+          </div>
+          <div id="archive-calendar-wrap" class="trade-cal-wrap">
+            <div class="trade-cal-head">
+              <button type="button" id="archive-cal-prev" class="ghost" title="上一月">‹</button>
+              <span id="archive-cal-title" class="trade-cal-title"></span>
+              <button type="button" id="archive-cal-next" class="ghost" title="下一月">›</button>
+            </div>
+            <div id="archive-calendar" class="trade-cal-grid-host" role="grid" aria-label="交易日历"></div>
+          </div>
+          <div class="archive-calendar-day-trades" id="archive-calendar-day-trades">
+            <div class="archive-panel-head">
+              <h3>当日交易</h3>
+              <span id="archive-calendar-day-trades-meta" class="archive-panel-meta"></span>
+            </div>
+            <div id="archive-calendar-day-trades-body" class="archive-calendar-day-trades-body">
+              <p class="archive-empty">点击日历中的日期,在下方查看当日交易记录.</p>
+            </div>
+          </div>
+        </section>
+        <section class="archive-viz-panel archive-tab-panel" id="archive-panel-viz" role="tabpanel" aria-labelledby="archive-tab-viz" hidden>
+          <div class="archive-panel-head">
+            <h2>图表概览</h2>
+            <span id="archive-stats-viz-sub" class="archive-panel-meta"></span>
+          </div>
+          <div id="archive-stats-charts" class="archive-stats-charts"></div>
+        </section>
         <aside class="archive-quotes-panel archive-tab-panel" id="archive-panel-quotes" role="tabpanel" aria-labelledby="archive-tab-quotes" hidden>
           <div class="archive-panel-head">
             <h2>复盘语录</h2>
@@ -1356,7 +1370,7 @@
   <script src="/assets/plan.js?v=20260614-plan-refresh"></script>
   <script src="/assets/calculator.js?v=20260715-calc-tabs"></script>
   <script src="/assets/trade_stats_calendar.js?v=3"></script>
-  <script src="/assets/archive.js?v=20260717-archive-4tabs"></script>
+  <script src="/assets/archive.js?v=20260717-archive-cal-chart"></script>
   <script src="/assets/quotes.js?v=20260717-quotes-feed"></script>
   <script src="/assets/funds.js?v=20260717-funds-scroll-fix"></script>
   <script src="/assets/dashboard.js?v=20260708-options-expiry-cd"></script>