feat(hub): fix archive quotes inline expand and mobile archive layout

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

manual_trading_hub/static/app.css

@@ -5532,49 +5532,61 @@ body.funds-fullscreen-open {
 }
 .archive-quotes-list {
   flex: 1 1 auto;
-  min-height: 160px;
+  min-height: 0;
   overflow: auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
+.archive-quote-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  background: var(--inset-surface);
+  overflow: hidden;
+}
+.archive-quote-block.is-open {
+  border-color: var(--accent);
+}
 .archive-quote-item {
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto 1fr auto;
   gap: 8px;
   align-items: center;
   width: 100%;
   padding: 8px 10px;
-  border: 1px solid var(--border-soft);
+  border: 0;
-  border-radius: 8px;
+  border-radius: 0;
-  background: var(--inset-surface);
+  background: transparent;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
 }
 .archive-quote-item:hover {
-  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-soft));
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
 }
 .archive-quote-item.is-selected {
-  border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 12%, var(--inset-surface));
 }
+.archive-quote-open-hint {
+  font-size: 0.7rem;
+  color: var(--accent);
+  white-space: nowrap;
+}
 .archive-quote-detail {
-  flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding-top: 10px;
+  padding: 0 10px 10px;
   border-top: 1px solid var(--border-soft);
-  min-height: 140px;
-  max-height: 42vh;
 }
 .archive-quote-detail .archive-quote-full {
-  flex: 1 1 auto;
+  min-height: 120px;
-  min-height: 96px;
+  max-height: none;
-  max-height: 34vh;
+  overflow: visible;
-  overflow: auto;
 }
 .archive-quote-date {
   font-weight: 600;
@@ -5648,6 +5660,15 @@ body.funds-fullscreen-open {
   color: var(--muted);
   font-size: 0.82rem;
 }
+.archive-overview-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.archive-overview-panel > .archive-panel-head {
+  display: none;
+}
 .archive-stats-bar {
   padding: 0;
   border-radius: 8px;
@@ -5926,19 +5947,49 @@ body.funds-fullscreen-open {
   font-size: 0.85rem;
 }
 @media (max-width: 900px) {
-  .archive-layout {
+  #page-archive .page-desc {
-    grid-template-columns: 1fr;
+    display: none;
+  }
+  #page-archive .archive-toolbar-desktop,
+  #page-archive .archive-panel-desktop {
+    display: none !important;
+  }
+  #page-archive .archive-toolbar {
+    margin-bottom: 10px;
+  }
+  #page-archive .archive-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
     min-height: 0;
   }
-  .archive-quotes-panel {
+  #page-archive .archive-quotes-panel {
-    min-height: 360px;
+    order: 1;
+    flex: 0 0 auto;
+    min-height: 0;
     max-height: none;
+    overflow: visible;
   }
-  .archive-quotes-list {
+  #page-archive .archive-main-panel {
+    order: 2;
+    flex: 0 0 auto;
+    min-height: 0;
+    gap: 0;
+  }
+  #page-archive .archive-overview-panel {
+    width: 100%;
+  }
+  #page-archive .archive-overview-panel > .archive-panel-head {
+    display: flex;
+  }
+  #page-archive .archive-quotes-list {
     min-height: 120px;
+    max-height: 42vh;
   }
-  .archive-quote-detail {
+  #page-archive .archive-stats-table th,
-    max-height: 36vh;
+  #page-archive .archive-stats-table td {
+    padding: 6px 8px;
+    font-size: 0.74rem;
   }
 }
 

manual_trading_hub/static/archive.js

@@ -26,10 +26,6 @@
   const elQuoteDate = document.getElementById("archive-quote-date");
   const elQuoteContent = document.getElementById("archive-quote-content");
   const elQuoteSubmit = document.getElementById("archive-quote-submit");
-  const elQuoteDetail = document.getElementById("archive-quote-detail");
-  const elQuoteDetailFull = document.getElementById("archive-quote-detail-full");
-  const elQuoteEditBtn = document.getElementById("archive-quote-edit-btn");
-  const elQuoteDelBtn = document.getElementById("archive-quote-del-btn");
   const elChartSection = document.getElementById("archive-chart-section");
   const elChartTitle = document.getElementById("archive-chart-title");
   const elTfTabs = document.getElementById("archive-tf-tabs");
