382 lines
18 KiB
JavaScript
382 lines
18 KiB
JavaScript
(function (global) {
|
|
"use strict";
|
|
|
|
const ICONS = {
|
|
"chevron-left": '<path d="m15 18-6-6 6-6"/>',
|
|
"chevron-right": '<path d="m9 18 6-6-6-6"/>',
|
|
"sun": '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
|
|
"moon": '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
|
|
"bar-chart-3": '<path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
|
|
"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"/>',
|
|
"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"/>',
|
|
"trending-down": '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
|
|
"zap": '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
|
|
"history": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
|
|
"chart-line": '<path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/>',
|
|
"layers": '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
|
|
"refresh-cw": '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
|
|
"gavel": '<path d="m14 13-7.5 7.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L11 10"/><path d="m16 16 6-6"/><path d="m8 8 6-6"/><path d="m9 7 8 8"/><path d="m21 11-8-8"/>',
|
|
"book-open": '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
|
|
"flame": '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
|
|
"crown": '<path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.735H5.81a1 1 0 0 1-.957-.735L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"/><path d="M5 21h14"/>',
|
|
"filter": '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
|
|
"target": '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
|
|
"bot": '<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>',
|
|
"star": '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
|
|
"scroll-text": '<path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>',
|
|
"calendar-check": '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="m9 16 2 2 4-4"/>',
|
|
"sticky-note": '<path d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z"/><path d="M15 3v4a2 2 0 0 0 2 2h4"/>',
|
|
"bell": '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
|
|
"user": '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
|
"lock": '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
|
|
"gem": '<path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/>',
|
|
"sliders-horizontal": '<line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/>',
|
|
"users": '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>'
|
|
};
|
|
|
|
function icon(name, size) {
|
|
const body = ICONS[name] || "";
|
|
return '<svg width="' + (size || 22) + '" height="' + (size || 22) + '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + body + "</svg>";
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value == null ? "" : value).replace(/[&<>"']/g, function (ch) {
|
|
return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[ch];
|
|
});
|
|
}
|
|
|
|
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 DEFAULT_HASH;
|
|
if (hash.charAt(0) !== "#") hash = "#" + hash;
|
|
return hash;
|
|
}
|
|
|
|
function routeOf(hash) {
|
|
const path = hash.replace(/^#\/?/, "");
|
|
const parts = path.split("/").filter(Boolean);
|
|
return { name: parts[0] || "home", params: parts.slice(1) };
|
|
}
|
|
|
|
function currentRoute() {
|
|
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;
|
|
}
|
|
|
|
function navigate(hash) {
|
|
stack.push(hash);
|
|
setHash(hash);
|
|
render();
|
|
}
|
|
|
|
function replace(hash) {
|
|
if (stack.length) stack[stack.length - 1] = hash;
|
|
else stack.push(hash);
|
|
setHash(hash);
|
|
render();
|
|
}
|
|
|
|
function resetStack(hash) {
|
|
stack.length = 0;
|
|
stack.push(hash);
|
|
setHash(hash);
|
|
render();
|
|
}
|
|
|
|
function parentRoute(route) {
|
|
if (route.name === "feature") return "#/hub/" + route.params[0];
|
|
return null;
|
|
}
|
|
|
|
function back() {
|
|
if (stack.length > 1) {
|
|
stack.pop();
|
|
setHash(stack[stack.length - 1]);
|
|
render();
|
|
return;
|
|
}
|
|
const parent = parentRoute(currentRoute());
|
|
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) {
|
|
document.getElementById("m-title").textContent = options.title || "小白复盘";
|
|
document.getElementById("m-back").hidden = !options.back;
|
|
document.getElementById("m-actions").innerHTML = options.actions || "";
|
|
}
|
|
|
|
function placeholderHtml(title, subtitle) {
|
|
return '<div class="m-placeholder">' +
|
|
'<span class="m-placeholder-icon">' + icon("inbox", 26) + "</span>" +
|
|
"<h2>" + escapeHtml(title) + "</h2>" +
|
|
"<p>" + escapeHtml(subtitle || "该页面将在后续批次实现，返回即可继续浏览。") + "</p>" +
|
|
"</div>";
|
|
}
|
|
|
|
function findFeatureLabel(key) {
|
|
const hubs = global.MobileNav.hubs;
|
|
for (const hubKey in hubs) {
|
|
const items = hubs[hubKey].items || [];
|
|
for (const item of items) {
|
|
if (item.key === key) return item.label;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
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) {
|
|
const items = hub && hub.items ? hub.items : [];
|
|
return items.filter(function (item) {
|
|
return !item.adminOnly || global.MobileSession.isAdmin();
|
|
});
|
|
}
|
|
|
|
function renderHub(key) {
|
|
const hub = global.MobileNav.hubs[key];
|
|
if (!hub) {
|
|
replace(DEFAULT_HASH);
|
|
return;
|
|
}
|
|
const items = visibleHubItems(hub);
|
|
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>' +
|
|
'<button class="m-grid-item" type="button" data-route="#/feature/' + item.key + '">' +
|
|
'<span class="m-grid-icon">' + icon(item.icon) + "</span>" +
|
|
'<span class="m-grid-label">' + escapeHtml(item.label) + "</span>" +
|
|
"</button></li>";
|
|
}).join("") +
|
|
"</ul>";
|
|
}
|
|
|
|
function renderFeature(key) {
|
|
const title = findFeatureLabel(key) || key;
|
|
updateHeader({ title: title, back: true });
|
|
document.getElementById("m-view").innerHTML = placeholderHtml(title, "该功能页将在后续批次实现。");
|
|
}
|
|
|
|
function renderAssistant() {
|
|
updateHeader({ title: "复盘助手", back: false });
|
|
document.getElementById("m-view").innerHTML = placeholderHtml("复盘助手", "聊天工作台将在后续批次实现。");
|
|
}
|
|
|
|
function renderAuth() {
|
|
updateHeader({ title: "小白复盘", back: false, actions: "" });
|
|
document.getElementById("m-view").innerHTML = [
|
|
'<div class="m-auth">',
|
|
'<div class="m-auth-brand">',
|
|
'<span class="m-brand-mark">复</span>',
|
|
'<h2>小白复盘</h2>',
|
|
'<p>登录后进入你的复盘空间</p>',
|
|
"</div>",
|
|
'<div class="m-auth-tabs">',
|
|
'<button class="m-auth-tab active" type="button" data-auth-mode="login">登录</button>',
|
|
'<button class="m-auth-tab" type="button" data-auth-mode="register">注册</button>',
|
|
"</div>",
|
|
'<form id="m-auth-form">',
|
|
'<label class="m-form-field"><span>账号名</span><input id="m-auth-username" type="text" minlength="3" maxlength="30" autocomplete="username" required></label>',
|
|
'<label class="m-form-field"><span>密码</span><input id="m-auth-password" type="password" minlength="8" maxlength="128" autocomplete="current-password" required></label>',
|
|
'<label class="m-form-field" id="m-auth-confirm-field" hidden><span>确认密码</span><input id="m-auth-confirm" type="password" minlength="8" maxlength="128" autocomplete="new-password"></label>',
|
|
'<p class="m-auth-error" id="m-auth-error" hidden></p>',
|
|
'<button class="m-btn-primary" id="m-auth-submit" type="submit">登录</button>',
|
|
"</form>",
|
|
"</div>"
|
|
].join("");
|
|
authMode = "login";
|
|
bindAuth();
|
|
}
|
|
|
|
function setAuthMode(mode) {
|
|
authMode = mode === "register" ? "register" : "login";
|
|
document.querySelectorAll("[data-auth-mode]").forEach(function (button) {
|
|
button.classList.toggle("active", button.dataset.authMode === authMode);
|
|
});
|
|
document.getElementById("m-auth-confirm-field").hidden = authMode !== "register";
|
|
document.getElementById("m-auth-confirm").required = authMode === "register";
|
|
document.getElementById("m-auth-password").autocomplete = authMode === "register" ? "new-password" : "current-password";
|
|
document.getElementById("m-auth-submit").textContent = authMode === "register" ? "注册并进入" : "登录";
|
|
document.getElementById("m-auth-error").hidden = true;
|
|
}
|
|
|
|
function bindAuth() {
|
|
document.querySelectorAll("[data-auth-mode]").forEach(function (button) {
|
|
button.addEventListener("click", function () { setAuthMode(button.dataset.authMode); });
|
|
});
|
|
document.getElementById("m-auth-form").addEventListener("submit", submitAuth);
|
|
}
|
|
|
|
async function submitAuth(event) {
|
|
event.preventDefault();
|
|
const username = document.getElementById("m-auth-username").value.trim();
|
|
const password = document.getElementById("m-auth-password").value;
|
|
const errorElement = document.getElementById("m-auth-error");
|
|
if (authMode === "register" && password !== document.getElementById("m-auth-confirm").value) {
|
|
errorElement.textContent = "两次输入的密码不一致。";
|
|
errorElement.hidden = false;
|
|
return;
|
|
}
|
|
const submit = document.getElementById("m-auth-submit");
|
|
submit.disabled = true;
|
|
try {
|
|
if (authMode === "register") {
|
|
await global.MobileSession.register(username, password);
|
|
} else {
|
|
await global.MobileSession.login(username, password);
|
|
}
|
|
replace(DEFAULT_HASH);
|
|
} catch (error) {
|
|
errorElement.textContent = error.message || "账号操作失败";
|
|
errorElement.hidden = false;
|
|
} finally {
|
|
submit.disabled = false;
|
|
}
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
function bindGlobalEvents() {
|
|
document.getElementById("m-view").addEventListener("click", function (event) {
|
|
const entry = event.target.closest("[data-route]");
|
|
if (entry) {
|
|
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();
|
|
render();
|
|
});
|
|
window.addEventListener("hashchange", function () {
|
|
if (internalNav > 0) {
|
|
internalNav--;
|
|
return;
|
|
}
|
|
const hash = currentHash();
|
|
if (stack.length > 1 && hash === stack[stack.length - 2]) {
|
|
stack.pop();
|
|
} else if (hash !== stack[stack.length - 1]) {
|
|
stack.push(hash);
|
|
}
|
|
render();
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
bindGlobalEvents();
|
|
buildTabbar();
|
|
stack.length = 0;
|
|
const raw = window.location.hash || "";
|
|
if (!raw || raw === "#" || raw === "#/") {
|
|
stack.push(DEFAULT_HASH);
|
|
setHash(DEFAULT_HASH);
|
|
} else {
|
|
stack.push(currentHash());
|
|
}
|
|
render();
|
|
}
|
|
|
|
global.MobileRouter = {
|
|
init: init,
|
|
navigate: navigate,
|
|
replace: replace,
|
|
back: back,
|
|
render: render,
|
|
currentRoute: currentRoute
|
|
};
|
|
})(window);
|