Add tablet viewport fit for hub one-screen layout.

Hi-DPI tablets like 2560x1600 map to ~1280x800 CSS; broaden fit breakpoints and densify for hub-tablet.

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

docs/更新文档.md

@@ -4,6 +4,33 @@
 
 ---
 
+## 2026-07-16 · 中控平板一屏适配(2560×1600)
+
+### 修改原因
+
+平板物理分辨率 2560×1600 在 2× 缩放下 CSS 视口约为 **1280×800**，进不了此前桌面规则 `min-width:1600px`，监控/行情/资金仍整页滚动。
+
+### 修改的地方
+
+| 文件 | 改动摘要 |
+|------|----------|
+| `manual_trading_hub/static/app.js` | 新增 `isTabletLayout()`；`hub-tablet` body class |
+| `manual_trading_hub/static/app.css` | 一屏适配门槛降为 `min-width:721px` + `min-height:650px`；另增平板矮/窄视口加密度规则 |
+| `manual_trading_hub/static/index.html` | 缓存版本 `20260716-hub-fit-tablet` |
+
+### 达成的目标
+
+平板（含 2560×1600@2x）与桌面一样：监控区 / 行情区 / 资金概况尽量一屏、无整页下拉。
+
+### 交付之后的验收
+
+1. 平板横屏打开中控，强制刷新后 body 应有 `hub-tablet`（开发者工具）。  
+2. 监控区（OKX 一期权 ± 永续空/一仓，另两所各 ≤1 仓）：无整页纵向滚动。  
+3. 行情区、资金概况同屏无整页滚动。  
+4. 手机（≤720px）仍走 `hub-phone`，不受影响。
+
+---
+
 ## 2026-07-16 · 中控三页 1920×1080 一屏显示
 
 ### 修改原因

manual_trading_hub/static/app.css

@@ -9786,8 +9786,8 @@ html[data-theme="light"] .hub-logs-card-hint {
   }
 }
 
