From 8e810154ca2232ab57e42a0d8029725287fe5272 Mon Sep 17 00:00:00 2001 From: dekun Date: Tue, 23 Jun 2026 16:38:30 +0800 Subject: [PATCH] Add open-instance to trade page and mobile/tablet responsive layouts. Co-authored-by: Cursor --- crypto_monitor_binance/templates/index.html | 2 +- crypto_monitor_gate/templates/index.html | 2 +- crypto_monitor_gate_bot/templates/index.html | 2 +- crypto_monitor_okx/templates/index.html | 2 +- manual_trading_hub/static/app.css | 81 ++++++++++++++++++++ manual_trading_hub/static/app.js | 5 +- manual_trading_hub/static/index.html | 2 +- static/instance_theme.css | 69 ++++++++++++++++- 8 files changed, 158 insertions(+), 7 deletions(-) diff --git a/crypto_monitor_binance/templates/index.html b/crypto_monitor_binance/templates/index.html index 0fcd2dc..65fd313 100644 --- a/crypto_monitor_binance/templates/index.html +++ b/crypto_monitor_binance/templates/index.html @@ -237,7 +237,7 @@ .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} - + diff --git a/crypto_monitor_gate/templates/index.html b/crypto_monitor_gate/templates/index.html index 652a5b4..61e595e 100644 --- a/crypto_monitor_gate/templates/index.html +++ b/crypto_monitor_gate/templates/index.html @@ -237,7 +237,7 @@ .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} - + diff --git a/crypto_monitor_gate_bot/templates/index.html b/crypto_monitor_gate_bot/templates/index.html index 652a5b4..61e595e 100644 --- a/crypto_monitor_gate_bot/templates/index.html +++ b/crypto_monitor_gate_bot/templates/index.html @@ -237,7 +237,7 @@ .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} - + diff --git a/crypto_monitor_okx/templates/index.html b/crypto_monitor_okx/templates/index.html index 7affad1..a57e577 100644 --- a/crypto_monitor_okx/templates/index.html +++ b/crypto_monitor_okx/templates/index.html @@ -237,7 +237,7 @@ .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4} - + diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index c564ec2..6ac30d7 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -1288,6 +1288,23 @@ body.market-chart-fs-open { justify-content: flex-end; } +.fs-head-actions .btn-open-trade { + border-color: var(--accent); + color: var(--accent); + background: color-mix(in srgb, var(--accent) 10%, transparent); + font-weight: 600; +} + +.fs-head-actions .btn-open-trade:hover { + background: color-mix(in srgb, var(--accent) 18%, transparent); +} + +.card-actions .btn-open-trade { + border-color: var(--accent); + color: var(--accent); + font-weight: 600; +} + .card-expand-hint { margin-top: 12px; padding: 8px 10px; @@ -1393,6 +1410,45 @@ body.market-chart-fs-open { } } +/* 平板横屏：持仓与区块双列 */ +@media (min-width: 641px) and (max-width: 1200px) and (orientation: landscape) { + .exchange-fullscreen .hub-pos-list.count-2, + .exchange-fullscreen .hub-pos-list.count-3, + .exchange-fullscreen .hub-pos-list.count-4, + .exchange-fullscreen .hub-pos-list.count-many { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .exchange-fullscreen .hub-section-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .hub-fs-sections-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + align-items: start; + } +} + +/* 手机竖屏：全屏顶栏与持仓单列 */ +@media (max-width: 720px), (max-width: 900px) and (orientation: portrait) { + .exchange-fullscreen .hub-pos-list { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +.hub-fs-sections-grid { + display: flex; + flex-direction: column; + gap: 12px; +} + +@media (max-width: 720px), (max-width: 900px) and (orientation: portrait) { + .hub-fs-sections-grid { + display: flex; + flex-direction: column; + } +} + /* 对齐实盘「实时持仓」pos-card */ .hub-pos-card.pos-card { background: var(--pos-card-bg); @@ -3073,6 +3129,27 @@ body.login-page { font-size: 9px; } + .instance-frame-toolbar { + flex-wrap: wrap; + gap: 8px; + padding: 8px 10px; + } + + .instance-frame-title { + flex: 1 1 100%; + order: -1; + font-size: 0.82rem; + } + + .instance-frame-actions { + flex: 1 1 auto; + justify-content: flex-end; + } + + .instance-frame { + height: calc(100dvh - 96px); + } + .exchange-fullscreen { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); @@ -3099,6 +3176,10 @@ body.login-page { grid-column: 1 / -1; } + .fs-head-actions .btn-open-trade { + grid-column: 1 / -1; + } + .fs-head-actions .btn-link, .fs-head-actions button { min-height: 44px; diff --git a/manual_trading_hub/static/app.js b/manual_trading_hub/static/app.js index cc992ad..6c6d1e6 100644 --- a/manual_trading_hub/static/app.js +++ b/manual_trading_hub/static/app.js @@ -3073,6 +3073,7 @@
+ ${flaskOpen ? `打开实例` : ""} ${flaskOpen ? `关键位监控` : ""} ${flaskOpen ? `策略交易` : ""} @@ -3102,6 +3103,7 @@ html += '
暂无持仓
'; } html += "
"; + html += '
'; if ((row.capabilities || []).includes("key")) { if (!flaskOk) { html += renderHubSectionCard("关键位", `
${esc(row.flask_error || hm.error || "Flask 未连通")}
`, ""); @@ -3122,6 +3124,7 @@ ); } html += renderHubSectionCard("顺势加仓", renderRollSection(rolls, tickMap), "暂无运行中的顺势加仓组"); + html += "
"; return html; } @@ -3377,7 +3380,7 @@ const dotCls = online ? "ok" : "bad"; const flaskOpen = row.flask_url_browser || row.flask_url; const openFlask = flaskOpen - ? `实例` + ? `打开实例` : ""; const openKey = flaskOpen ? `关键位` diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html index 33f0148..a24ec20 100644 --- a/manual_trading_hub/static/index.html +++ b/manual_trading_hub/static/index.html @@ -816,6 +816,6 @@ - + diff --git a/static/instance_theme.css b/static/instance_theme.css index 4a37a84..d1c77f9 100644 --- a/static/instance_theme.css +++ b/static/instance_theme.css @@ -78,9 +78,76 @@ .card { padding: 12px; } + + .form-grid { + grid-template-columns: minmax(0, 1fr) !important; + } + + .pos-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .stat-box { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .dual-panel-grid { + grid-template-columns: minmax(0, 1fr) !important; + } + + .grid { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +/* 手机竖屏（含大屏手机） */ +@media (max-width: 900px) and (orientation: portrait) { + .grid { + grid-template-columns: minmax(0, 1fr) !important; + } + + .dual-panel-grid { + grid-template-columns: minmax(0, 1fr) !important; + } + + .form-grid { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +/* 平板横屏：双列布局，充分利用宽屏 */ +@media (min-width: 721px) and (max-width: 1200px) and (orientation: landscape) { + body { + padding: 10px 14px !important; + } + + .grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 12px; + } + + .dual-panel-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .form-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + + .pos-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + + .stat-box { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + } + + .records-card, + .review-card { + grid-column: 1 / -1; + } } -/* 实例页亮色主题（覆盖模板内联暗色样式） */ html[data-theme="light"] { color-scheme: light; }