feat(filelib-web): 把 /database 各页从后端 HTML 拼接迁到 SvelteKit 路由

登录页、后台外壳与六个 tab 全部成为客户端路由:
  /database/admin              登录(迁自 renderLoginPage)
  /database/dashboard          概览(迁自 renderDashboard)
  .../library .../users .../groups .../search .../settings

六个 tab 是真 URL,不再是 location.hash + display:none —— 刷新不丢
位置,链接可分享。

BrowserShell 拆成 LibraryView,加 showUserFooter:老师端 /app 显示
身份/登出页脚,后台的文件库 tab 不显示(外层已有身份区)。

bootstrap 走 /database/config 而非 /database/api/login-info:后者由
teacherApp 在 silo org 查找成功后才注册,前者无条件注册,登录页在
org 未就绪时也必须能拿到配置。

后端拥有的链接(OAuth、DEV 一键登录)标 data-sveltekit-reload,
否则被客户端路由拦下。

hub/filelib-web/src/lib/LibraryView.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
+  /**
+   * 文件库浏览器(树 + 详情 + 文件编辑栏)。
+   *
+   * 两处复用:老师端 /app(showUserFooter=true,侧栏底部带身份与退出)
+   * 与管理后台 /database/dashboard/library(false —— 外层壳已有身份区)。
+   */
   import { onMount } from "svelte";
   import { api } from "./api.js";
   import { me, toastErr, toastOk } from "./stores.js";
+  import { logout } from "./session.js";
   import { treeVersion, bumpTree, currentNode, selectedFilePath, clearSelectedFile, bumpFiles } from "./browser.js";
   import type { NodeChild } from "./types.js";
   import TreeNode from "./TreeNode.svelte";
   import NodeDetailPanel from "./NodeDetailPanel.svelte";
   import FileEditor from "./FileEditor.svelte";
-  import GroupAdmin from "./GroupAdmin.svelte";
   import Modal from "./Modal.svelte";
 
-  // 视图切换(仅管理员可见 Group 管理入口;非管理员恒为 library)。
-  let view = $state<"library" | "groups">("library");
+  let { showUserFooter = false }: { showUserFooter?: boolean } = $props();
 
   let roots = $state<NodeChild[] | null>(null);
   let treeError = $state<string | null>(null);
@@ -58,45 +63,16 @@
     }
   }
 
-  async function logout(): Promise<void> {
-    try { await fetch("/auth/logout", { method: "POST", credentials: "same-origin" }); } catch { /* ignore */ }
-    me.set(null);
-  }
-
   const initial = $derived(($me?.userId ?? "U").slice(0, 1).toUpperCase());
 </script>
 
