Add phone-only hub shell with four bottom tabs.

Keep desktop/tablet top nav unchanged; at max-width 720px use monitor/market/calculator/AI plus a More sheet for secondary pages.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-15 22:40:50 +08:00
parent 0939274113
commit bfb5e22be9
4 changed files with 405 additions and 34 deletions
@@ -17,6 +17,10 @@
| **系统日志** | 中控与三实例 PM2 日志(排错用,非部署说明) |
| **系统设置** | 中控密码、导航显示、交易所地址、监控能力勾选 |
## 手机端(≤720px
底栏固定四项:**监控 / 行情 / 计算 / AI**;其余入口进 **更多**。电脑与平板仍用顶栏,布局不变。
## 默认首页
登录后默认进入 **监控区**`/monitor`)。
+259
View File
@@ -4034,6 +4034,265 @@ body.login-page {
}
}
/* —— 手机壳:底栏四件套(仅 ≤720px;桌面/平板完全不进此规则) —— */
.hub-mobile-tabbar,
.hub-mobile-more {
display: none;
}
@media (max-width: 720px) {
:root {
--hub-m-tabbar-h: 56px;
}
body.hub-phone .app-header .top-nav {
display: none !important;
}
body.hub-phone .header-right {
grid-template-columns: 1fr auto auto;
grid-template-rows: auto;
}
body.hub-phone .app-shell {
padding-bottom: calc(var(--hub-m-tabbar-h) + max(10px, env(safe-area-inset-bottom)));
}
body.hub-phone .page-head h1 {
font-size: 1.05rem;
}
body.hub-phone .page-head .head-tag {
font-size: 0.62rem;
}
/* 监控:工具条单列优先 */
body.hub-phone #page-monitor .toolbar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
align-items: center;
}
body.hub-phone #page-monitor .toolbar .primary {
grid-column: 1;
}
body.hub-phone #page-monitor .toolbar .danger {
grid-column: 2;
}
body.hub-phone #page-monitor .toolbar .chk-label {
grid-column: 1 / -1;
font-size: 11px;
}
body.hub-phone #page-monitor .toolbar .toolbar-spacer {
display: none;
}
body.hub-phone #page-monitor .toolbar .toolbar-meta {
grid-column: 1 / -1;
}
body.hub-phone #page-monitor .host-status-panel {
margin-bottom: 8px;
}
/* 行情:减噪,图表吃高度 */
body.hub-phone #page-market .page-head {
margin-bottom: 4px;
}
body.hub-phone #page-market .market-chart-wrap {
min-height: min(52vh, 420px);
}
body.hub-phone #page-market .market-ohlcv-title .market-day-split-opt {
font-size: 11px;
}
/* 计算器:卡片间距收紧 */
body.hub-phone #page-calculator .calc-layout {
gap: 12px;
}
body.hub-phone #page-calculator .calc-card {
padding: 14px 12px;
}
body.hub-phone #page-calculator .calc-hint {
font-size: 11px;
}
.hub-mobile-tabbar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
height: calc(var(--hub-m-tabbar-h) + env(safe-area-inset-bottom));
padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom)
max(8px, env(safe-area-inset-left));
align-items: stretch;
justify-content: space-around;
gap: 2px;
background: color-mix(in srgb, var(--panel, #12161f) 92%, transparent);
border-top: 1px solid var(--border-soft);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-sizing: border-box;
}
.hub-mobile-tabbar .hub-m-tab.nav-hidden {
display: none !important;
}
.hub-m-tab {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 6px 2px;
padding: 0 4px;
border: none;
border-radius: 10px;
background: transparent;
color: var(--nav-link-idle, var(--muted));
font: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.hub-m-tab:hover,
.hub-m-tab:focus-visible {
color: var(--text);
background: var(--nav-link-hover-bg, rgba(255, 255, 255, 0.04));
outline: none;
}
.hub-m-tab.active {
color: var(--accent, #6ea8ff);
background: var(--accent-dim, rgba(110, 168, 255, 0.12));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #6ea8ff) 35%, transparent);
}
body.hub-phone #toast {
bottom: calc(var(--hub-m-tabbar-h) + max(12px, env(safe-area-inset-bottom)));
}
/* 更多抽屉 */
body.hub-mobile-more-open .hub-mobile-more {
display: block;
}
.hub-mobile-more {
position: fixed;
inset: 0;
z-index: 90;
}
.hub-mobile-more-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.hub-mobile-more-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: min(78vh, 560px);
overflow: auto;
padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
border-radius: 16px 16px 0 0;
background: var(--panel, #12161f);
border: 1px solid var(--border-soft);
border-bottom: none;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}
.hub-mobile-more-handle {
width: 36px;
height: 4px;
margin: 2px auto 12px;
border-radius: 999px;
background: var(--border);
}
.hub-mobile-more-title {
margin: 0 0 4px;
font-size: 1rem;
}
.hub-mobile-more-hint {
margin: 0 0 14px;
font-size: 11px;
color: var(--muted);
}
.hub-mobile-more-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.hub-mobile-more-nav a {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 8px;
border-radius: 10px;
border: 1px solid var(--border-soft);
background: var(--nav-bg, rgba(255, 255, 255, 0.03));
color: var(--text);
text-decoration: none;
font-size: 13px;
font-weight: 500;
}
.hub-mobile-more-nav a.nav-hidden {
display: none !important;
}
.hub-mobile-more-nav a.active {
border-color: color-mix(in srgb, var(--accent, #6ea8ff) 45%, var(--border-soft));
background: var(--accent-dim, rgba(110, 168, 255, 0.12));
color: var(--accent, #6ea8ff);
}
.hub-mobile-more-close {
width: 100%;
margin-top: 14px;
min-height: 44px;
}
/* AI 页为底栏让位;键盘打开时藏底栏 */
body.hub-page-ai.hub-phone .app-shell {
padding-bottom: calc(var(--hub-m-tabbar-h) + max(8px, env(safe-area-inset-bottom)));
}
body.hub-page-ai.hub-phone.hub-ai-keyboard-open .hub-mobile-tabbar {
display: none;
}
body.hub-page-ai.hub-phone.hub-ai-keyboard-open .app-shell {
padding-bottom: max(8px, env(safe-area-inset-bottom));
}
body.hub-page-ai.hub-phone .app-header .top-nav {
display: none !important;
}
}
@media (max-width: 480px) {
body {
font-size: 12px;
+112 -32
View File
@@ -51,24 +51,69 @@
function syncNavVisibility(data) {
const d = (data && data.display) || {};
const navFunds = document.getElementById("nav-funds");
const navDash = document.getElementById("nav-dashboard");
const navPlan = document.getElementById("nav-plan");
const navArchive = document.getElementById("nav-archive");
const navAi = document.getElementById("nav-ai");
const navCalc = document.getElementById("nav-calculator");
const navStrategy = document.getElementById("nav-strategy");
const navHelp = document.getElementById("nav-help");
const navLogs = document.getElementById("nav-logs");
if (navFunds) navFunds.classList.toggle("nav-hidden", d.show_nav_funds === false);
if (navDash) navDash.classList.toggle("nav-hidden", d.show_nav_dashboard === false);
if (navPlan) navPlan.classList.toggle("nav-hidden", d.show_nav_plan === false);
if (navArchive) navArchive.classList.toggle("nav-hidden", d.show_nav_archive === false);
if (navAi) navAi.classList.toggle("nav-hidden", d.show_nav_ai === false);
if (navCalc) navCalc.classList.toggle("nav-hidden", d.show_nav_calculator === false);
if (navStrategy) navStrategy.classList.toggle("nav-hidden", d.show_nav_strategy === false);
if (navHelp) navHelp.classList.toggle("nav-hidden", d.show_nav_help === false);
if (navLogs) navLogs.classList.toggle("nav-hidden", d.show_nav_logs === false);
const pairs = [
["nav-funds", "m-nav-funds", d.show_nav_funds === false],
["nav-dashboard", "m-nav-dashboard", d.show_nav_dashboard === false],
["nav-plan", "m-nav-plan", d.show_nav_plan === false],
["nav-archive", "m-nav-archive", d.show_nav_archive === false],
["nav-ai", "m-tab-ai", d.show_nav_ai === false],
["nav-calculator", "m-tab-calculator", d.show_nav_calculator === false],
["nav-strategy", "m-nav-strategy", d.show_nav_strategy === false],
["nav-help", "m-nav-help", d.show_nav_help === false],
["nav-logs", "m-nav-logs", d.show_nav_logs === false],
];
pairs.forEach(([desktopId, mobileId, hide]) => {
const a = document.getElementById(desktopId);
const b = document.getElementById(mobileId);
if (a) a.classList.toggle("nav-hidden", hide);
if (b) b.classList.toggle("nav-hidden", hide);
});
}
const HUB_PHONE_PRIMARY = { monitor: 1, market: 1, calculator: 1, ai: 1 };
function syncHubPhoneShellClass() {
document.body.classList.toggle("hub-phone", isMobileLayout());
}
function closeHubMobileMore() {
document.body.classList.remove("hub-mobile-more-open");
const more = document.getElementById("hub-mobile-more");
const btn = document.getElementById("m-tab-more");
if (more) more.setAttribute("aria-hidden", "true");
if (btn) btn.setAttribute("aria-expanded", "false");
syncHubMobileTabActive(currentPage());
}
function openHubMobileMore() {
if (!isMobileLayout()) return;
document.body.classList.add("hub-mobile-more-open");
const more = document.getElementById("hub-mobile-more");
const btn = document.getElementById("m-tab-more");
if (more) more.setAttribute("aria-hidden", "false");
if (btn) btn.setAttribute("aria-expanded", "true");
syncHubMobileTabActive(currentPage());
}
function toggleHubMobileMore() {
if (document.body.classList.contains("hub-mobile-more-open")) closeHubMobileMore();
else openHubMobileMore();
}
function syncHubMobileTabActive(page) {
const primary = !!HUB_PHONE_PRIMARY[page];
const moreOpen = document.body.classList.contains("hub-mobile-more-open");
document.querySelectorAll(".hub-mobile-tabbar .hub-m-tab").forEach((el) => {
const tab = el.getAttribute("data-hub-tab") || "";
let on = false;
if (tab === "more") on = moreOpen || !primary;
else on = !moreOpen && tab === page;
el.classList.toggle("active", on);
});
document.querySelectorAll(".hub-mobile-more-nav a").forEach((a) => {
const href = (a.getAttribute("href") || "").split("?")[0];
a.classList.toggle("active", href === "/" + page);
});
}
function pageNavAllowed(page) {
@@ -1260,6 +1305,9 @@
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");
syncHubPhoneShellClass();
if (HUB_PHONE_PRIMARY[page]) closeHubMobileMore();
syncHubMobileTabActive(page);
syncHubAiMobileViewport();
if (page === "monitor") startMonitorPoll();
else stopMonitorPoll();
@@ -1876,19 +1924,61 @@
syncHubAiMobileViewport();
}
function initHubMobileChrome() {
const moreBtn = document.getElementById("m-tab-more");
const backdrop = document.getElementById("hub-mobile-more-backdrop");
const closeBtn = document.getElementById("hub-mobile-more-close");
if (moreBtn) {
moreBtn.addEventListener("click", (ev) => {
ev.preventDefault();
toggleHubMobileMore();
});
}
if (backdrop) backdrop.addEventListener("click", closeHubMobileMore);
if (closeBtn) closeBtn.addEventListener("click", closeHubMobileMore);
document.addEventListener("keydown", (ev) => {
if (ev.key === "Escape" && document.body.classList.contains("hub-mobile-more-open")) {
closeHubMobileMore();
}
});
syncHubPhoneShellClass();
}
function bindHubSpaNavLinks(selector) {
document.querySelectorAll(selector).forEach((a) => {
a.addEventListener("click", (ev) => {
const href = a.getAttribute("href");
if (!href || ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.altKey) return;
ev.preventDefault();
closeHubMobileMore();
const path = href.split("?")[0];
if (path === window.location.pathname) {
setActiveNav();
return;
}
history.pushState({}, "", href);
setActiveNav();
});
});
}
function initMobileLayout() {
initAiMobileTabs();
initHubAiMobileViewport();
initHubMobileChrome();
let resizeTimer = null;
let wasMobile = isMobileLayout();
window.addEventListener("resize", () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const nowMobile = isMobileLayout();
syncHubPhoneShellClass();
if (!nowMobile) closeHubMobileMore();
if (lastMonitorRows.length && nowMobile !== wasMobile) {
wasMobile = nowMobile;
renderMonitorGrid(lastMonitorRows);
updateMonitorAlertSummary(lastMonitorRows);
syncHubMobileTabActive(currentPage());
return;
}
wasMobile = nowMobile;
@@ -1901,6 +1991,7 @@
});
updateMonitorAlertSummary(lastMonitorRows);
}
syncHubMobileTabActive(currentPage());
}, 120);
});
}
@@ -5601,20 +5692,9 @@
}
function initShellNav() {
document.querySelectorAll(".top-nav a[href^='/']").forEach((a) => {
a.addEventListener("click", (ev) => {
const href = a.getAttribute("href");
if (!href || ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.altKey) return;
ev.preventDefault();
const path = href.split("?")[0];
if (path === window.location.pathname) {
setActiveNav();
return;
}
history.pushState({}, "", href);
setActiveNav();
});
});
bindHubSpaNavLinks(".top-nav a[href^='/']");
bindHubSpaNavLinks(".hub-mobile-tabbar a.hub-m-tab[href^='/']");
bindHubSpaNavLinks(".hub-mobile-more-nav a[href^='/']");
window.addEventListener("popstate", setActiveNav);
}
+30 -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=20260711-hub-opt-cards" />
<link rel="stylesheet" href="/assets/app.css?v=20260715-hub-phone-shell" />
<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>
@@ -1206,6 +1206,34 @@
</div>
</div>
<!-- 手机端主导航(≤720px);桌面/平板不显示 -->
<nav id="hub-mobile-tabbar" class="hub-mobile-tabbar" aria-label="手机主导航">
<a href="/monitor" class="hub-m-tab" data-hub-tab="monitor" id="m-tab-monitor">监控</a>
<a href="/market" class="hub-m-tab" data-hub-tab="market" id="m-tab-market">行情</a>
<a href="/calculator" class="hub-m-tab" data-hub-tab="calculator" id="m-tab-calculator">计算</a>
<a href="/ai" class="hub-m-tab" data-hub-tab="ai" id="m-tab-ai">AI</a>
<button type="button" class="hub-m-tab" data-hub-tab="more" id="m-tab-more" aria-haspopup="dialog" aria-expanded="false">更多</button>
</nav>
<div id="hub-mobile-more" class="hub-mobile-more" aria-hidden="true">
<div class="hub-mobile-more-backdrop" id="hub-mobile-more-backdrop"></div>
<div class="hub-mobile-more-sheet" role="dialog" aria-modal="true" aria-labelledby="hub-mobile-more-title">
<div class="hub-mobile-more-handle" aria-hidden="true"></div>
<h2 id="hub-mobile-more-title" class="hub-mobile-more-title">更多</h2>
<p class="hub-mobile-more-hint">次要功能 · 完整界面请用电脑/平板</p>
<nav class="hub-mobile-more-nav" aria-label="更多页面">
<a href="/funds" id="m-nav-funds">资金概况</a>
<a href="/plan" id="m-nav-plan">开仓计划</a>
<a href="/archive" id="m-nav-archive">内照明心</a>
<a href="/dashboard" id="m-nav-dashboard">数据看板</a>
<a href="/strategy" id="m-nav-strategy">策略说明</a>
<a href="/help" id="m-nav-help">使用说明</a>
<a href="/logs" id="m-nav-logs">系统日志</a>
<a href="/settings" id="m-nav-settings">系统设置</a>
</nav>
<button type="button" class="ghost hub-mobile-more-close" id="hub-mobile-more-close">关闭</button>
</div>
</div>
<div id="tpsl-modal" class="modal hidden" aria-hidden="true">
<div class="modal-backdrop" id="tpsl-modal-backdrop"></div>
<div class="modal-panel" role="dialog" aria-labelledby="tpsl-modal-title">
@@ -1267,6 +1295,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=20260711-hub-opt-cards"></script>
<script src="/assets/app.js?v=20260715-hub-phone-shell"></script>
</body>
</html>