Phone hub folds: emergency ops, market toolbar, calc tabs, OKX options.

Collapse bulky monitor/market controls by default on phone, show OKX options on tiles, add calculator tab switch, and request landscape on market fullscreen.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-15 22:56:02 +08:00
parent f16dcac202
commit 8838f1f221
5 changed files with 387 additions and 72 deletions
+67 -51
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=20260715-hub-phone-clean" />
<link rel="stylesheet" href="/assets/app.css?v=20260715-hub-phone-folds" />
<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>
@@ -235,15 +235,21 @@
</div>
</div>
<div id="monitor-alert-summary" class="monitor-alert-summary hidden" aria-live="polite"></div>
<div class="toolbar">
<button type="button" id="btn-monitor-refresh" class="primary">立即刷新</button>
<label class="chk-label">
<input type="checkbox" id="auto-monitor" checked /> 后台每 5 秒聚合 · SSE 自动更新
</label>
<button type="button" id="btn-close-all" class="danger">全局紧急全平</button>
<span class="toolbar-spacer"></span>
<span id="monitor-updated" class="toolbar-meta"></span>
</div>
<details id="monitor-ops-fold" class="hub-m-fold monitor-ops-fold">
<summary class="hub-m-fold-summary">
<span class="hub-m-fold-title">操作 · 刷新 / 紧急全平</span>
<span id="monitor-updated-summary" class="hub-m-fold-meta"></span>
</summary>
<div class="toolbar">
<button type="button" id="btn-monitor-refresh" class="primary">立即刷新</button>
<label class="chk-label">
<input type="checkbox" id="auto-monitor" checked /> 后台每 5 秒聚合 · SSE 自动更新
</label>
<button type="button" id="btn-close-all" class="danger">全局紧急全平</button>
<span class="toolbar-spacer"></span>
<span id="monitor-updated" class="toolbar-meta"></span>
</div>
</details>
<div id="monitor-grid" class="grid-monitor"></div>
</div>
@@ -251,42 +257,48 @@
<div class="page-head">
<h1><span class="head-tag">MKT</span> 行情区</h1>
</div>
<div class="market-toolbar toolbar">
<label class="market-field">
<span>交易所</span>
<select id="market-exchange"></select>
</label>
<label class="market-field market-field-symbol">
<span>币种</span>
<div class="market-symbol-wrap">
<input id="market-symbol" type="text" value="BTC/USDT" placeholder="BTC/USDT" autocomplete="off" />
<div class="market-scan-tabs" role="tablist" aria-label="成交额与背离筛选">
<button type="button" class="market-scan-tab is-active" data-scan-tab="top20" aria-selected="true">Top20</button>
<button type="button" class="market-scan-tab" data-scan-tab="4h" aria-selected="false">4h背离</button>
<button type="button" class="market-scan-tab" data-scan-tab="1d" aria-selected="false">日线背离</button>
<button type="button" class="market-scan-tab" data-scan-tab="1w" aria-selected="false">周线背离</button>
<details id="market-toolbar-fold" class="hub-m-fold market-toolbar-fold">
<summary class="hub-m-fold-summary">
<span class="hub-m-fold-title">选币 · 周期 · 加载</span>
<span id="market-fold-summary" class="hub-m-fold-meta">BTC/USDT · 1d</span>
</summary>
<div class="market-toolbar toolbar">
<label class="market-field">
<span>交易所</span>
<select id="market-exchange"></select>
</label>
<label class="market-field market-field-symbol">
<span>币种</span>
<div class="market-symbol-wrap">
<input id="market-symbol" type="text" value="BTC/USDT" placeholder="BTC/USDT" autocomplete="off" />
<div class="market-scan-tabs" role="tablist" aria-label="成交额与背离筛选">
<button type="button" class="market-scan-tab is-active" data-scan-tab="top20" aria-selected="true">Top20</button>
<button type="button" class="market-scan-tab" data-scan-tab="4h" aria-selected="false">4h背离</button>
<button type="button" class="market-scan-tab" data-scan-tab="1d" aria-selected="false">日线背离</button>
<button type="button" class="market-scan-tab" data-scan-tab="1w" aria-selected="false">周线背离</button>
</div>
</div>
</div>
</label>
<label class="market-field">
<span>周期</span>
<select id="market-timeframe">
<option value="1m">1m</option>
<option value="5m">5m</option>
<option value="15m">15m</option>
<option value="1h">1h</option>
<option value="2h">2h</option>
<option value="4h">4h</option>
<option value="1d" selected>1d</option>
<option value="1w">1w</option>
</select>
</label>
<button type="button" id="market-load" class="primary">加载</button>
<button type="button" id="market-refresh" class="ghost" title="清空该币种本周期 K 线缓存并从交易所重新拉取">清库重拉</button>
<span class="toolbar-spacer"></span>
<span id="market-bar-countdown" class="toolbar-meta market-countdown"></span>
<span id="market-updated" class="toolbar-meta"></span>
</div>
</label>
<label class="market-field">
<span>周期</span>
<select id="market-timeframe">
<option value="1m">1m</option>
<option value="5m">5m</option>
<option value="15m">15m</option>
<option value="1h">1h</option>
<option value="2h">2h</option>
<option value="4h">4h</option>
<option value="1d" selected>1d</option>
<option value="1w">1w</option>
</select>
</label>
<button type="button" id="market-load" class="primary">加载</button>
<button type="button" id="market-refresh" class="ghost" title="清空该币种本周期 K 线缓存并从交易所重新拉取">清库重拉</button>
<span class="toolbar-spacer"></span>
<span id="market-bar-countdown" class="toolbar-meta market-countdown"></span>
<span id="market-updated" class="toolbar-meta"></span>
</div>
</details>
<div id="market-vol-rank-anchor" class="market-vol-rank-anchor">
<div id="market-vol-rank-sheet" class="market-vol-rank-sheet hidden" aria-hidden="true">
<div id="market-vol-rank-meta" class="market-vol-rank-meta">加载中…</div>
@@ -729,8 +741,12 @@
<button type="button" id="calc-btn-refresh" class="primary">刷新</button>
<span id="calc-refresh-status" class="toolbar-meta"></span>
</div>
<div class="calc-layout">
<section class="calc-card card">
<div class="calc-mobile-tabs" role="tablist" aria-label="计算器切换">
<button type="button" class="calc-m-tab is-active" data-calc-tab="trend" role="tab" aria-selected="true">趋势回调</button>
<button type="button" class="calc-m-tab" data-calc-tab="roll" role="tab" aria-selected="false">滚仓</button>
</div>
<div class="calc-layout" data-calc-tab="trend">
<section class="calc-card card" data-calc-pane="trend">
<h2>趋势回调计算器</h2>
<p class="calc-hint">逻辑与实例策略页一致:首仓 50% + 补仓网格;止损金额 = 资金 × 风险%.</p>
<form id="calc-trend-form" class="calc-form">
@@ -793,7 +809,7 @@
<div id="calc-trend-result" class="calc-result hidden"></div>
</section>
<section class="calc-card card">
<section class="calc-card card" data-calc-pane="roll">
<h2>滚仓计算器</h2>
<p class="calc-hint">首仓按「单次风险」以损定仓;每次滚仓后合并持仓打到新止损 ≈ 单次风险;止盈锁定首仓价不变.最多 3 次滚仓.</p>
<form id="calc-roll-form" class="calc-form">
@@ -1280,9 +1296,9 @@
<div id="toast"></div>
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="/assets/chart_draw.js?v=20260609-market-day-split"></script>
<script src="/assets/chart.js?v=20260706-div-scan-ui"></script>
<script src="/assets/chart.js?v=20260715-fs-landscape"></script>
<script src="/assets/plan.js?v=20260614-plan-refresh"></script>
<script src="/assets/calculator.js?v=3"></script>
<script src="/assets/calculator.js?v=20260715-calc-tabs"></script>
<script src="/assets/trade_stats_calendar.js?v=3"></script>
<script src="/assets/archive.js?v=20260710-archive-cum2"></script>
<script src="/assets/funds.js?v=20260707-hub-options-funds"></script>
@@ -1295,6 +1311,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-clean"></script>
<script src="/assets/app.js?v=20260715-hub-phone-folds"></script>
</body>
</html>