@@ -520,24 +516,13 @@
   }
 
   function selectQuote(id) {
-    if (editingQuoteId != null && String(id) !== String(editingQuoteId)) {
+    const nextId = String(id);
+    const same = selectedQuoteId != null && String(selectedQuoteId) === nextId;
+    if (editingQuoteId != null && String(editingQuoteId) !== nextId) {
       resetQuoteForm();
     }
-    selectedQuoteId = id;
+    selectedQuoteId = same ? null : id;
     renderQuotes();
-    renderQuoteDetail();
-  }
-
-  function renderQuoteDetail() {
-    if (!elQuoteDetail) return;
-    const q = findQuote(selectedQuoteId);
-    if (!q) {
-      elQuoteDetail.hidden = true;
-      if (elQuoteDetailFull) elQuoteDetailFull.textContent = "";
-      return;
-    }
-    elQuoteDetail.hidden = false;
-    if (elQuoteDetailFull) elQuoteDetailFull.textContent = q.content || "（空）";
   }
 
   function renderQuotes() {
@@ -547,13 +532,15 @@
     }
     if (!quotes.length) {
       elQuotesList.innerHTML = '<p class="archive-empty">暂无复盘语录，可在上方添加。</p>';
-      if (elQuoteDetail) elQuoteDetail.hidden = true;
       return;
     }
     elQuotesList.innerHTML = quotes
       .map(function (q) {
         const selected = String(q.id) === String(selectedQuoteId);
         return (
+          '<div class="archive-quote-block' +
+          (selected ? " is-open" : "") +
+          '">' +
           '<button type="button" class="archive-quote-item' +
           (selected ? " is-selected" : "") +
           '" data-id="' +
@@ -565,7 +552,23 @@
           '<span class="archive-quote-preview">' +
           esc(quotePreview(q.content)) +
           "</span>" +
-          "</button>"
+          (selected ? "" : '<span class="archive-quote-open-hint">查看</span>') +
+          "</button>" +
+          (selected
+            ? '<div class="archive-quote-detail">' +
+              '<div class="archive-quote-full">' +
+              esc(q.content || "（空）") +
+              "</div>" +
+              '<div class="archive-quote-actions">' +
+              '<button type="button" class="ghost archive-quote-edit-btn" data-id="' +
+              q.id +
+              '">修改</button>' +
+              '<button type="button" class="archive-del-btn archive-quote-del-btn" data-id="' +
+              q.id +
+              '">删除</button>' +
+              "</div></div>"
+            : "") +
+          "</div>"
         );
       })
       .join("");
@@ -575,17 +578,27 @@
         selectQuote(btn.getAttribute("data-id"));
       });
     });
-    renderQuoteDetail();
+    elQuotesList.querySelectorAll(".archive-quote-edit-btn").forEach(function (btn) {
+      btn.addEventListener("click", function (ev) {
+        ev.stopPropagation();
+        selectedQuoteId = btn.getAttribute("data-id");
+        startEditQuote();
+      });
+    });
+    elQuotesList.querySelectorAll(".archive-quote-del-btn").forEach(function (btn) {
+      btn.addEventListener("click", function (ev) {
+        ev.stopPropagation();
+        void deleteQuote(btn.getAttribute("data-id"));
+      });
+    });
   }
 
   async function loadQuotes() {
     const r = await apiFetch("/api/archive/quotes");
     const j = await r.json();
     quotes = j.quotes || [];
-    if (!quotes.length) {
+    if (!findQuote(selectedQuoteId)) {
       selectedQuoteId = null;
-    } else if (!findQuote(selectedQuoteId)) {
-      selectedQuoteId = quotes[0].id;
     }
     renderQuotes();
   }
@@ -610,8 +623,7 @@
       return;
     }
     resetQuoteForm();
-    selectedQuoteId =
+    selectedQuoteId = null;
-      j.quote && j.quote.id != null ? j.quote.id : selectedQuoteId;
     await loadQuotes();
     setStatus("语录已添加");
   }
@@ -627,9 +639,8 @@
       setStatus(j.detail || "保存失败");
       return;
     }
-    const savedId = id;
     resetQuoteForm();
-    selectedQuoteId = savedId;
+    selectedQuoteId = null;
     await loadQuotes();
     setStatus("语录已保存");
   }
@@ -1382,13 +1393,6 @@
       });
     }
     if (elQuoteForm) elQuoteForm.addEventListener("submit", submitQuoteForm);