-<div class="flex h-full flex-col">
-  {#if $me?.isWebsiteAdmin}
-    <!-- 视图切换(仅管理员) -->
-    <div class="flex shrink-0 items-center gap-1 border-b border-line-soft bg-sidebar px-3 py-1.5">
-      <button
-        class="rounded-lg px-3 py-1 text-[12.5px] font-medium transition"
-        class:bg-selected={view === "library"}
-        class:text-ink={view === "library"}
-        class:text-ink-3={view !== "library"}
-        onclick={() => (view = "library")}
-      >文件库</button>
-      <button
-        class="rounded-lg px-3 py-1 text-[12.5px] font-medium transition"
-        class:bg-selected={view === "groups"}
-        class:text-ink={view === "groups"}
-        class:text-ink-3={view !== "groups"}
-        onclick={() => (view = "groups")}
-      >Group 管理</button>
-    </div>
-  {/if}
-
-  <div class="flex min-h-0 flex-1">
-  {#if $me?.isWebsiteAdmin && view === "groups"}
-    <GroupAdmin />
-  {:else}
+<div class="flex min-h-0 flex-1">
   <!-- 侧栏 -->
   <aside class="flex w-[300px] shrink-0 flex-col border-r border-line-soft bg-sidebar">
     <div class="flex items-center justify-between border-b border-line-soft px-4 py-3.5">
       <span class="text-[15px] font-semibold text-ink">文件库</span>
       {#if $me?.isWebsiteAdmin}
-        <button class="rounded-lg border border-line bg-panel px-2.5 py-1 text-[11.5px] font-medium text-ink transition hover:bg-hover" onclick={() => (showCreateRoot = true)}>
+        <button class="btn btn-sm" onclick={() => (showCreateRoot = true)}>
           + 根目录
         </button>
       {/if}
@@ -118,11 +94,13 @@
       {/if}
     </div>
 
-    <div class="flex items-center gap-2 border-t border-line-soft px-4 py-3 text-[12.5px]">
-      <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-white">{initial}</div>
-      <span class="flex-1 truncate text-ink">{$me?.userId ?? ""}</span>
-      <button class="rounded-lg border border-line-soft px-2.5 py-1 text-[11.5px] text-ink-3 transition hover:bg-hover hover:text-ink" onclick={logout} title="退出登录">退出</button>
-    </div>
+    {#if showUserFooter}
+      <div class="flex items-center gap-2 border-t border-line-soft px-4 py-3 text-[12.5px]">
+        <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-white">{initial}</div>
+        <span class="flex-1 truncate text-ink">{$me?.userId ?? ""}</span>
+        <button class="rounded-lg border border-line-soft px-2.5 py-1 text-[11.5px] text-ink-3 transition hover:bg-hover hover:text-ink" onclick={logout} title="退出登录">退出</button>
+      </div>
+    {/if}
   </aside>
 
   <!-- 主区 -->
@@ -142,30 +120,28 @@
       />
     </section>
   {/if}
-  {/if}
-  </div>
 </div>
 
 {#if showCreateRoot}
   <Modal title="新建根目录" onclose={() => (showCreateRoot = false)}>
-    <div class="mb-3">
-      <label class="mb-1 block text-[11.5px] text-ink-3" for="root-name">名称</label>
-      <input id="root-name" class="w-full rounded-lg border border-line bg-panel px-3 py-2 text-[13px] outline-none focus:border-accent" bind:value={newName} placeholder="例如:物理教研" />
+    <div class="form-row">
+      <label class="form-label" for="root-name">名称</label>
+      <input id="root-name" class="input" bind:value={newName} placeholder="例如:物理教研" />
     </div>
-    <div class="mb-3">
-      <label class="mb-1 block text-[11.5px] text-ink-3" for="root-kind">类型</label>
-      <select id="root-kind" class="w-full rounded-lg border border-line bg-panel px-3 py-2 text-[13px] outline-none focus:border-accent" bind:value={newKind}>
+    <div class="form-row">
+      <label class="form-label" for="root-kind">类型</label>
+      <select id="root-kind" class="select" bind:value={newKind}>
         <option value="FOLDER">文件夹</option>
         <option value="PROJECT">项目(课程资源库)</option>
       </select>
     </div>
-    <div class="mb-3">
-      <label class="mb-1 block text-[11.5px] text-ink-3" for="root-desc">简介(可选)</label>
-      <textarea id="root-desc" rows="3" class="w-full rounded-lg border border-line bg-panel px-3 py-2 font-mono text-xs outline-none focus:border-accent" bind:value={newDesc} placeholder="简要说明用途…"></textarea>
+    <div class="form-row">
+      <label class="form-label" for="root-desc">简介(可选)</label>
+      <textarea id="root-desc" rows="3" class="textarea" bind:value={newDesc} placeholder="简要说明用途…"></textarea>
     </div>
     <div class="mt-4 flex justify-end gap-2">
-      <button class="rounded-lg border border-line bg-panel px-3.5 py-1.5 text-[12.5px] font-medium text-ink transition hover:bg-hover" onclick={() => (showCreateRoot = false)}>取消</button>
-      <button class="rounded-lg bg-accent px-3.5 py-1.5 text-[12.5px] font-medium text-white transition hover:bg-accent-hover" onclick={createRoot}>创建</button>
+      <button class="btn" onclick={() => (showCreateRoot = false)}>取消</button>
+      <button class="btn btn-primary" onclick={createRoot}>创建</button>
     </div>
   </Modal>
 {/if}

hub/filelib-web/src/lib/LoginView.svelte

@@ -1,18 +1,13 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { api } from "./api.js";
+  import { loadConfig, type AppConfig } from "./config.js";
 
-  interface LoginInfo {
-    orgSlug: string;
-    devLoginEnabled: boolean;
-  }
-
-  let info = $state<LoginInfo | null>(null);
+  let info = $state<AppConfig | null>(null);
   let loadFailed = $state(false);
 
   onMount(async () => {
     try {
-      info = await api<LoginInfo>("/database/api/login-info");
+      info = await loadConfig();
     } catch {
       loadFailed = true;
     }
@@ -27,6 +22,7 @@
     {#if info}
       <a
         href="/auth/feishu/{encodeURIComponent(info.orgSlug)}"
+        data-sveltekit-reload
         class="flex w-full items-center justify-center rounded-lg bg-accent px-4 py-3 text-sm font-medium text-white transition hover:bg-accent-hover"
       >使用飞书登录</a>
 
@@ -35,7 +31,7 @@
           <span class="flex-1 border-t border-line-soft"></span>开发模式
           <span class="flex-1 border-t border-line-soft"></span>
         </div>
-        <a href="/app/dev-login-teacher" class="flex w-full items-center justify-center rounded-lg border border-line bg-panel px-4 py-2 text-[12.5px] font-medium text-ink transition hover:bg-hover">⚡ 一键登录(老师)</a>
+        <a href="/app/dev-login-teacher" data-sveltekit-reload class="flex w-full items-center justify-center rounded-lg border border-line bg-panel px-4 py-2 text-[12.5px] font-medium text-ink transition hover:bg-hover">⚡ 一键登录(老师)</a>
         <p class="mt-2.5 text-center text-[11px] text-ink-3">仅开发环境可见 · 跳过飞书 OAuth</p>
       {/if}
     {:else if loadFailed}

hub/filelib-web/src/lib/config.ts

@@ -0,0 +1,23 @@
+/**
+ * 前端 bootstrap:silo org slug(拼飞书 OAuth 链接用)+ dev 一键登录开关。
+ *
+ * 打 `/database/config` 而非 `/database/api/login-info`:后者由 teacherApp.ts 在
+ * silo org 查找成功之后才注册,org 缺失时整条链路不存在;前者在
+ * databaseRoutes.ts 顶部无条件注册。两者形状相同(见 src/database/README.md)。
+ *
+ * 免鉴权 —— org slug 本就出现在 OAuth URL 里,不构成敏感信息。
+ */
+import { api } from "./api.js";
+
+export interface AppConfig {
+  readonly orgSlug: string;
+  readonly devLoginEnabled: boolean;
+}
+
+let cached: AppConfig | null = null;
+
+export async function loadConfig(): Promise<AppConfig> {
+  if (cached !== null) return cached;
+  cached = await api<AppConfig>("/database/config");
+  return cached;
+}

hub/filelib-web/src/lib/session.ts

@@ -0,0 +1,34 @@
+/**
+ * 会话装载:GET /database/api/me 一次,结果进 `me` store。
+ * 老师端与管理后台共用 —— 两处的区别只是拿到 me 之后怎么用
+ * (老师端未登录显示登录视图;管理后台未登录跳 /database/admin,
+ * 非 isWebsiteAdmin 显示无权提示)。
+ */
+import { get } from "svelte/store";
+import { api, UnauthenticatedError } from "./api.js";
+import { me, authChecked } from "./stores.js";
+import type { MeResponse } from "./types.js";
+
+/** 幂等:已检查过就不再打请求(路由间切换不重复拉取)。 */
+export async function loadSession(force = false): Promise<void> {
+  if (get(authChecked) && !force) return;
+
+  try {
+    me.set(await api<MeResponse>("/database/api/me"));
+  } catch (e) {
+    if (!(e instanceof UnauthenticatedError)) console.error(e);
+    me.set(null);
+  } finally {
+    authChecked.set(true);
+  }
+}
+
+/** 退出登录:清后端 cookie 再清前端 store。 */
+export async function logout(): Promise<void> {
+  try {
+    await fetch("/auth/logout", { method: "POST", credentials: "same-origin" });
+  } catch {
+    /* 网络失败也照样清前端状态 */
+  }
+  me.set(null);
+}