Restore strategy chips and 1080p side margins.

Stick expand hint to card bottom; drop mistaken key-monitor slot; keep ultrawide content width.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-16 14:11:29 +08:00
parent 0540b585c7
commit 35b23836e3
4 changed files with 63 additions and 33 deletions
+26
View File
@@ -4,6 +4,32 @@
---
## 2026-07-16 · 监控芯片还原 + 底栏贴底 + 1080p 留白
### 修改原因
「监控位」本意是原先关键位/趋势回调/顺势加仓芯片,不是单独「无监控位」槽;全屏提示须贴卡片最底;1920×1080 两侧需留白,带鱼屏保持现宽。
### 修改的地方
| 文件 | 改动摘要 |
|------|----------|
| `manual_trading_hub/static/app.js` | 去掉错误的监控位槽;恢复策略芯片(仍隐藏期权 N仓) |
| `manual_trading_hub/static/app.css` | 分栏卡 `card-expand-hint` `margin-top:auto` 贴底;≤2000px 加大左右留白,>2000px 保持 1860 内容宽 |
| `manual_trading_hub/static/index.html` | 缓存 `20260716-hub-chips-margin` |
### 达成的目标
有关键位/趋势/顺势时仍以芯片显示;提示条在卡底;1080p 两侧有留白,带鱼屏观感不变。
### 交付之后的验收
1. 无「监控位 · 0 / 无监控位」区块;有关键位等时出现原芯片样式。
2. 「点击标题栏进入全屏…」贴在各分栏卡最底部。
3. 1920×1080 内容两侧留白明显;带鱼屏内容宽度仍约 1860。
---
## 2026-07-16 · 监控区 2×2 细化(目标监控列/预留行/去平板专属)
### 修改原因
+32 -6
View File
@@ -1329,14 +1329,12 @@ html[data-theme="light"] .host-metric-bar {
min-height: 0;
}
.hub-slot-pos,
.hub-slot-monitor {
.hub-slot-pos {
min-height: 2.4em;
flex: 0 0 auto;
}
.hub-slot-pos[data-pos-count="0"] .empty-hint,
.hub-slot-monitor[data-key-count="0"] .empty-hint {
.hub-slot-pos[data-pos-count="0"] .empty-hint {
margin: 0;
padding: 6px 0;
}
@@ -1680,6 +1678,19 @@ body.market-chart-fs-open {
background: rgba(0, 212, 255, 0.03);
}
/* 分栏卡:提示条贴卡片最底部 */
.card-monitor-split-side .card-body,
.card-monitor-okx-split .card-body {
display: flex;
flex-direction: column;
}
.card-monitor-split-side .card-expand-hint,
.card-monitor-okx-split .card-expand-hint {
margin-top: auto;
flex-shrink: 0;
}
.compact-pos-list {
display: flex;
flex-direction: column;
@@ -9832,22 +9843,37 @@ html[data-theme="light"] .hub-logs-card-hint {
}
}
/* ── 一屏适配:桌面(含用户自行缩放的平板视口);手机端 .hub-phone 另走 ── */
/* ── 一屏适配:桌面;手机端 .hub-phone 另走 ── */
@media (min-width: 721px) and (min-height: 650px) {
/* 1920 类屏:两侧留白更大;带鱼屏(>2000)用更宽内容区 */
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));
max-width: min(1680px, calc(100vw - 120px));
height: 100dvh;
max-height: 100dvh;
padding-top: 0;
padding-bottom: 8px;
padding-left: max(48px, env(safe-area-inset-left));
padding-right: max(48px, env(safe-area-inset-right));
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
}
@media (min-width: 2001px) and (min-height: 650px) {
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 - 48px));
padding-left: max(24px, env(safe-area-inset-left));
padding-right: max(24px, env(safe-area-inset-right));
}
}
@media (min-width: 721px) and (min-height: 650px) {
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 {
+3 -25
View File
@@ -3860,25 +3860,7 @@
return html;
}
function renderPerpetualKeyMonitorSlot(keys, kmap) {
const list = Array.isArray(keys) ? keys : [];
let html = `<div class="section-title">监控位 · ${list.length}</div>`;
html += `<div class="hub-slot-monitor" data-key-count="${list.length}">`;
if (list.length) {
const first = list.slice(0, 1);
html += renderKeySection(first, kmap || {});
if (list.length > 1) {
html += `<div class="empty-hint hub-slot-more">另有 ${list.length - 1} 个监控位 · 点标题全屏查看</div>`;
}
} else {
html += '<div class="empty-hint">无监控位</div>';
}
html += "</div>";
return html;
}
const HUB_EXPAND_HINT =
"点击标题栏进入全屏 · 委托 / 关键位 / 下单监控 / 趋势回调 / 顺势加仓";
const HUB_EXPAND_HINT = "点击标题栏进入全屏 · 委托 / 关键位 / 下单监控 / 趋势回调 / 顺势加仓";
function renderGridBody(row, ag, pos, hm, flaskOk, keys, orders, trends, rolls, kmap, layoutOpts) {
const layout = layoutOpts || {};
@@ -3887,7 +3869,7 @@
const expandHint = `<div class="card-expand-hint">${esc(HUB_EXPAND_HINT)}</div>`;
let inner = "";
if (layout.okxPart === "perp" || layout.splitSide) {
/* 桌面分栏永续/分所卡:预留仓位行+监控位行+全屏提示;不显示期权 N仓 */
/* 桌面分栏:仓位预留 + 原关键位/趋势/顺势芯片 + 底栏提示;不显示期权 N仓 */
if (layout.okxPart === "options") {
inner += renderOptionsSectionBody(row);
inner += expandHint;
@@ -3896,11 +3878,7 @@
if (layout.okxPart === "perp" || !rowHasOptionsLayout(row)) {
inner += renderAccountStatRow(row, ag);
inner += renderPerpetualPositionsSection(row, ag, pos, orders, trends, tickMap, intraday);
inner += renderPerpetualKeyMonitorSlot(flaskOk ? keys : [], kmap || {});
inner += renderCardStrategyStats(row, hm, flaskOk, {
hideOptions: true,
hideKeyChips: true,
});
inner += renderCardStrategyStats(row, hm, flaskOk, { hideOptions: true });
if (intraday) {
inner += `<div class="card-expand-hint">日内纪律:禁手动平仓/改委托 · 整点强制清仓${row.force_close && row.force_close.enabled ? " · " + esc(row.force_close.label || "强制清仓") : ""}</div>`;
} else {
+2 -2
View File
@@ -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-hub-2x2-slots" />
<link rel="stylesheet" href="/assets/app.css?v=20260716-hub-chips-margin" />
<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=20260716-hub-2x2-slots"></script>
<script src="/assets/app.js?v=20260716-hub-chips-margin"></script>
</body>
</html>