-/* ── 1920×1080 一屏:监控区 / 行情区 / 资金概况(无整页纵向滚动) ── */
+/* ── 一屏适配:桌面 1080p + 平板 CSS 视口(2560×1600@2x≈1280×800) ── */
-@media (min-width: 1600px) and (min-height: 900px) {
+@media (min-width: 721px) and (min-height: 650px) {
   body.hub-page-monitor:not(.hub-phone) .app-shell,
   body.hub-page-market:not(.hub-phone) .app-shell,
   body.hub-page-funds:not(.hub-phone) .app-shell {
@@ -10089,3 +10089,109 @@ html[data-theme="light"] .hub-logs-card-hint {
   }
 }
 
+/* ── 平板加密度(CSS 视口偏矮/偏窄,如 1280×800) ── */
+@media (min-width: 721px) and (min-height: 650px) and (max-height: 920px),
+       (min-width: 721px) and (max-width: 1400px) and (min-height: 650px) {
+  body.hub-page-monitor:not(.hub-phone) .app-shell,
+  body.hub-page-market:not(.hub-phone) .app-shell,
+  body.hub-page-funds:not(.hub-phone) .app-shell {
+    max-width: min(1600px, calc(100vw - 16px));
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-bottom: 4px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .app-header,
+  body.hub-page-market:not(.hub-phone) .app-header,
+  body.hub-page-funds:not(.hub-phone) .app-header {
+    padding: 6px 0 4px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) #page-monitor > .page-head,
+  body.hub-page-market:not(.hub-phone) #page-market > .page-head {
+    margin: 2px 0 2px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) #page-monitor > .page-head h1,
+  body.hub-page-market:not(.hub-phone) #page-market > .page-head h1,
+  body.hub-page-funds:not(.hub-phone) .funds-head h1 {
+    font-size: 14px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-panel,
+  body.hub-page-monitor:not(.hub-phone) #page-monitor .hub-m-fold {
+    margin-bottom: 4px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stats-card {
+    padding: 3px 8px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-value {
+    font-size: 12px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split .card-head,
+  body.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-head {
+    padding: 4px 8px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split .card-body,
+  body.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-body {
+    padding: 5px 8px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .hub-inner-card-head {
+    padding: 3px 6px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .hub-inner-card-body {
+    padding: 4px 6px;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .data-table th,
+  body.hub-page-monitor:not(.hub-phone) .data-table td {
+    padding: 2px 4px;
+    font-size: 10px;
+  }
+
+  body.hub-page-market:not(.hub-phone) #page-market .market-ohlcv-bar {
+    padding: 4px 8px;
+  }
+
+  body.hub-page-market:not(.hub-phone) #page-market .market-ohlcv-row {
+    gap: 6px 10px;
+  }
+
+  body.hub-page-funds:not(.hub-phone) .funds-stage-inner {
+    padding: 6px 8px 6px;
+  }
+
+  body.hub-page-funds:not(.hub-phone) .funds-chart-panel {
+    min-height: 110px;
+    max-height: 36vh;
+    margin-bottom: 6px;
+  }
+
+  body.hub-page-funds:not(.hub-phone) .funds-chart-host {
+    min-height: 100px;
+  }
+
+  body.hub-page-funds:not(.hub-phone) .funds-stat-card {
+    padding: 6px 8px;
+  }
+
+  body.hub-page-funds:not(.hub-phone) .funds-stat-value {
+    font-size: 1rem;
+  }
+
+  body.hub-page-funds:not(.hub-phone) .funds-ac-card {
+    padding: 6px 8px;
+  }
+}
+
+/* 平板标识下的额外压缩(JS hub-tablet) */
+body.hub-tablet.hub-page-monitor:not(.hub-phone) .brand-sub {
+  display: none;
+}
+

manual_trading_hub/static/app.js

@@ -72,8 +72,24 @@
 
   const HUB_PHONE_PRIMARY = { monitor: 1, market: 1, calculator: 1, ai: 1 };
 
+  /** 窄屏布局:仅按视口宽度,监控区/行情等共用 */
+  function isMobileLayout() {
+    return window.matchMedia("(max-width: 720px)").matches;
+  }
+
+  /** 平板 CSS 视口(如 2560×1600 @2x ≈ 1280×800),或高度偏矮的大屏 */
+  function isTabletLayout() {
+    if (isMobileLayout()) return false;
+    const w = window.innerWidth || 0;
+    const h = window.innerHeight || 0;
+    if (w >= 721 && w <= 1599) return true;
+    if (w >= 721 && h > 0 && h <= 920) return true;
+    return false;
+  }
+
   function syncHubPhoneShellClass() {
     document.body.classList.toggle("hub-phone", isMobileLayout());
+    document.body.classList.toggle("hub-tablet", isTabletLayout());
   }
 
   function closeHubMobileMore() {
@@ -1602,11 +1618,6 @@
     return (settingsCache?.exchanges || []).filter((x) => x.enabled);
   }
 
-  /** 窄屏布局:仅按视口宽度,监控区/行情等共用 */
-  function isMobileLayout() {
-    return window.matchMedia("(max-width: 720px)").matches;
-  }
-
   /** AI 教练手机布局:窄屏或手机 PWA(桌面安装的 App 仍走桌面布局) */
   function isMobileAiLayout() {
     if (isMobileLayout()) return true;

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=20260716-hub-fit-1080" />
+      <link rel="stylesheet" href="/assets/app.css?v=20260716-hub-fit-tablet" />
   <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>
@@ -1327,6 +1327,6 @@
   <script src="/assets/options_expiry_countdown.js?v=1"></script>
   <script src="/assets/options_position_cards.js?v=1"></script>
   <script src="/assets/backup.js?v=1"></script>
-  <script src="/assets/app.js?v=20260716-hub-fit-1080"></script>
+  <script src="/assets/app.js?v=20260716-hub-fit-tablet"></script>
 </body>
 </html>