diff --git a/docs/更新文档.md b/docs/更新文档.md index a49c7da..5c6f9f4 100644 --- a/docs/更新文档.md +++ b/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 一屏显示 ### 修改原因 diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index f913389..d544908 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -9786,8 +9786,8 @@ html[data-theme="light"] .hub-logs-card-hint { } } -/* ── 1920×1080 一屏:监控区 / 行情区 / 资金概况(无整页纵向滚动) ── */ -@media (min-width: 1600px) and (min-height: 900px) { +/* ── 一屏适配:桌面 1080p + 平板 CSS 视口(2560×1600@2x≈1280×800) ── */ +@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; +} + diff --git a/manual_trading_hub/static/app.js b/manual_trading_hub/static/app.js index 9ead409..4da46a6 100644 --- a/manual_trading_hub/static/app.js +++ b/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; diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html index e567d5c..e4ba11c 100644 --- a/manual_trading_hub/static/index.html +++ b/manual_trading_hub/static/index.html @@ -15,7 +15,7 @@ - + @@ -1327,6 +1327,6 @@ - +