dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add open-instance to trade page and mobile/tablet responsive layouts.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-23 16:38:30 +08:00
parent ed3709dddf
commit 8e810154ca
8 changed files with 158 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crypto_monitor_binance/templates/index.html
+1 -1
View File
@@ -237,7 +237,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .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} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=14"> <link rel="stylesheet" href="/static/instance_theme.css?v=15">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
crypto_monitor_gate/templates/index.html
+1 -1
View File
@@ -237,7 +237,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .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} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=14"> <link rel="stylesheet" href="/static/instance_theme.css?v=15">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
crypto_monitor_gate_bot/templates/index.html
+1 -1
View File
@@ -237,7 +237,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .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} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=14"> <link rel="stylesheet" href="/static/instance_theme.css?v=15">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
crypto_monitor_okx/templates/index.html
+1 -1
View File
@@ -237,7 +237,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px} .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} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=14"> <link rel="stylesheet" href="/static/instance_theme.css?v=15">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
manual_trading_hub/static/app.css
+81
View File
@@ -1288,6 +1288,23 @@ body.market-chart-fs-open {
justify-content: flex-end; 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 { .card-expand-hint {
margin-top: 12px; margin-top: 12px;
padding: 8px 10px; 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 */ /* 对齐实盘「实时持仓」pos-card */
.hub-pos-card.pos-card { .hub-pos-card.pos-card {
background: var(--pos-card-bg); background: var(--pos-card-bg);
@@ -3073,6 +3129,27 @@ body.login-page {
font-size: 9px; 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 { .exchange-fullscreen {
padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 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)); 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; grid-column: 1 / -1;
} }
.fs-head-actions .btn-open-trade {
grid-column: 1 / -1;
}
.fs-head-actions .btn-link, .fs-head-actions .btn-link,
.fs-head-actions button { .fs-head-actions button {
min-height: 44px; min-height: 44px;
manual_trading_hub/static/app.js
+4 -1
View File
@@ -3073,6 +3073,7 @@
</div> </div>
<div class="fs-head-actions"> <div class="fs-head-actions">
<button type="button" class="ghost btn-expand-back">返回监控</button> <button type="button" class="ghost btn-expand-back">返回监控</button>
${flaskOpen ? `<a class="btn-link btn-open-instance btn-open-trade" href="#" data-ex-id="${esc(row.id)}" data-next="/trade">打开实例</a>` : ""}
${flaskOpen ? `<a class="btn-link btn-open-instance" href="#" data-ex-id="${esc(row.id)}" data-next="/key_monitor">关键位监控</a>` : ""} ${flaskOpen ? `<a class="btn-link btn-open-instance" href="#" data-ex-id="${esc(row.id)}" data-next="/key_monitor">关键位监控</a>` : ""}
${flaskOpen ? `<a class="btn-link btn-open-instance" href="#" data-ex-id="${esc(row.id)}" data-next="/strategy">策略交易</a>` : ""} ${flaskOpen ? `<a class="btn-link btn-open-instance" href="#" data-ex-id="${esc(row.id)}" data-next="/strategy">策略交易</a>` : ""}
<button type="button" class="danger btn-close-ex" data-id="${esc(row.id)}">全平</button> <button type="button" class="danger btn-close-ex" data-id="${esc(row.id)}">全平</button>
@@ -3102,6 +3103,7 @@
html += '<div class="pos-empty">暂无持仓</div>'; html += '<div class="pos-empty">暂无持仓</div>';
} }
html += "</div>"; html += "</div>";
html += '<div class="hub-fs-sections-grid">';
if ((row.capabilities || []).includes("key")) { if ((row.capabilities || []).includes("key")) {
if (!flaskOk) { if (!flaskOk) {
html += renderHubSectionCard("关键位", `<div class="err">${esc(row.flask_error || hm.error || "Flask 未连通")}</div>`, ""); html += renderHubSectionCard("关键位", `<div class="err">${esc(row.flask_error || hm.error || "Flask 未连通")}</div>`, "");
@@ -3122,6 +3124,7 @@
); );
} }
html += renderHubSectionCard("顺势加仓", renderRollSection(rolls, tickMap), "暂无运行中的顺势加仓组"); html += renderHubSectionCard("顺势加仓", renderRollSection(rolls, tickMap), "暂无运行中的顺势加仓组");
html += "</div>";
return html; return html;
} }
@@ -3377,7 +3380,7 @@
const dotCls = online ? "ok" : "bad"; const dotCls = online ? "ok" : "bad";
const flaskOpen = row.flask_url_browser || row.flask_url; const flaskOpen = row.flask_url_browser || row.flask_url;
const openFlask = flaskOpen const openFlask = flaskOpen
? `<a class="btn-link btn-open-instance" href="#" data-ex-id="${esc(row.id)}" data-next="/">实例</a>` ? `<a class="btn-link btn-open-instance btn-open-trade" href="#" data-ex-id="${esc(row.id)}" data-next="/trade">打开实例</a>`
: ""; : "";
const openKey = flaskOpen const openKey = flaskOpen
? `<a class="btn-link btn-open-instance" href="#" data-ex-id="${esc(row.id)}" data-next="/key_monitor">关键位</a>` ? `<a class="btn-link btn-open-instance" href="#" data-ex-id="${esc(row.id)}" data-next="/key_monitor">关键位</a>`
manual_trading_hub/static/index.html
+1 -1
View File
@@ -816,6 +816,6 @@
<script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script> <script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
<script src="/assets/ai_review_render.js?v=3"></script> <script src="/assets/ai_review_render.js?v=3"></script>
<script src="/assets/time_close_ui.js?v=2"></script> <script src="/assets/time_close_ui.js?v=2"></script>
<script src="/assets/app.js?v=20260618-risk-countdown"></script> <script src="/assets/app.js?v=20260614-open-instance-responsive"></script>
</body> </body>
</html> </html>
static/instance_theme.css
+68 -1
View File
@@ -78,9 +78,76 @@
.card { .card {
padding: 12px; 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"] { html[data-theme="light"] {
color-scheme: light; color-scheme: light;
} }