194 lines
7.5 KiB
JavaScript
194 lines
7.5 KiB
JavaScript
import { session, visit } from "./api.js";
|
|
import { disposeAll } from "./charts.js";
|
|
import { onRoute, parseLocation, startRouter } from "./router.js";
|
|
import { renderCandidates } from "./views/candidates.js";
|
|
import { renderFans } from "./views/fans.js";
|
|
import { renderHome } from "./views/home.js";
|
|
import { renderUps, renderVideos } from "./views/rankings.js";
|
|
import { renderSystem } from "./views/system.js";
|
|
import { renderUp } from "./views/up.js";
|
|
import { renderVideo } from "./views/video.js";
|
|
import { renderAbout } from "./views/about.js";
|
|
|
|
const NAV_ITEMS = [
|
|
{ path: "/home", label: "首页", icon: "home" },
|
|
{ path: "/videos", label: "视频", icon: "video" },
|
|
{ path: "/ups", label: "UP主", icon: "up" },
|
|
{ path: "/fans", label: "粉丝", icon: "fans" },
|
|
{ path: "/about", label: "说明", icon: "info" },
|
|
];
|
|
|
|
// 登录后的「候选 / 系统」入口放在顶栏右侧（未登录显示「登录」），
|
|
// 以减轻移动端底部主导航的拥挤。
|
|
const TOPBAR_ITEMS = [
|
|
{ path: "/candidates", label: "候选" },
|
|
{ path: "/system", label: "系统" },
|
|
];
|
|
|
|
const ROUTES = [
|
|
{ pattern: /^\/home$/, view: renderHome, title: "最新动态" },
|
|
{ pattern: /^\/videos$/, view: renderVideos, title: "视频" },
|
|
{ pattern: /^\/ups$/, view: renderUps, title: "UP主" },
|
|
{ pattern: /^\/rank$/, view: renderLegacyRank, title: "榜单" },
|
|
{ pattern: /^\/video\/(\d+)$/, view: renderVideo, title: "视频详情" },
|
|
{ pattern: /^\/up\/(\d+)$/, view: renderUp, title: "UP 详情" },
|
|
{ pattern: /^\/fans$/, view: renderFans, title: "粉丝" },
|
|
{ pattern: /^\/about$/, view: renderAbout, title: "数据说明" },
|
|
{
|
|
pattern: /^\/candidates$/, view: renderCandidates, title: "候选池",
|
|
beforeEnter: requireAuth,
|
|
},
|
|
{
|
|
pattern: /^\/system$/, view: renderSystem, title: "系统状态",
|
|
beforeEnter: requireAuth,
|
|
},
|
|
];
|
|
|
|
function renderLegacyRank(root, context) {
|
|
// 旧链接 /rank?scope=up 仍可用，但不再在页面内混排视频与 UP。
|
|
return context.query.get("scope") === "up"
|
|
? renderUps(root, context)
|
|
: renderVideos(root, context);
|
|
}
|
|
|
|
let authState = { authEnabled: false, authenticated: true };
|
|
|
|
function canAccessProtected() {
|
|
return !authState.authEnabled || authState.authenticated;
|
|
}
|
|
|
|
function requireAuth() {
|
|
if (canAccessProtected()) return true;
|
|
const { path, query } = parseLocation();
|
|
const search = query.toString();
|
|
window.location.assign(
|
|
`/login?next=${encodeURIComponent(`${path}${search ? `?${search}` : ""}`)}`,
|
|
);
|
|
return false;
|
|
}
|
|
|
|
function icon(name) {
|
|
const paths = {
|
|
home: '<path d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z"/>',
|
|
rank: '<path d="M5 20V10m7 10V4m7 16v-7"/>',
|
|
video: '<rect x="3" y="5" width="18" height="14" rx="3"/><path d="m10 9 5 3-5 3z"/>',
|
|
up: '<circle cx="12" cy="8" r="3"/><path d="M5 21a7 7 0 0 1 14 0"/><path d="m18.5 5 .6 1.2 1.4.2-1 1 .2 1.4-1.2-.6-1.2.6.2-1.4-1-1 1.4-.2z"/>',
|
|
fans: '<path d="M16 20v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1"/><circle cx="9.5" cy="7" r="3"/><path d="M17 11a3 3 0 1 0 0-6m1 15v-1a4 4 0 0 0-3-3.8"/>',
|
|
candidate: '<path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/>',
|
|
system: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
|
|
info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><circle cx="12" cy="7.5" r="1"/>',
|
|
};
|
|
return `<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ""}</svg>`;
|
|
}
|
|
|
|
function renderNav() {
|
|
const nav = document.querySelector("#nav-items");
|
|
nav.innerHTML = NAV_ITEMS.map((item) => `
|
|
<a class="nav-item" href="${item.path}" data-nav="${item.path}">
|
|
${icon(item.icon)}<span class="nav-label">${item.label}</span>
|
|
</a>`).join("");
|
|
|
|
// 未登录显示「登录」；可访问受保护页面时显示「候选 | 系统」。
|
|
const loggedIn = canAccessProtected();
|
|
document.querySelectorAll(".topbar-auth").forEach((element) => {
|
|
element.hidden = loggedIn;
|
|
});
|
|
document.querySelectorAll("[data-topbar-links]").forEach((element) => {
|
|
element.hidden = !loggedIn;
|
|
element.innerHTML = loggedIn
|
|
? TOPBAR_ITEMS.map((item) => `
|
|
<a href="${item.path}" data-topbar-nav="${item.path}">${item.label}</a>`).join("")
|
|
: "";
|
|
});
|
|
}
|
|
|
|
function activeNav(path) {
|
|
let active = "/home";
|
|
if (path.startsWith("/videos") || path.startsWith("/video/") || path.startsWith("/rank")) active = "/videos";
|
|
else if (path.startsWith("/ups") || path.startsWith("/up/")) active = "/ups";
|
|
else if (path.startsWith("/fans")) active = "/fans";
|
|
else if (path.startsWith("/candidates")) active = "/candidates";
|
|
else if (path.startsWith("/system")) active = "/system";
|
|
else if (path.startsWith("/about")) active = "/about";
|
|
document.querySelectorAll("[data-nav]").forEach((item) => {
|
|
item.classList.toggle("active", item.dataset.nav === active);
|
|
});
|
|
document.querySelectorAll("[data-topbar-nav]").forEach((item) => {
|
|
item.classList.toggle("active", item.dataset.topbarNav === active);
|
|
});
|
|
}
|
|
|
|
function setTitle(route, path) {
|
|
const title = route?.title || "看板";
|
|
document.title = `${title} · 咻咻满 Reaction`;
|
|
document.querySelectorAll(".brand-subtitle").forEach((element) => {
|
|
element.textContent = title;
|
|
});
|
|
activeNav(path);
|
|
}
|
|
|
|
function toast(message, kind = "info") {
|
|
const element = document.querySelector("#toast");
|
|
if (!element) return;
|
|
element.textContent = message;
|
|
element.className = `toast show ${kind}`;
|
|
window.clearTimeout(toast.timer);
|
|
toast.timer = window.setTimeout(() => {
|
|
element.className = "toast";
|
|
}, 2600);
|
|
}
|
|
|
|
window.addEventListener("error", (event) => {
|
|
const target = event.target;
|
|
if (target instanceof HTMLImageElement) {
|
|
target.classList.add("image-error");
|
|
const wrapper = target.closest(".video-thumb, .hero-cover, .media-thumb, .candidate-thumb");
|
|
wrapper?.classList.add("cover-placeholder");
|
|
}
|
|
}, true);
|
|
|
|
async function boot() {
|
|
const banner = document.querySelector("#preview-banner");
|
|
try {
|
|
const data = await session();
|
|
authState = {
|
|
authEnabled: Boolean(data?.auth_enabled),
|
|
authenticated: data?.authenticated !== false,
|
|
};
|
|
if (data?.preview) {
|
|
banner.hidden = false;
|
|
document.querySelectorAll(".topbar-preview").forEach((element) => {
|
|
element.hidden = false;
|
|
});
|
|
}
|
|
} catch {
|
|
toast("无法连接看板服务", "error");
|
|
}
|
|
renderNav();
|
|
let lastVisitPath = null;
|
|
onRoute(({ path, route }) => {
|
|
disposeAll();
|
|
setTitle(route, path);
|
|
// 访问统计：仅在路由路径变化时上报（排序/筛选等同路径重渲染不计 PV）。
|
|
if (path !== lastVisitPath) {
|
|
lastVisitPath = path;
|
|
visit(path);
|
|
}
|
|
});
|
|
startRouter({
|
|
root: document.querySelector("#app"),
|
|
outlet: document.querySelector("#view"),
|
|
routes: ROUTES,
|
|
});
|
|
}
|
|
|
|
window.addEventListener("unhandledrejection", (event) => {
|
|
const reason = event.reason;
|
|
if (reason?.name === "ApiError") {
|
|
toast(reason.message, "error");
|
|
}
|
|
});
|
|
|
|
boot();
|