From 836b37cc7ec19bae970363219cf99085f45544a3 Mon Sep 17 00:00:00 2001 From: dekun Date: Thu, 16 Jul 2026 13:01:17 +0800 Subject: [PATCH] Fit hub monitor, market, and funds to one 1080p screen. Constrain desktop shell to 100dvh with flex fill so OKX perp+option plus peer cards, chart, and equity overview avoid page scroll. Co-authored-by: Cursor --- docs/更新文档.md | 32 +++ manual_trading_hub/static/app.css | 303 +++++++++++++++++++++++++++ manual_trading_hub/static/app.js | 2 + manual_trading_hub/static/index.html | 4 +- 4 files changed, 339 insertions(+), 2 deletions(-) diff --git a/docs/更新文档.md b/docs/更新文档.md index bc7f9ef..a49c7da 100644 --- a/docs/更新文档.md +++ b/docs/更新文档.md @@ -4,6 +4,38 @@ --- +## 2026-07-16 · 中控三页 1920×1080 一屏显示 + +### 修改原因 + +监控区在 OKX「一永续 + 一期权」、另两所各一仓（或空仓）时，以及行情区、资金概况在 1920×1080 下出现整页纵向滚动，无法一屏看完。 + +### 修改的地方 + +| 文件 | 改动摘要 | +|------|----------| +| `manual_trading_hub/static/app.js` | `setActiveNav` 增加 `hub-page-monitor` / `hub-page-market` body class | +| `manual_trading_hub/static/app.css` | `@media (min-width:1600px) and (min-height:900px)` 一屏适配：壳层 `100dvh` 不滚动；三页 flex 填满；监控卡片/表格压缩；行情 K 线区 flex 吃剩余高度；资金曲线与分户区压缩 | +| `manual_trading_hub/static/index.html` | `app.css` / `app.js` 缓存版本 `20260716-hub-fit-1080` | + +**未改：** 期权开平仓规则、实例交易页、手机端 `hub-phone` 布局。 + +### 达成的目标 + +1. **监控区**：桌面大屏下整页无纵向滚动；OKX 左右分栏（永续+期权）与 Binance/Gate 同屏可见。仓位表过长时仅卡片内部滚动。 +2. **行情区**：工具条 + K 线同屏，图表占满剩余高度。 +3. **资金概况**：统计卡 + 曲线 + 三分户同屏。 + +### 交付之后的验收（1920×1080，浏览器缩放 100%） + +1. 打开中控监控区：服务器状态与操作栏保持折叠时，页面**无**浏览器纵向滚动条；OKX 期权 1 仓 + 另两所空仓/各 1 仓均一屏可见。 +2. 行情区：加载 BTC 日线后，OHLCV + 图在一屏内，无整页滚动。 +3. 资金概况：曲线与三分户卡片同屏，无整页滚动。 +4. 窄屏/手机（`hub-phone`）布局不受影响。 +5. 展开「服务器状态」后若内容过高，允许监控网格内部滚动，仍尽量避免整页滚动。 + +--- + ## 2026-07-16 · 期权/对冲开仓仅认真实卖一深度 ### 修改原因 diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index b144423..f913389 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -9786,3 +9786,306 @@ html[data-theme="light"] .hub-logs-card-hint { } } +/* ── 1920×1080 一屏:监控区 / 行情区 / 资金概况(无整页纵向滚动) ── */ +@media (min-width: 1600px) and (min-height: 900px) { + 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(1860px, calc(100vw - 24px)); + height: 100dvh; + max-height: 100dvh; + padding-top: 0; + padding-bottom: 8px; + display: flex; + flex-direction: column; + overflow: hidden; + } + + 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 { + flex: 0 0 auto; + padding: 10px 0 8px; + margin-bottom: 0; + } + + /* —— 监控区 —— */ + body.hub-page-monitor:not(.hub-phone) #page-monitor { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; + } + + body.hub-page-monitor:not(.hub-phone) #page-monitor > .page-head { + flex: 0 0 auto; + margin: 6px 0 4px; + } + + body.hub-page-monitor:not(.hub-phone) #page-monitor > .page-head h1 { + font-size: 16px; + } + + body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-panel, + body.hub-page-monitor:not(.hub-phone) #page-monitor .monitor-macro-banner, + body.hub-page-monitor:not(.hub-phone) #page-monitor .monitor-alert-summary, + body.hub-page-monitor:not(.hub-phone) #page-monitor .hub-m-fold { + flex: 0 0 auto; + margin-bottom: 6px; + } + + body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-summary { + padding: 6px 10px; + } + + body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-bar { + padding: 8px 10px 10px; + } + + body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-metrics { + gap: 6px; + } + + body.hub-page-monitor:not(.hub-phone) #page-monitor .host-metric-card { + padding: 6px 8px; + } + + body.hub-page-monitor:not(.hub-phone) #page-monitor .grid-monitor { + flex: 1 1 auto; + min-height: 0; + gap: 8px; + overflow: hidden; + } + + body.hub-page-monitor:not(.hub-phone) .grid-monitor.grid-monitor-options-split { + display: flex; + flex-direction: column; + height: 100%; + gap: 8px; + } + + body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stats-card { + flex: 0 0 auto; + padding: 5px 10px; + gap: 10px 14px; + } + + body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stats-grid { + gap: 6px; + } + + body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-cell { + padding: 3px 4px; + } + + body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-value { + font-size: 13px; + } + + body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-split-body { + flex: 1 1 auto; + min-height: 0; + gap: 8px; + height: auto; + } + + body.hub-page-monitor:not(.hub-phone) .monitor-split-right { + gap: 8px; + } + + body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split, + body.hub-page-monitor:not(.hub-phone) .card-monitor-split-side { + overflow: hidden; + } + + 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: 6px 10px; + } + + 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: 8px 10px; + overflow: hidden; + } + + body.hub-page-monitor:not(.hub-phone) .hub-inner-cards { + gap: 6px; + } + + body.hub-page-monitor:not(.hub-phone) .hub-inner-card { + overflow: hidden; + } + + body.hub-page-monitor:not(.hub-phone) .hub-inner-card-head { + padding: 5px 8px; + font-size: 10px; + } + + body.hub-page-monitor:not(.hub-phone) .hub-inner-card-body { + padding: 6px 8px; + overflow: auto; + } + + body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .hub-options-table-wrap, + body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .pos-table-wrap, + body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .table-scroll { + overflow: auto; + max-height: 100%; + } + + body.hub-page-monitor:not(.hub-phone) .data-table th, + body.hub-page-monitor:not(.hub-phone) .data-table td { + padding: 3px 5px; + font-size: 11px; + line-height: 1.25; + } + + body.hub-page-monitor:not(.hub-phone) .section-title { + margin: 4px 0 4px; + font-size: 11px; + } + + body.hub-page-monitor:not(.hub-phone) .hub-monitor-options { + margin-top: 6px; + padding-top: 6px; + } + + body.hub-page-monitor:not(.hub-phone) .empty-hint { + padding: 6px 0; + font-size: 11px; + } + + /* —— 行情区 —— */ + body.hub-page-market:not(.hub-phone) #page-market { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; + } + + body.hub-page-market:not(.hub-phone) #page-market > .page-head { + flex: 0 0 auto; + margin: 6px 0 4px; + } + + body.hub-page-market:not(.hub-phone) #page-market > .page-head h1 { + font-size: 16px; + } + + body.hub-page-market:not(.hub-phone) #page-market .hub-m-fold, + body.hub-page-market:not(.hub-phone) #page-market .market-vol-rank-anchor, + body.hub-page-market:not(.hub-phone) #page-market .market-status { + flex: 0 0 auto; + } + + body.hub-page-market:not(.hub-phone) #page-market .market-status { + margin: 2px 0 6px; + } + + body.hub-page-market:not(.hub-phone) #page-market .market-chart-wrap, + body.hub-page-market:not(.hub-phone) #page-market .market-chart-wrap.has-pos-panel { + flex: 1 1 auto; + height: auto !important; + min-height: 0; + max-height: none; + } + + body.hub-page-market:not(.hub-phone) #page-market .market-ohlcv-bar { + padding: 6px 10px; + } + + /* —— 资金概况 —— */ + body.hub-page-funds:not(.hub-phone) #page-funds { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; + } + + body.hub-page-funds:not(.hub-phone) .funds-stage { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + } + + body.hub-page-funds:not(.hub-phone) .funds-stage-inner { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + padding: 8px 12px 10px; + overflow: hidden; + } + + body.hub-page-funds:not(.hub-phone) .funds-head { + flex: 0 0 auto; + margin-bottom: 4px !important; + } + + body.hub-page-funds:not(.hub-phone) .funds-head h1 { + font-size: 16px; + } + + body.hub-page-funds:not(.hub-phone) .funds-toolbar { + flex: 0 0 auto; + margin-bottom: 6px; + gap: 8px; + } + + body.hub-page-funds:not(.hub-phone) .funds-summary { + flex: 0 0 auto; + margin-bottom: 6px; + gap: 8px; + } + + body.hub-page-funds:not(.hub-phone) .funds-stat-card { + padding: 8px 10px; + } + + body.hub-page-funds:not(.hub-phone) .funds-stat-value { + font-size: 1.15rem; + } + + body.hub-page-funds:not(.hub-phone) .funds-meta { + flex: 0 0 auto; + margin: 0 0 6px; + padding: 4px 8px; + } + + body.hub-page-funds:not(.hub-phone) .funds-chart-panel { + flex: 1 1 auto; + min-height: 140px; + max-height: 42vh; + margin-bottom: 8px; + display: flex; + flex-direction: column; + } + + body.hub-page-funds:not(.hub-phone) .funds-chart-host { + flex: 1 1 auto; + height: auto; + min-height: 120px; + } + + body.hub-page-funds:not(.hub-phone) .funds-section-head { + flex: 0 0 auto; + margin-bottom: 6px; + } + + body.hub-page-funds:not(.hub-phone) .funds-accounts { + flex: 0 0 auto; + gap: 8px; + padding: 0; + } + + body.hub-page-funds:not(.hub-phone) .funds-ac-card { + padding: 8px 10px; + gap: 6px; + } +} + diff --git a/manual_trading_hub/static/app.js b/manual_trading_hub/static/app.js index ffcd258..9ead409 100644 --- a/manual_trading_hub/static/app.js +++ b/manual_trading_hub/static/app.js @@ -1305,6 +1305,8 @@ document.body.classList.toggle("hub-page-ai", page === "ai"); document.body.classList.toggle("hub-page-funds", page === "funds"); document.body.classList.toggle("hub-page-dashboard", page === "dashboard"); + document.body.classList.toggle("hub-page-monitor", page === "monitor"); + document.body.classList.toggle("hub-page-market", page === "market"); syncHubPhoneShellClass(); if (HUB_PHONE_PRIMARY[page]) closeHubMobileMore(); syncHubMobileTabActive(page); diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html index ee591b7..e567d5c 100644 --- a/manual_trading_hub/static/index.html +++ b/manual_trading_hub/static/index.html @@ -15,7 +15,7 @@ - + @@ -1327,6 +1327,6 @@ - +