feat(HEL-72): 手机端底部五入口导航栏改版
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
施工员
+137
-62
@@ -74,68 +74,8 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.m-entry-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.m-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
color: var(--text-primary);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--elevation-card);
|
||||
}
|
||||
|
||||
.m-entry:active {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.m-entry-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
color: var(--action);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.m-entry-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.m-entry-body strong {
|
||||
font-size: var(--font-size-card-title);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.m-entry-body small {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.m-entry-chevron {
|
||||
display: inline-flex;
|
||||
color: var(--text-tertiary);
|
||||
flex: 0 0 auto;
|
||||
#m-app[data-tabbar="true"] .m-view {
|
||||
padding-bottom: calc(var(--mobile-tabbar-height) + var(--mobile-safe-bottom) + var(--mobile-page-padding));
|
||||
}
|
||||
|
||||
.m-placeholder {
|
||||
@@ -337,3 +277,138 @@ body {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.m-tabbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: var(--m-keyboard-inset);
|
||||
z-index: 60;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: calc(var(--mobile-tabbar-height) + var(--mobile-safe-bottom));
|
||||
padding-bottom: var(--mobile-safe-bottom);
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.m-tabbar-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: var(--mobile-tabbar-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.m-tabbar-item:active {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.m-tabbar-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.m-tabbar-label {
|
||||
font-size: var(--mobile-tabbar-label-size);
|
||||
line-height: 1.2;
|
||||
color: inherit;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.m-tabbar-item.active {
|
||||
color: var(--action);
|
||||
}
|
||||
|
||||
.m-theme-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.m-theme-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--elevation-card);
|
||||
}
|
||||
|
||||
.m-theme-row-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
background: var(--action-soft);
|
||||
color: var(--action);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.m-theme-row-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.m-theme-row-body strong {
|
||||
font-size: var(--font-size-card-title);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.m-theme-row-body small {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.m-theme-switch {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
width: 48px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--border-strong);
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.m-theme-switch[aria-checked="true"] {
|
||||
background: var(--action);
|
||||
}
|
||||
|
||||
.m-theme-switch-thumb {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-inverse);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.m-theme-switch[aria-checked="true"] .m-theme-switch-thumb {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
@@ -40,6 +40,9 @@
|
||||
--mobile-icon-cell: 78px;
|
||||
--mobile-sheet-radius: 12px;
|
||||
--mobile-min-width: 320px;
|
||||
--mobile-tabbar-height: 56px;
|
||||
--mobile-tabbar-label-size: 11px;
|
||||
--m-keyboard-inset: 0px;
|
||||
|
||||
--font-size-aux: 11.5px;
|
||||
--font-size-caption: 12.5px;
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
<div id="m-actions" class="m-actions"></div>
|
||||
</header>
|
||||
<main id="m-view" class="m-view"></main>
|
||||
<nav id="m-tabbar" class="m-tabbar" aria-label="主导航" hidden></nav>
|
||||
</div>
|
||||
<script src="config/nav.config.js"></script>
|
||||
<script src="js/api.js"></script>
|
||||
|
||||
@@ -32,8 +32,29 @@
|
||||
|
||||
global.MobileTheme = { readTheme: readTheme, applyTheme: applyTheme, toggle: toggle };
|
||||
|
||||
function syncKeyboardInset() {
|
||||
const app = document.getElementById("m-app");
|
||||
const visual = global.visualViewport;
|
||||
if (!visual) {
|
||||
app.style.setProperty("--m-keyboard-inset", "0px");
|
||||
return;
|
||||
}
|
||||
const inset = Math.max(0, global.innerHeight - visual.height - visual.offsetTop);
|
||||
app.style.setProperty("--m-keyboard-inset", inset + "px");
|
||||
}
|
||||
|
||||
function bindViewport() {
|
||||
const visual = global.visualViewport;
|
||||
if (visual) {
|
||||
visual.addEventListener("resize", syncKeyboardInset);
|
||||
visual.addEventListener("scroll", syncKeyboardInset);
|
||||
}
|
||||
syncKeyboardInset();
|
||||
}
|
||||
|
||||
async function boot() {
|
||||
applyTheme(readTheme());
|
||||
bindViewport();
|
||||
let session = { authenticated: false };
|
||||
try {
|
||||
session = await global.MobileSession.me();
|
||||
@@ -44,7 +65,7 @@
|
||||
if (!session.authenticated) {
|
||||
if (!/^#\/?auth/.test(hash)) global.location.replace("#/auth");
|
||||
} else if (/^#\/?auth/.test(hash)) {
|
||||
global.location.replace("#/home");
|
||||
global.location.replace("#/hub/market");
|
||||
}
|
||||
global.MobileRouter.init();
|
||||
}
|
||||
|
||||
+93
-32
@@ -10,7 +10,7 @@
|
||||
"wand-2": '<path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/>',
|
||||
"notebook-pen": '<path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"/><path d="M2 6h4"/><path d="M2 10h4"/><path d="M2 14h4"/><path d="M2 18h4"/><path d="m21.38 5.63-3-3a1 1 0 0 0-1.42 0l-5.01 5.01a2 2 0 0 0-.5.85l-.84 2.87a.5.5 0 0 0 .62.62l2.87-.84a2 2 0 0 0 .85-.5z"/>',
|
||||
"message-square": '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
|
||||
"settings": '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
|
||||
"settings": '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
|
||||
"inbox": '<path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>',
|
||||
"activity": '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
|
||||
"trending-up": '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
|
||||
@@ -50,13 +50,15 @@
|
||||
});
|
||||
}
|
||||
|
||||
const DEFAULT_HASH = "#/hub/market";
|
||||
|
||||
const stack = [];
|
||||
let internalNav = 0;
|
||||
let authMode = "login";
|
||||
|
||||
function currentHash() {
|
||||
let hash = window.location.hash || "";
|
||||
if (!hash || hash === "#" || hash === "#/") return "#/home";
|
||||
if (!hash || hash === "#" || hash === "#/") return DEFAULT_HASH;
|
||||
if (hash.charAt(0) !== "#") hash = "#" + hash;
|
||||
return hash;
|
||||
}
|
||||
@@ -71,6 +73,17 @@
|
||||
return routeOf(stack.length ? stack[stack.length - 1] : currentHash());
|
||||
}
|
||||
|
||||
function entryKeyOfRoute(route) {
|
||||
if (route.name === "hub") return route.params[0];
|
||||
if (route.name === "feature") return route.params[0];
|
||||
if (route.name === "assistant") return "assistant";
|
||||
return null;
|
||||
}
|
||||
|
||||
function entryRoute(key) {
|
||||
return key === "assistant" ? "#/assistant/chat" : "#/hub/" + key;
|
||||
}
|
||||
|
||||
function setHash(hash) {
|
||||
internalNav++;
|
||||
window.location.hash = hash;
|
||||
@@ -89,10 +102,15 @@
|
||||
render();
|
||||
}
|
||||
|
||||
function resetStack(hash) {
|
||||
stack.length = 0;
|
||||
stack.push(hash);
|
||||
setHash(hash);
|
||||
render();
|
||||
}
|
||||
|
||||
function parentRoute(route) {
|
||||
if (route.name === "hub") return "#/home";
|
||||
if (route.name === "feature") return "#/hub/" + route.params[0];
|
||||
if (route.name === "assistant") return "#/home";
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -104,7 +122,19 @@
|
||||
return;
|
||||
}
|
||||
const parent = parentRoute(currentRoute());
|
||||
replace(parent || "#/home");
|
||||
if (parent) replace(parent);
|
||||
}
|
||||
|
||||
function switchEntry(key) {
|
||||
const route = currentRoute();
|
||||
const current = entryKeyOfRoute(route);
|
||||
if (current === key) {
|
||||
if (route.name === "feature") {
|
||||
resetStack(entryRoute(key));
|
||||
}
|
||||
return;
|
||||
}
|
||||
resetStack(entryRoute(key));
|
||||
}
|
||||
|
||||
function updateHeader(options) {
|
||||
@@ -113,12 +143,6 @@
|
||||
document.getElementById("m-actions").innerHTML = options.actions || "";
|
||||
}
|
||||
|
||||
function themeToggleHtml() {
|
||||
const dark = document.getElementById("m-app").dataset.theme === "dark";
|
||||
const label = dark ? "切换到日间模式" : "切换到夜间模式";
|
||||
return '<button class="m-header-btn" type="button" data-theme-toggle aria-label="' + label + '" aria-pressed="' + (dark ? "true" : "false") + '">' + icon(dark ? "sun" : "moon") + "</button>";
|
||||
}
|
||||
|
||||
function placeholderHtml(title, subtitle) {
|
||||
return '<div class="m-placeholder">' +
|
||||
'<span class="m-placeholder-icon">' + icon("inbox", 26) + "</span>" +
|
||||
@@ -138,18 +162,14 @@
|
||||
return null;
|
||||
}
|
||||
|
||||
function renderHome() {
|
||||
updateHeader({ title: "小白复盘", back: false, actions: themeToggleHtml() });
|
||||
const items = global.MobileNav.entries.map(function (entry) {
|
||||
const route = entry.key === "assistant" ? "#/assistant/chat" : "#/hub/" + entry.key;
|
||||
return '<li>' +
|
||||
'<button class="m-entry" type="button" data-route="' + route + '">' +
|
||||
'<span class="m-entry-icon">' + icon(entry.icon) + "</span>" +
|
||||
'<span class="m-entry-body"><strong>' + escapeHtml(entry.title) + "</strong><small>" + escapeHtml(entry.subtitle) + "</small></span>" +
|
||||
'<span class="m-entry-chevron">' + icon("chevron-right", 20) + "</span>" +
|
||||
"</button></li>";
|
||||
}).join("");
|
||||
document.getElementById("m-view").innerHTML = '<ul class="m-entry-list">' + items + "</ul>";
|
||||
function themeToggleSection() {
|
||||
const dark = document.getElementById("m-app").dataset.theme === "dark";
|
||||
return '<div class="m-theme-section">' +
|
||||
'<div class="m-theme-row">' +
|
||||
'<span class="m-theme-row-icon">' + icon(dark ? "moon" : "sun") + "</span>" +
|
||||
'<span class="m-theme-row-body"><strong>外观主题</strong><small>' + (dark ? "当前：夜间模式" : "当前：日间模式") + "</small></span>" +
|
||||
'<button class="m-theme-switch" type="button" data-theme-toggle role="switch" aria-checked="' + (dark ? "true" : "false") + '" aria-label="切换日间/夜间模式"><span class="m-theme-switch-thumb"></span></button>' +
|
||||
"</div></div>";
|
||||
}
|
||||
|
||||
function visibleHubItems(hub) {
|
||||
@@ -162,12 +182,14 @@
|
||||
function renderHub(key) {
|
||||
const hub = global.MobileNav.hubs[key];
|
||||
if (!hub) {
|
||||
renderHome();
|
||||
replace(DEFAULT_HASH);
|
||||
return;
|
||||
}
|
||||
const items = visibleHubItems(hub);
|
||||
updateHeader({ title: hub.title, back: true });
|
||||
updateHeader({ title: hub.title, back: false });
|
||||
const section = key === "system" ? themeToggleSection() : "";
|
||||
document.getElementById("m-view").innerHTML =
|
||||
section +
|
||||
'<ul class="m-hub-grid">' +
|
||||
items.map(function (item) {
|
||||
return '<li>' +
|
||||
@@ -186,7 +208,7 @@
|
||||
}
|
||||
|
||||
function renderAssistant() {
|
||||
updateHeader({ title: "复盘助手", back: true });
|
||||
updateHeader({ title: "复盘助手", back: false });
|
||||
document.getElementById("m-view").innerHTML = placeholderHtml("复盘助手", "聊天工作台将在后续批次实现。");
|
||||
}
|
||||
|
||||
@@ -253,7 +275,7 @@
|
||||
} else {
|
||||
await global.MobileSession.login(username, password);
|
||||
}
|
||||
replace("#/home");
|
||||
replace(DEFAULT_HASH);
|
||||
} catch (error) {
|
||||
errorElement.textContent = error.message || "账号操作失败";
|
||||
errorElement.hidden = false;
|
||||
@@ -262,13 +284,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
function buildTabbar() {
|
||||
document.getElementById("m-tabbar").innerHTML = global.MobileNav.entries.map(function (entry) {
|
||||
return '<button class="m-tabbar-item" type="button" data-tab="' + entry.key + '">' +
|
||||
'<span class="m-tabbar-icon">' + icon(entry.icon, 24) + "</span>" +
|
||||
'<span class="m-tabbar-label">' + escapeHtml(entry.title) + "</span>" +
|
||||
"</button>";
|
||||
}).join("");
|
||||
}
|
||||
|
||||
function updateTabbar(activeKey) {
|
||||
document.querySelectorAll("#m-tabbar .m-tabbar-item").forEach(function (button) {
|
||||
const active = button.dataset.tab === activeKey;
|
||||
button.classList.toggle("active", active);
|
||||
if (active) button.setAttribute("aria-current", "page");
|
||||
else button.removeAttribute("aria-current");
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
const route = currentRoute();
|
||||
if (route.name === "home") {
|
||||
replace(DEFAULT_HASH);
|
||||
return;
|
||||
}
|
||||
const tabbar = document.getElementById("m-tabbar");
|
||||
if (route.name === "auth") {
|
||||
tabbar.hidden = true;
|
||||
document.getElementById("m-app").dataset.tabbar = "false";
|
||||
} else {
|
||||
tabbar.hidden = false;
|
||||
document.getElementById("m-app").dataset.tabbar = "true";
|
||||
updateTabbar(entryKeyOfRoute(route));
|
||||
}
|
||||
if (route.name === "hub") renderHub(route.params[0]);
|
||||
else if (route.name === "feature") renderFeature(route.params.join("/"));
|
||||
else if (route.name === "assistant") renderAssistant();
|
||||
else if (route.name === "auth") renderAuth();
|
||||
else renderHome();
|
||||
}
|
||||
|
||||
function bindGlobalEvents() {
|
||||
@@ -278,14 +330,16 @@
|
||||
navigate(entry.dataset.route);
|
||||
}
|
||||
});
|
||||
document.getElementById("m-tabbar").addEventListener("click", function (event) {
|
||||
const item = event.target.closest("[data-tab]");
|
||||
if (item) switchEntry(item.dataset.tab);
|
||||
});
|
||||
document.getElementById("m-back").addEventListener("click", back);
|
||||
document.addEventListener("click", function (event) {
|
||||
const toggle = event.target.closest("[data-theme-toggle]");
|
||||
if (!toggle) return;
|
||||
global.MobileTheme.toggle();
|
||||
if (currentRoute().name === "home") {
|
||||
document.getElementById("m-actions").innerHTML = themeToggleHtml();
|
||||
}
|
||||
render();
|
||||
});
|
||||
window.addEventListener("hashchange", function () {
|
||||
if (internalNav > 0) {
|
||||
@@ -304,8 +358,15 @@
|
||||
|
||||
function init() {
|
||||
bindGlobalEvents();
|
||||
buildTabbar();
|
||||
stack.length = 0;
|
||||
stack.push(currentHash());
|
||||
const raw = window.location.hash || "";
|
||||
if (!raw || raw === "#" || raw === "#/") {
|
||||
stack.push(DEFAULT_HASH);
|
||||
setHash(DEFAULT_HASH);
|
||||
} else {
|
||||
stack.push(currentHash());
|
||||
}
|
||||
render();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user