From f16dcac20249fdd3b32e83b39c4208174cdaab77 Mon Sep 17 00:00:00 2001 From: dekun Date: Wed, 15 Jul 2026 22:47:09 +0800 Subject: [PATCH] Tighten phone hub layout: single-column monitor and chart-first market. Hide duplicate page titles on phone, compact toolbars, and denser calculator forms without changing desktop/tablet shells. Co-authored-by: Cursor --- manual_trading_hub/static/app.css | 303 ++++++++++++++++++++++++--- manual_trading_hub/static/app.js | 5 +- manual_trading_hub/static/index.html | 4 +- 3 files changed, 278 insertions(+), 34 deletions(-) diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index 006d496..2261877 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -3817,7 +3817,8 @@ body.login-page { } .grid-monitor.grid-monitor-tiles { - grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + /* 手机监控单列,避免统计与交易所卡并排挤字 */ + grid-template-columns: 1fr !important; gap: 10px; } @@ -4049,42 +4050,131 @@ body.login-page { display: none !important; } + /* 顶栏一行:省纵向空间,底栏已标当前页 */ + body.hub-phone .app-header { + flex-direction: row; + align-items: center; + gap: 8px; + padding: 6px 0; + margin-bottom: 4px; + } + + body.hub-phone .brand-sub { + display: none; + } + + body.hub-phone .brand-title { + font-size: 12px; + letter-spacing: 0.02em; + } + body.hub-phone .header-right { - grid-template-columns: 1fr auto auto; - grid-template-rows: auto; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-end; + gap: 6px; + width: auto; + margin-left: auto; + grid-template-columns: none; + grid-template-rows: none; + } + + body.hub-phone .header-right .theme-toggle { + transform: scale(0.92); + transform-origin: center right; + } + + body.hub-phone button.ghost#btn-logout { + min-height: 32px; + padding: 4px 10px; + font-size: 12px; } body.hub-phone .app-shell { padding-bottom: calc(var(--hub-m-tabbar-h) + max(10px, env(safe-area-inset-bottom))); } - body.hub-phone .page-head h1 { - font-size: 1.05rem; + /* 四页标题与底栏重复,手机隐藏 */ + body.hub-phone #page-monitor > .page-head, + body.hub-phone #page-market > .page-head, + body.hub-phone #page-calculator > .page-head, + body.hub-phone #page-ai > .page-head { + display: none; } - body.hub-phone .page-head .head-tag { - font-size: 0.62rem; + /* —— 监控 —— */ + body.hub-phone .grid-monitor.grid-monitor-tiles { + grid-template-columns: 1fr !important; + gap: 10px; + } + + body.hub-phone .hub-tile { + min-height: 0; + } + + body.hub-phone .hub-tile .hub-tile-body { + min-height: 0; + padding: 12px 14px; + } + + body.hub-phone .hub-tile-pnl { + font-size: 22px; + } + + body.hub-phone .monitor-stats-card .monitor-stats-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 6px; + } + + body.hub-phone .monitor-stat-cell { + padding: 8px 6px; + } + + body.hub-phone .monitor-stat-label { + font-size: 10px; + } + + body.hub-phone .monitor-stat-value { + font-size: 14px; + } + + body.hub-phone #page-monitor .host-status-panel { + margin-bottom: 8px; + } + + body.hub-phone #page-monitor .host-status-summary { + padding: 8px 10px; + gap: 6px 8px; + } + + body.hub-phone #page-monitor .host-status-summary-text { + font-size: 11px; } - /* 监控:工具条单列优先 */ body.hub-phone #page-monitor .toolbar { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; + display: flex; + flex-wrap: wrap; align-items: center; + gap: 8px; + padding: 8px 10px; + margin-bottom: 10px; } - body.hub-phone #page-monitor .toolbar .primary { - grid-column: 1; - } - + body.hub-phone #page-monitor .toolbar .primary, body.hub-phone #page-monitor .toolbar .danger { - grid-column: 2; + flex: 1 1 auto; + min-height: 36px; + padding: 6px 10px; + font-size: 13px; } body.hub-phone #page-monitor .toolbar .chk-label { - grid-column: 1 / -1; + order: 3; + flex: 1 1 100%; + margin: 0; font-size: 11px; + color: var(--muted); } body.hub-phone #page-monitor .toolbar .toolbar-spacer { @@ -4092,37 +4182,192 @@ body.login-page { } body.hub-phone #page-monitor .toolbar .toolbar-meta { - grid-column: 1 / -1; + order: 4; + flex: 1 1 100%; + font-size: 10px; + opacity: 0.85; } - body.hub-phone #page-monitor .host-status-panel { + /* —— 行情:控件收短,图表优先 —— */ + body.hub-phone #page-market .market-toolbar { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 6px 8px; + align-items: end; + padding: 8px 10px; margin-bottom: 8px; } - /* 行情:减噪,图表吃高度 */ - body.hub-phone #page-market .page-head { - margin-bottom: 4px; + body.hub-phone #page-market .market-field > span { + font-size: 10px; + margin-bottom: 2px; + } + + body.hub-phone #page-market .market-field select, + body.hub-phone #page-market .market-field input { + min-height: 34px; + padding: 4px 8px; + font-size: 13px; + } + + body.hub-phone #page-market .market-field-symbol { + grid-column: 1 / -1; + } + + body.hub-phone #page-market .market-field-symbol .market-symbol-wrap { + flex-direction: column; + gap: 6px; + } + + body.hub-phone #page-market .market-scan-tabs { + width: 100%; + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + padding-bottom: 1px; + } + + body.hub-phone #page-market .market-scan-tabs::-webkit-scrollbar { + display: none; + } + + body.hub-phone #page-market .market-scan-tab { + min-height: 30px; + padding: 0 10px; + font-size: 11px; + } + + body.hub-phone #page-market .market-toolbar #market-load { + grid-column: 1; + min-height: 34px; + padding: 6px 10px; + } + + body.hub-phone #page-market .market-toolbar #market-refresh { + grid-column: 2; + min-height: 34px; + padding: 6px 8px; + font-size: 11px; + } + + body.hub-phone #page-market .market-toolbar .toolbar-meta { + display: none; + } + + body.hub-phone #page-market #market-status { + display: none; + } + + body.hub-phone #page-market #market-status.err, + body.hub-phone #page-market #market-status.warn { + display: block; + font-size: 11px; + margin: 0 0 6px; + } + + body.hub-phone #page-market .market-vol-rank-anchor { + margin: 0 0 6px; } body.hub-phone #page-market .market-chart-wrap { - min-height: min(52vh, 420px); + min-height: min(58vh, 480px); + height: min(58vh, 480px); } - body.hub-phone #page-market .market-ohlcv-title .market-day-split-opt { - font-size: 11px; + body.hub-phone #page-market .market-ohlcv-bar { + padding: 8px 10px 6px; + } + + body.hub-phone #page-market .market-ohlcv-title { + gap: 6px; + margin-bottom: 2px; + } + + /* 交易所/币种已在顶栏出现,图表内重复标签隐藏 */ + body.hub-phone #page-market .mkt-exchange-tag, + body.hub-phone #page-market #mkt-symbol-label, + body.hub-phone #page-market #mkt-tf-label { + display: none; + } + + body.hub-phone #page-market .market-day-split-opt { + display: none; + } + + body.hub-phone #page-market .market-chart-actions { + margin-left: 0; + width: 100%; + justify-content: flex-start; + } + + body.hub-phone #page-market .market-ohlcv-row { + gap: 4px 10px; + font-size: 12px; + } + + /* —— 计算器 —— */ + body.hub-phone #page-calculator .toolbar { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 10px; + margin-bottom: 8px; + } + + body.hub-phone #page-calculator .toolbar .primary { + min-height: 32px; + padding: 4px 12px; + font-size: 12px; + } + + body.hub-phone #page-calculator .toolbar .toolbar-meta { + font-size: 10px; } - /* 计算器:卡片间距收紧 */ body.hub-phone #page-calculator .calc-layout { - gap: 12px; + gap: 10px; } body.hub-phone #page-calculator .calc-card { - padding: 14px 12px; + padding: 12px 12px 14px; + } + + body.hub-phone #page-calculator .calc-card h2 { + margin: 0 0 6px; + font-size: 14px; } body.hub-phone #page-calculator .calc-hint { - font-size: 11px; + display: none; + } + + body.hub-phone #page-calculator .calc-form-grid { + grid-template-columns: 1fr 1fr; + gap: 8px 10px; + } + + body.hub-phone #page-calculator .calc-field-span2 { + grid-column: 1 / -1; + } + + body.hub-phone #page-calculator .calc-market-info { + font-size: 10px; + line-height: 1.35; + padding: 6px 8px; + max-height: 3.2em; + overflow: hidden; + } + + body.hub-phone #page-calculator .calc-field span { + font-size: 10px; + } + + body.hub-phone #page-calculator .calc-field input, + body.hub-phone #page-calculator .calc-field select { + min-height: 34px; + padding: 4px 8px; + font-size: 13px; } .hub-mobile-tabbar { diff --git a/manual_trading_hub/static/app.js b/manual_trading_hub/static/app.js index cf6a547..1c5930c 100644 --- a/manual_trading_hub/static/app.js +++ b/manual_trading_hub/static/app.js @@ -1742,9 +1742,8 @@ return; } if (isMobileLayout()) { - gridEl.style.gridTemplateColumns = options.statsFirst - ? "1fr" - : "repeat(2, minmax(0, 1fr))"; + // 手机一律单列:统计卡与三所卡不再并排挤字 + gridEl.style.gridTemplateColumns = "1fr"; return; } if (options.statsFirst) { diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html index b0f77bb..b6583a1 100644 --- a/manual_trading_hub/static/index.html +++ b/manual_trading_hub/static/index.html @@ -15,7 +15,7 @@ - + @@ -1295,6 +1295,6 @@ - +