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 <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -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 · 期权/对冲开仓仅认真实卖一深度
|
||||
|
||||
### 修改原因
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
|
||||
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
|
||||
<link rel="stylesheet" href="/assets/app.css?v=20260716-opt-light-contrast" />
|
||||
<link rel="stylesheet" href="/assets/app.css?v=20260716-hub-fit-1080" />
|
||||
<link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=4" />
|
||||
<link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
|
||||
<script src="/assets/account_risk_badge.js?v=4"></script>
|
||||
@@ -1327,6 +1327,6 @@
|
||||
<script src="/assets/options_expiry_countdown.js?v=1"></script>
|
||||
<script src="/assets/options_position_cards.js?v=1"></script>
|
||||
<script src="/assets/backup.js?v=1"></script>
|
||||
<script src="/assets/app.js?v=20260715-hub-phone-folds"></script>
|
||||
<script src="/assets/app.js?v=20260716-hub-fit-1080"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user