-    if (elQuoteEditBtn) elQuoteEditBtn.addEventListener("click", startEditQuote);
-    if (elQuoteDelBtn) {
-      elQuoteDelBtn.addEventListener("click", function () {
-        if (!selectedQuoteId) return;
-        void deleteQuote(selectedQuoteId);
-      });
-    }
     if (elTfTabs) {
       elTfTabs.addEventListener("click", function (ev) {
         const btn = ev.target.closest(".archive-tf-btn");

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=20260612-archive-quotes-v2" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260612-archive-mobile" />
   <link rel="stylesheet" href="/assets/dashboard.css?v=20260612-dash-monitor-count" />
 </head>
 <body>
@@ -263,9 +263,9 @@
         <p class="page-desc">复盘语录 · 当日交易记录 · 按需查看 K 线</p>
       </div>
       <div class="archive-toolbar toolbar">
-        <label class="chk-label"><input type="checkbox" id="archive-filter-profit" /> 盈利单</label>
+        <label class="chk-label archive-toolbar-desktop"><input type="checkbox" id="archive-filter-profit" /> 盈利单</label>
-        <label class="chk-label"><input type="checkbox" id="archive-filter-loss" /> 亏损单</label>
+        <label class="chk-label archive-toolbar-desktop"><input type="checkbox" id="archive-filter-loss" /> 亏损单</label>
-        <label class="chk-label"><input type="checkbox" id="archive-filter-sick" /> 犯病</label>
+        <label class="chk-label archive-toolbar-desktop"><input type="checkbox" id="archive-filter-sick" /> 犯病</label>
         <div class="archive-period-bar archive-field">
           <span>日期</span>
           <div class="archive-period-tabs" id="archive-period-tabs" role="tablist">
@@ -281,12 +281,12 @@
             <input id="archive-date-to" type="date" title="结束日" />
           </span>
         </div>
-        <button type="button" id="archive-btn-chart-toggle" class="ghost">图表</button>
+        <button type="button" id="archive-btn-chart-toggle" class="ghost archive-toolbar-desktop">图表</button>
-        <label class="archive-field archive-search-field">
+        <label class="archive-field archive-search-field archive-toolbar-desktop">
           <span>搜索</span>
           <input id="archive-search" type="search" placeholder="合约 / 交易所 / 备注" autocomplete="off" />
         </label>
-        <label class="archive-field">
+        <label class="archive-field archive-toolbar-desktop">
           <span>交易所</span>
           <select id="archive-exchange"><option value="">全部</option></select>
         </label>
@@ -306,17 +306,15 @@
             <button type="submit" id="archive-quote-submit" class="primary">添加语录</button>
           </form>
           <div id="archive-quotes-list" class="archive-quotes-list"></div>
-          <div id="archive-quote-detail" class="archive-quote-detail" hidden>
-            <div id="archive-quote-detail-full" class="archive-quote-full"></div>
-            <div class="archive-quote-actions">
-              <button type="button" id="archive-quote-edit-btn" class="ghost">修改</button>
-              <button type="button" id="archive-quote-del-btn" class="archive-del-btn">删除</button>
-            </div>
-          </div>
         </aside>
         <main class="archive-main-panel">
-          <div id="archive-stats" class="archive-stats-bar"></div>
+          <section class="archive-overview-panel">
-          <details id="archive-chart-section" class="archive-acc-section archive-chart-section">
+            <div class="archive-panel-head">
+              <h2>数据总览</h2>
+            </div>
+            <div id="archive-stats" class="archive-stats-bar"></div>
+          </section>
+          <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">
               <div class="archive-tf-tabs" id="archive-tf-tabs" role="tablist">
@@ -344,7 +342,7 @@
               <button type="button" id="archive-mark-auto" class="archive-mark-auto is-on" title="开启：该币种全部交易均标注开/平；关闭：仅当前选中一笔">自动</button>
             </div>
           </details>
-          <details id="archive-trades-section" class="archive-acc-section archive-trades-section" open>
+          <details id="archive-trades-section" class="archive-acc-section archive-trades-section archive-panel-desktop" open>
             <summary class="archive-acc-summary">交易记录</summary>
             <div id="archive-trades" class="archive-trades"></div>
           </details>
@@ -591,7 +589,7 @@
   <script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
   <script src="/assets/chart_draw.js?v=20260609-market-day-split"></script>
   <script src="/assets/chart.js?v=20260609-market-day-split"></script>
-  <script src="/assets/archive.js?v=20260612-archive-quotes-v2"></script>
+  <script src="/assets/archive.js?v=20260612-archive-quotes-v3"></script>
   <script src="/assets/funds.js?v=20260609-hub-funds-fold"></script>
   <script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
   <script src="/assets/ai_review_render.js?v=3"></script>