Split archive into four content tabs.

Move chart overview and calendar into their own tabs so trades and quotes stay focused.

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

manual_trading_hub/static/app.css

@@ -7982,7 +7982,9 @@ body.funds-fullscreen-open {
   color: var(--text);
 }
 .archive-quotes-panel,
-.archive-main-panel {
+.archive-main-panel,
+.archive-viz-panel,
+.archive-calendar-panel {
   background: var(--panel);
   border: 1px solid var(--border-soft);
   border-radius: var(--radius);
@@ -8000,6 +8002,12 @@ body.funds-fullscreen-open {
   padding: 12px;
   overflow: visible;
 }
+.archive-viz-panel.is-active,
+.archive-calendar-panel.is-active {
+  gap: 10px;
+  padding: 12px;
+  overflow: visible;
+}
 .archive-main-panel.is-active {
   gap: 10px;
   padding: 12px;
@@ -8993,7 +9001,9 @@ body.funds-fullscreen-open {
     min-height: 0;
   }
   #page-archive .archive-quotes-panel,
-  #page-archive .archive-main-panel {
+  #page-archive .archive-main-panel,
+  #page-archive .archive-viz-panel,
+  #page-archive .archive-calendar-panel {
     flex: 0 0 auto;
     min-height: 0;
     max-height: none;

manual_trading_hub/static/archive.js

@@ -35,6 +35,8 @@
   const elQuoteContent = document.getElementById("archive-quote-content");
   const elQuoteSubmit = document.getElementById("archive-quote-submit");
   const elContentTabs = document.getElementById("archive-content-tabs");
+  const elPanelViz = document.getElementById("archive-panel-viz");
+  const elPanelCalendar = document.getElementById("archive-panel-calendar");
   const elPanelTrades = document.getElementById("archive-panel-trades");
   const elPanelQuotes = document.getElementById("archive-panel-quotes");
   const elQuoteDayTradesMeta = document.getElementById("archive-quote-day-trades-meta");
@@ -559,8 +561,8 @@
         if (elQuoteDate) elQuoteDate.value = day;
         if (elFilterSick) elFilterSick.checked = false;
         syncPeriodUI();
+        setArchiveContentTab("trades");
         void loadDailyTrades();
-        if (archiveContentTab === "quotes") void loadQuoteDayTrades();
       },
     });
     calendarWidget.ensureMonth(calendarRefDate());
@@ -968,9 +970,9 @@
   }
 
   function setArchiveContentTab(tab) {
-    const next = tab === "quotes" ? "quotes" : "trades";
+    const allowed = { viz: 1, calendar: 1, trades: 1, quotes: 1 };
+    const next = allowed[tab] ? tab : "trades";
     archiveContentTab = next;
-    const showQuotes = next === "quotes";
     if (elContentTabs) {
       elContentTabs.querySelectorAll(".archive-content-tab").forEach(function (btn) {
         const on = btn.getAttribute("data-archive-tab") === next;
@@ -978,18 +980,26 @@
         btn.setAttribute("aria-selected", on ? "true" : "false");
       });
     }
-    if (elPanelTrades) {
+    const panels = [
-      elPanelTrades.classList.toggle("is-active", !showQuotes);
+      [elPanelViz, "viz"],
-      elPanelTrades.hidden = showQuotes;
+      [elPanelCalendar, "calendar"],
-    }
+      [elPanelTrades, "trades"],
-    if (elPanelQuotes) {
+      [elPanelQuotes, "quotes"],
-      elPanelQuotes.classList.toggle("is-active", showQuotes);
+    ];
-      elPanelQuotes.hidden = !showQuotes;
+    panels.forEach(function (pair) {
-    }
+      const el = pair[0];
-    if (showQuotes) {
+      const key = pair[1];
+      if (!el) return;
+      const on = key === next;
+      el.classList.toggle("is-active", on);
+      el.hidden = !on;
+    });
+    if (next === "quotes") {
       syncQuoteDateFromTradingDay(false);
       void loadQuoteDayTrades();
-    } else {
+    } else if (next === "calendar") {
+      void loadCalendar();
+    } else if (next === "trades") {
       requestAnimationFrame(syncTradesLayout);
     }
   }

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-quotes-feed" />
+      <link rel="stylesheet" href="/assets/app.css?v=20260717-archive-4tabs" />
   <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">复盘语录 · 当日交易记录 · 按需查看 K 线</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>
@@ -484,19 +484,26 @@
           <h2>统计分析</h2>
         </div>
         <div id="archive-stats" class="archive-stats-bar"></div>
-        <details class="archive-acc-section archive-stats-viz-section" id="archive-stats-viz-section" open>
-          <summary class="archive-acc-summary">图表概览 <span id="archive-stats-viz-sub" class="archive-acc-sub">—</span></summary>
-          <div id="archive-stats-charts" class="archive-stats-charts"></div>
-        </details>
       </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="quotes" id="archive-tab-quotes">复盘语录</button>
         </div>
-        <main class="archive-main-panel archive-tab-panel is-active" id="archive-panel-trades" role="tabpanel" aria-labelledby="archive-tab-trades">
+        <section class="archive-viz-panel archive-tab-panel" id="archive-panel-viz" role="tabpanel" aria-labelledby="archive-tab-viz" hidden>
-          <details class="archive-acc-section archive-calendar-section" id="archive-calendar-section" open>
+          <div class="archive-panel-head">
-            <summary class="archive-acc-summary">交易日历 <span id="archive-cal-summary-sub" class="archive-acc-sub">—</span></summary>
+            <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>
@@ -505,7 +512,8 @@
             </div>
             <div id="archive-calendar" class="trade-cal-grid-host" role="grid" aria-label="交易日历"></div>
           </div>
-          </details>
+        </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">
             <summary class="archive-acc-summary">K 线图表 <span id="archive-chart-title" class="archive-acc-sub">—</span></summary>
             <div class="archive-chart-toolbar toolbar">
@@ -1348,7 +1356,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-tabs"></script>
+  <script src="/assets/archive.js?v=20260717-archive-4tabs"></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>