From 57dad1ffdfe247bb4cf478e4fd7d02ecadb0abf2 Mon Sep 17 00:00:00 2001 From: dekun Date: Thu, 16 Jul 2026 13:22:57 +0800 Subject: [PATCH] Fit tablet hub to one screen with denser type. Keep full card content readable; shrink fonts/spacing and use in-table scroll only when positions overflow. Co-authored-by: Cursor --- docs/更新文档.md | 22 +- manual_trading_hub/static/app.css | 441 ++++++++++++++++++++------- manual_trading_hub/static/index.html | 2 +- 3 files changed, 348 insertions(+), 117 deletions(-) diff --git a/docs/更新文档.md b/docs/更新文档.md index f5cb508..3e73974 100644 --- a/docs/更新文档.md +++ b/docs/更新文档.md @@ -4,28 +4,34 @@ --- -## 2026-07-16 · 平板监控卡片内容裁切修复 +## 2026-07-16 · 平板一屏密度适配(不裁切) ### 修改原因 -平板一屏适配用 `overflow:hidden` + 均分 `1fr/1fr` 行高，把永续/期权/分所卡片内容裁掉，表格与余额显示不全。 +平板字号偏大、留白空、卡片半截裁切或底部大片空黑，显得 low；需要「一屏看完」且正文不被拦腰裁掉。 ### 修改的地方 | 文件 | 改动摘要 | |------|----------| -| `manual_trading_hub/static/app.css` | `hub-tablet` 下取消强裁切：卡片/内卡 `overflow:visible`，行高改 `auto`，允许整页滚动；恢复可读字号；去掉过度压缩的平板加密度块 | -| `manual_trading_hub/static/index.html` | CSS 缓存 `20260716-hub-tablet-noclip` | +| `manual_trading_hub/static/app.css` | `hub-tablet`：锁 100dvh；压缩字号/间距；监控区 flex 填满；竖屏 OKX 上 + Gate/币安并排；表体内滚兜底；资金页缩曲线、压汇总数字、分户卡完整可见 | +| `manual_trading_hub/static/index.html` | CSS 缓存 `20260716-hub-tablet-onescreen` | ### 达成的目标 -平板上监控区/资金卡片内容完整可见；空间不够时整页可滚，不再把字和表格裁没。 +平板监控区/资金概况一屏呈现、信息密度接近桌面；常规持仓与分户名称/余额不被裁半；持仓很多时仅表体内滚。 ### 交付之后的验收 -1. 平板强制刷新后，OKX 永续+期权、Binance/Gate 卡片余额与持仓表完整可见。 -2. 期权表列（合约/张数/盈亏等）不被裁切。 -3. 桌面 1920×1080 一屏规则仍可用（无 `hub-tablet` 时）。 +1. 平板强制刷新后，监控区三所卡片同屏，余额与持仓列完整可读。 +2. 资金概况：四格汇总 + 曲线 + 分户卡同一屏，账户名不被切半。 +3. 底部不再大片空黑；桌面大屏一屏规则不受影响。 + +--- + +## 2026-07-16 · 平板监控卡片内容裁切修复(已由一屏密度方案取代) + +先前改为整页可滚以避免裁切；用户要求改为「一屏 + 不裁切 + 提密度」，由上一条覆盖。 --- diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index 955a221..e0e29cd 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -10090,191 +10090,416 @@ html[data-theme="light"] .hub-logs-card-hint { } /* - * 平板(hub-tablet):优先卡片内容完整可见。 - * 2560×1600@2x ≈ 1280×800 CSS —— 不再强行裁切 overflow:hidden / 均分 1fr 行高。 - * 整页允许纵向滚动;桌面大屏仍走上方一屏规则。 + * 平板(hub-tablet):一屏 + 提密度 + 不裁切正文。 + * 典型 CSS 视口 ~1280×800 横 / ~800×1280 竖。 + * 外壳锁 100dvh;字号/间距压缩让常规内容装下; + * 持仓很多时仅表体内滚,不把卡片文字拦腰切掉。 */ -body.hub-tablet.hub-page-monitor:not(.hub-phone) .app-shell { - height: auto; - max-height: none; - min-height: 100dvh; - overflow-x: hidden; - overflow-y: auto; - padding-bottom: 16px; +body.hub-tablet:not(.hub-phone).hub-page-monitor .app-shell, +body.hub-tablet:not(.hub-phone).hub-page-funds .app-shell, +body.hub-tablet:not(.hub-phone).hub-page-market .app-shell { + height: 100dvh; + max-height: 100dvh; + overflow: hidden; + padding-top: 0; + padding-bottom: max(6px, env(safe-area-inset-bottom)); + padding-left: max(10px, env(safe-area-inset-left)); + padding-right: max(10px, env(safe-area-inset-right)); } -body.hub-tablet.hub-page-monitor:not(.hub-phone) .app-header { - padding: 8px 0 6px; +body.hub-tablet:not(.hub-phone).hub-page-monitor .app-header, +body.hub-tablet:not(.hub-phone).hub-page-funds .app-header, +body.hub-tablet:not(.hub-phone).hub-page-market .app-header { + padding: 6px 0 4px; + gap: 8px; } -body.hub-tablet.hub-page-monitor:not(.hub-phone) .brand-sub { +body.hub-tablet:not(.hub-phone) .brand-sub { display: none; } +body.hub-tablet:not(.hub-phone) .brand-title { + font-size: 13px; +} + +body.hub-tablet:not(.hub-phone) .top-nav a { + font-size: 11px; + padding: 4px 7px; +} + +/* —— 监控区:一屏 flex + 密度 —— */ body.hub-tablet.hub-page-monitor:not(.hub-phone) #page-monitor { - flex: 1 0 auto; - height: auto; + flex: 1 1 auto; min-height: 0; - overflow: visible; + overflow: hidden; + display: flex; + flex-direction: column; } body.hub-tablet.hub-page-monitor:not(.hub-phone) #page-monitor > .page-head { - margin: 6px 0 6px; + margin: 4px 0 2px; } body.hub-tablet.hub-page-monitor:not(.hub-phone) #page-monitor > .page-head h1 { - font-size: 16px; -} - -body.hub-tablet.hub-page-monitor:not(.hub-phone) #page-monitor .grid-monitor { - flex: 1 0 auto; - height: auto; - min-height: 0; - overflow: visible; - gap: 12px; -} - -body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor.grid-monitor-options-split { - height: auto; - gap: 10px; -} - -body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stats-card { - padding: 8px 12px; -} - -body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-value { font-size: 14px; } -body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-split-body { - flex: 0 0 auto; - height: auto; +body.hub-tablet.hub-page-monitor:not(.hub-phone) #page-monitor .page-desc { + display: none; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) #page-monitor .grid-monitor { + flex: 1 1 auto; min-height: 0; - align-items: start; - gap: 12px; + gap: 6px; + overflow: hidden; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor.grid-monitor-options-split { + height: 100%; + gap: 6px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stats-card { + padding: 4px 8px; + gap: 8px 10px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-label { + font-size: 9px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-value { + font-size: 12px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-sub { + font-size: 9px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-split-body { + flex: 1 1 auto; + min-height: 0; + height: auto; + gap: 6px; + align-items: stretch; } body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-left > .card, body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card { - height: auto; + height: 100%; + min-height: 0; } body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right { - grid-template-rows: auto auto; - align-content: start; - gap: 12px; + grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); + gap: 6px; + min-height: 0; } -body.hub-tablet.hub-page-monitor:not(.hub-phone) .hub-inner-cards { - grid-template-rows: auto auto; - align-content: start; - gap: 10px; +/* 竖屏(<960)叠成 OKX 上 + Gate/币安并排,吃满剩余高度 */ +@media (max-width: 960px) { + body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-body { + grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); + } + + body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr); + } } body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split, -body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-split-side, -body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split .card-body, -body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-body, -body.hub-tablet.hub-page-monitor:not(.hub-phone) .hub-inner-card { - overflow: visible; +body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-split-side { + overflow: hidden; } body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split .card-head, body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-head { - padding: 8px 12px; + padding: 5px 8px; + gap: 6px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-title { + font-size: 11px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-sub { + font-size: 9px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-actions { + gap: 4px; + flex-wrap: wrap; + max-width: 46%; + justify-content: flex-end; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-actions .btn-link, +body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-actions button { + font-size: 10px; + padding: 3px 6px; + min-height: 0; + line-height: 1.2; } body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split .card-body, body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-body { - padding: 10px 12px; + padding: 6px 8px; + overflow: hidden; + min-height: 0; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .hub-inner-cards { + grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); + gap: 5px; + min-height: 0; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .hub-inner-card { + overflow: hidden; + min-height: 0; } body.hub-tablet.hub-page-monitor:not(.hub-phone) .hub-inner-card-head { - padding: 8px 10px; - font-size: 12px; + padding: 4px 6px; + font-size: 10px; } body.hub-tablet.hub-page-monitor:not(.hub-phone) .hub-inner-card-body { - padding: 8px 10px; - overflow: visible; + padding: 5px 6px; + overflow: auto; + min-height: 0; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .stat-row { + gap: 6px; + margin-bottom: 6px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .stat-box { + padding: 5px 7px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .stat-label { + font-size: 9px; + margin-bottom: 2px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .stat-value { + font-size: 13px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .stat-value small { + font-size: 10px !important; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .section-title { + margin: 4px 0 3px; + padding-bottom: 3px; + font-size: 10px; +} + +body.hub-tablet.hub-page-monitor:not(.hub-phone) .empty-hint { + padding: 4px 0; + font-size: 10px; } body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .hub-options-table-wrap, body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .pos-table-wrap, body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .table-scroll { - overflow: visible; - max-height: none; + overflow: auto; + max-height: 100%; + min-height: 0; } body.hub-tablet.hub-page-monitor:not(.hub-phone) .data-table th, body.hub-tablet.hub-page-monitor:not(.hub-phone) .data-table td { - padding: 6px 8px; - font-size: 12px; - line-height: 1.35; + padding: 3px 4px; + font-size: 10px; + line-height: 1.25; } -body.hub-tablet.hub-page-monitor:not(.hub-phone) .section-title { - margin: 8px 0 6px; - font-size: 12px; -} - -body.hub-tablet.hub-page-monitor:not(.hub-phone) .empty-hint { - padding: 8px 0; - font-size: 12px; -} - -/* 平板资金概况:勿裁切分户卡片 */ -body.hub-tablet.hub-page-funds:not(.hub-phone) .app-shell { - height: auto; - max-height: none; - min-height: 100dvh; - overflow-x: hidden; - overflow-y: auto; - padding-bottom: 16px; +body.hub-tablet.hub-page-monitor:not(.hub-phone) .data-table th { + white-space: nowrap; } +/* —— 资金概况:一屏 + 曲线让位给分户卡片 —— */ body.hub-tablet.hub-page-funds:not(.hub-phone) #page-funds, body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-stage, body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-stage-inner { - height: auto; - max-height: none; - overflow: visible; - flex: 1 0 auto; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; + display: flex; + flex-direction: column; } -body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-chart-panel { - flex: 0 0 auto; - height: 240px; - max-height: none; - min-height: 200px; - margin-bottom: 12px; +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-stage-inner { + padding: 6px 8px 8px; } -body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-chart-host { - height: 200px; - min-height: 180px; +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-head { + margin-bottom: 2px !important; } -body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-accounts { - flex: 0 0 auto; +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-head h1 { + font-size: 14px; } -body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-card { - padding: 12px 14px; - overflow: visible; +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-desc-fold { + display: none; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-toolbar { + margin-bottom: 4px; + gap: 6px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-pnl-banner { + padding: 6px 8px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-pnl-value { + font-size: 1.05rem; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-summary { + margin-bottom: 4px; + gap: 6px; + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-stat-card { + padding: 6px 8px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-stat-label { + font-size: 0.55rem; + margin-bottom: 2px; } body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-stat-value { - font-size: 1.2rem; + font-size: 0.98rem; } -/* 平板行情:保持一屏图表,但勿过度压扁 OHLCV */ -body.hub-tablet.hub-page-market:not(.hub-phone) #page-market .market-ohlcv-bar { - padding: 8px 10px; +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-stat-card-primary .funds-stat-value { + font-size: 1.08rem; } +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-stat-sub { + font-size: 0.62rem; + margin-top: 2px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-meta { + margin: 0 0 4px; + padding: 3px 6px; + font-size: 0.68rem; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-chart-panel { + flex: 1 1 auto; + min-height: 90px; + max-height: 26vh; + margin-bottom: 6px; + display: flex; + flex-direction: column; + overflow: hidden; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-chart-head { + padding: 4px 8px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-chart-tag { + font-size: 0.58rem; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-chart-host { + flex: 1 1 auto; + height: auto; + min-height: 70px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-section-head { + margin-bottom: 4px; + font-size: 11px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-accounts { + flex: 0 1 auto; + min-height: 0; + max-height: 34vh; + overflow: auto; + gap: 6px; + padding: 0; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-card { + padding: 7px 9px; + gap: 5px; + overflow: visible; + min-width: 0; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-name { + font-size: 0.72rem; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-badge { + font-size: 0.58rem; + padding: 1px 6px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-total { + padding: 5px 7px; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-total .k { + font-size: 0.62rem; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-total .v { + font-size: 0.92rem; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-stats { + gap: 4px 8px; + font-size: 0.68rem; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-stats .k { + font-size: 0.58rem; +} + +body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-ac-foot { + padding-top: 5px; + font-size: 0.62rem; +} + +@media (max-width: 960px) { + body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-summary { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-chart-panel { + max-height: 22vh; + } + + body.hub-tablet.hub-page-funds:not(.hub-phone) .funds-accounts { + max-height: 38vh; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +/* —— 行情:一屏图表 —— */ body.hub-tablet.hub-page-market:not(.hub-phone) #page-market > .page-head h1 { - font-size: 16px; + font-size: 14px; +} + +body.hub-tablet.hub-page-market:not(.hub-phone) #page-market .market-ohlcv-bar { + padding: 5px 8px; } diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html index 7371890..63f356e 100644 --- a/manual_trading_hub/static/index.html +++ b/manual_trading_hub/static/index.html @@ -15,7 +15,7 @@ - +