增加手机端自适应

manual_trading_hub/static/app.js

@@ -61,6 +61,14 @@
     return n > 0 ? "pnl-pos" : "pnl-neg";
   }
 
+  /** 全屏持仓区：按仓位数量附加布局 class（1～6 固定列数，7+ 自动填充） */
+  function hubPosListCountClass(n) {
+    const c = Math.max(0, parseInt(n, 10) || 0);
+    if (c <= 0) return "count-0";
+    if (c <= 6) return `count-${c}`;
+    return "count-many";
+  }
+
   function currentPage() {
     const p = window.location.pathname.replace(/\/$/, "") || "/monitor";
     if (p.includes("settings")) return "settings";
@@ -103,9 +111,17 @@
     return (settingsCache?.exchanges || []).filter((x) => x.enabled);
   }
 
-  /** 监控卡片列数：3 个一行；4 个 2×2；5/6 个两行（每行最多 3） */
+  function isMobileLayout() {
+    return window.matchMedia("(max-width: 720px)").matches;
+  }
+
+  /** 监控卡片列数：桌面 3/2 列；手机端固定单列 */
   function syncMonitorGridColumns(gridEl, count) {
     if (!gridEl) return;
+    if (isMobileLayout()) {
+      gridEl.style.gridTemplateColumns = "minmax(0, 1fr)";
+      return;
+    }
     let cols = 3;
     if (count <= 1) cols = 1;
     else if (count === 2) cols = 2;
@@ -115,6 +131,19 @@
     gridEl.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
   }
 
+  function initMobileLayout() {
+    let resizeTimer = null;
+    window.addEventListener("resize", () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        const box = document.getElementById("monitor-grid");
+        if (box && lastMonitorRows.length) {
+          syncMonitorGridColumns(box, lastMonitorRows.length);
+        }
+      }, 120);
+    });
+  }
+
   function normSym(s) {
     return String(s || "")
       .toUpperCase()
@@ -538,6 +567,7 @@
     const slAttr = esc(String(guess.sl)).replace(/"/g, "&quot;");
     const tpAttr = esc(String(guess.tp)).replace(/"/g, "&quot;");
     return `<div class="pos-block">
+      <div class="table-scroll">
       <table class="data-table"><thead><tr><th>合约</th><th>方向</th><th>张数</th><th>浮盈</th><th>操作</th></tr></thead><tbody>
         <tr>
           <td>${esc(x.symbol)}</td>
@@ -552,6 +582,7 @@
           </td>
         </tr>
       </tbody></table>
+      </div>
       ${renderOrdersCollapse(exchangeId, x.symbol, cond, reg)}
     </div>`;
   }
@@ -644,8 +675,11 @@
       <div class="stat-box"><div class="stat-label">余额</div><div class="stat-value">${fmt(ag.balance_usdt, 2)} U</div></div>
       <div class="stat-box"><div class="stat-label">浮盈合计</div><div class="stat-value ${pnlCls(ag.total_unrealized_pnl)}">${fmt(ag.total_unrealized_pnl, 4)}</div></div>
     </div>`;
-    html += '<div class="section-title">持仓（每币种一卡）</div><div class="hub-pos-list">';
-    if (pos.length) {
+    const posCount = pos.length;
+    const posListCls = hubPosListCountClass(posCount);
+    html += `<div class="section-title">持仓（${posCount} 仓 · 每币种一卡）</div>`;
+    html += `<div class="hub-pos-list ${posListCls}" data-pos-count="${posCount}">`;
+    if (posCount) {
       pos.forEach((p) => {
         html += renderLivePositionCard(row.id, p, findMonitorOrder(orders, p.symbol, p.side));
       });
@@ -1087,6 +1121,7 @@
 
   initTpslModal();
   initFullscreen();
+  initMobileLayout();
 
   initAuth().then((ok) => {
     if (!ok) return;