feat(web): move candidates/system nav to topbar, free mobile bottom nav

reaction_board/web/static/app.js

@@ -15,11 +15,16 @@ const NAV_ITEMS = [
   { path: "/videos", label: "视频", icon: "video" },
   { path: "/ups", label: "UP主", icon: "up" },
   { path: "/fans", label: "粉丝", icon: "fans" },
-  { path: "/candidates", label: "候选", icon: "candidate", protected: true },
-  { path: "/system", label: "系统", icon: "system", protected: true },
   { 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: "视频" },
@@ -79,13 +84,23 @@ function icon(name) {
 
 function renderNav() {
   const nav = document.querySelector("#nav-items");
-  const items = NAV_ITEMS.filter(
-    (item) => !item.protected || canAccessProtected(),
-  );
-  nav.innerHTML = items.map((item) => `
+  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) {
@@ -99,6 +114,9 @@ function activeNav(path) {
   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) {
@@ -144,11 +162,6 @@ async function boot() {
         element.hidden = false;
       });
     }
-    if (authState.authEnabled && !authState.authenticated) {
-      document.querySelectorAll(".topbar-auth").forEach((element) => {
-        element.hidden = false;
-      });
-    }
   } catch {
     toast("无法连接看板服务", "error");
   }