From 3d0f4e5c2d344c76622cb144f7855538b9632dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD?= <3401797899@qq.com>
Date: Sun, 26 Jul 2026 20:17:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(filelib-web):=20=E6=8A=8A=20/database=20?=
 =?UTF-8?q?=E5=90=84=E9=A1=B5=E4=BB=8E=E5=90=8E=E7=AB=AF=20HTML=20?=
 =?UTF-8?q?=E6=8B=BC=E6=8E=A5=E8=BF=81=E5=88=B0=20SvelteKit=20=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

登录页、后台外壳与六个 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,
否则被客户端路由拦下。
---
 ...BrowserShell.svelte => LibraryView.svelte} |  80 +++------
 hub/filelib-web/src/lib/LoginView.svelte      |  14 +-
 hub/filelib-web/src/lib/config.ts             |  23 +++
 hub/filelib-web/src/lib/session.ts            |  34 ++++
 hub/filelib-web/src/routes/+layout.svelte     |  12 ++
 hub/filelib-web/src/routes/+layout.ts         |   7 +
 hub/filelib-web/src/routes/+page.svelte       |  11 ++
 hub/filelib-web/src/routes/app/+page.svelte   |  22 +++
 .../src/routes/database/+page.svelte          |  11 ++
 .../src/routes/database/admin/+page.svelte    |  63 +++++++
 .../routes/database/dashboard/+layout.svelte  |  99 +++++++++++
 .../routes/database/dashboard/+page.svelte    |  67 +++++++
 .../database/dashboard/groups/+page.svelte    |  10 ++
 .../database/dashboard/library/+page.svelte   |   8 +
 .../database/dashboard/search/+page.svelte    |   4 +
 .../database/dashboard/settings/+page.svelte  |   4 +
 .../database/dashboard/users/+page.svelte     | 168 ++++++++++++++++++
 17 files changed, 576 insertions(+), 61 deletions(-)
 rename hub/filelib-web/src/lib/{BrowserShell.svelte => LibraryView.svelte} (53%)
 create mode 100644 hub/filelib-web/src/lib/config.ts
 create mode 100644 hub/filelib-web/src/lib/session.ts
 create mode 100644 hub/filelib-web/src/routes/+layout.svelte
 create mode 100644 hub/filelib-web/src/routes/+layout.ts
 create mode 100644 hub/filelib-web/src/routes/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/app/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/database/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/database/admin/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/database/dashboard/+layout.svelte
 create mode 100644 hub/filelib-web/src/routes/database/dashboard/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/database/dashboard/groups/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/database/dashboard/library/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/database/dashboard/search/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/database/dashboard/settings/+page.svelte
 create mode 100644 hub/filelib-web/src/routes/database/dashboard/users/+page.svelte

diff --git a/hub/filelib-web/src/lib/BrowserShell.svelte b/hub/filelib-web/src/lib/LibraryView.svelte
similarity index 53%
rename from hub/filelib-web/src/lib/BrowserShell.svelte
rename to hub/filelib-web/src/lib/LibraryView.svelte
index e992058..5a65257 100644
--- a/hub/filelib-web/src/lib/BrowserShell.svelte
+++ b/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}
diff --git a/hub/filelib-web/src/lib/LoginView.svelte b/hub/filelib-web/src/lib/LoginView.svelte
index a5cf7f2..8b950f2 100644
--- a/hub/filelib-web/src/lib/LoginView.svelte
+++ b/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}
diff --git a/hub/filelib-web/src/lib/config.ts b/hub/filelib-web/src/lib/config.ts
new file mode 100644
index 0000000..95f8a6d
--- /dev/null
+++ b/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;
+}
diff --git a/hub/filelib-web/src/lib/session.ts b/hub/filelib-web/src/lib/session.ts
new file mode 100644
index 0000000..35910da
--- /dev/null
+++ b/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);
+}
diff --git a/hub/filelib-web/src/routes/+layout.svelte b/hub/filelib-web/src/routes/+layout.svelte
new file mode 100644
index 0000000..f03dd7a
--- /dev/null
+++ b/hub/filelib-web/src/routes/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import "../app.css";
+  import Toasts from "$lib/Toasts.svelte";
+
+  let { children } = $props();
+</script>
+
+<div class="h-full">
+  {@render children()}
+</div>
+
+<Toasts />
diff --git a/hub/filelib-web/src/routes/+layout.ts b/hub/filelib-web/src/routes/+layout.ts
new file mode 100644
index 0000000..adc15e4
--- /dev/null
+++ b/hub/filelib-web/src/routes/+layout.ts
@@ -0,0 +1,7 @@
+/**
+ * 纯 SPA:关掉 SSR 与预渲染,构建产物只有一个 fallback index.html
+ * (adapter-static + fallback,见 svelte.config.js),由 hub 后端在
+ * /app 与 /database/* 两个前缀下原样送出。
+ */
+export const ssr = false;
+export const prerender = false;
diff --git a/hub/filelib-web/src/routes/+page.svelte b/hub/filelib-web/src/routes/+page.svelte
new file mode 100644
index 0000000..389dc3a
--- /dev/null
+++ b/hub/filelib-web/src/routes/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+
+  // 根路径不承载界面:老师端在 /app,管理后台在 /database。
+  onMount(() => {
+    void goto("/app", { replaceState: true });
+  });
+</script>
+
+<div class="flex h-full items-center justify-center text-[13px] text-ink-3">跳转中…</div>
diff --git a/hub/filelib-web/src/routes/app/+page.svelte b/hub/filelib-web/src/routes/app/+page.svelte
new file mode 100644
index 0000000..26fd7c1
--- /dev/null
+++ b/hub/filelib-web/src/routes/app/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  /** 老师端。未登录显示登录卡片;登录后直接是文件库浏览器。 */
+  import { onMount } from "svelte";
+  import { me, authChecked } from "$lib/stores.js";
+  import { loadSession } from "$lib/session.js";
+  import LoginView from "$lib/LoginView.svelte";
+  import LibraryView from "$lib/LibraryView.svelte";
+
+  onMount(loadSession);
+</script>
+
+<svelte:head><title>文件库</title></svelte:head>
+
+{#if !$authChecked}
+  <div class="flex h-full items-center justify-center text-ink-3">加载中…</div>
+{:else if $me}
+  <div class="flex h-full flex-col">
+    <LibraryView showUserFooter />
+  </div>
+{:else}
+  <LoginView />
+{/if}
diff --git a/hub/filelib-web/src/routes/database/+page.svelte b/hub/filelib-web/src/routes/database/+page.svelte
new file mode 100644
index 0000000..eaa5117
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+
+  // /database 本身不承载界面(与旧后端 /database/admin → dashboard 的跳转一致)。
+  onMount(() => {
+    void goto("/database/dashboard", { replaceState: true });
+  });
+</script>
+
+<div class="flex h-full items-center justify-center text-[13px] text-ink-3">跳转中…</div>
diff --git a/hub/filelib-web/src/routes/database/admin/+page.svelte b/hub/filelib-web/src/routes/database/admin/+page.svelte
new file mode 100644
index 0000000..d7b2c8e
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/admin/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  /**
+   * 管理后台登录页(迁自后端 renderLoginPage)。
+   * 已登录直接跳 dashboard —— 与旧后端路由 /database/admin 的行为一致。
+   */
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+  import { me, authChecked } from "$lib/stores.js";
+  import { loadSession } from "$lib/session.js";
+  import { loadConfig, type AppConfig } from "$lib/config.js";
+
+  let info = $state<AppConfig | null>(null);
+  let loadFailed = $state(false);
+
+  onMount(async () => {
+    await loadSession();
+    if ($me !== null) {
+      void goto("/database/dashboard", { replaceState: true });
+      return;
+    }
+    try {
+      info = await loadConfig();
+    } catch {
+      loadFailed = true;
+    }
+  });
+</script>
+
+<svelte:head><title>Database Admin · 登录</title></svelte:head>
+
+<div class="flex min-h-full items-center justify-center p-6">
+  <div class="w-full max-w-[380px] rounded-2xl border border-line-soft bg-panel p-9 shadow-[0_4px_20px_rgba(26,26,24,.07)]">
+    <div class="text-center text-[26px] font-semibold text-ink">Database Admin</div>
+    <p class="mt-2.5 mb-8 text-center text-[13px] text-ink-3">使用飞书登录以管理数据库</p>
+
+    {#if !$authChecked}
+      <p class="text-center text-[12.5px] text-ink-3">加载中…</p>
+    {:else 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>
+
+      {#if info.devLoginEnabled}
+        <div class="my-5 flex items-center gap-2.5 text-[11px] text-ink-3">
+          <span class="flex-1 border-t border-line-soft"></span>开发模式
+          <span class="flex-1 border-t border-line-soft"></span>
+        </div>
+        <a
+          href="/database/dev-login"
+          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}
+      <p class="text-center text-[12.5px] text-danger">无法加载登录配置,请稍后重试</p>
+    {:else}
+      <p class="text-center text-[12.5px] text-ink-3">加载中…</p>
+    {/if}
+  </div>
+</div>
diff --git a/hub/filelib-web/src/routes/database/dashboard/+layout.svelte b/hub/filelib-web/src/routes/database/dashboard/+layout.svelte
new file mode 100644
index 0000000..655f099
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/dashboard/+layout.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+  /**
+   * 管理后台外壳(迁自后端 renderDashboard 的侧栏 + 身份区)。
+   *
+   * 与旧实现的区别:六个 tab 是真 URL 路由(/database/dashboard/library 等),
+   * 不再是 location.hash + display:none 切换 —— 刷新不丢位置,链接可分享。
+   *
+   * 权限门:未登录跳 /database/admin;登录但非 OWNER/ADMIN(isWebsiteAdmin)
+   * 显示无权提示。语义与 ADR-0028 一致 —— 管理面板要求 silo org 的 OWNER/ADMIN。
+   */
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/state";
+  import { me, authChecked } from "$lib/stores.js";
+  import { loadSession, logout } from "$lib/session.js";
+  import Avatar from "$lib/Avatar.svelte";
+
+  let { children } = $props();
+
+  const NAV = [
+    { seg: "", label: "概览", icon: "M4 13h6V4H4v9Zm0 7h6v-5H4v5Zm10 0h6V11h-6v9Zm0-16v5h6V4h-6Z" },
+    { seg: "library", label: "文件库", icon: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" },
+    { seg: "users", label: "用户管理", icon: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm13 10v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" },
+    { seg: "groups", label: "Group 管理", icon: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm14 10v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75M23 21v-2a4 4 0 0 0-3-3.87" },
+    { seg: "search", label: "查询", icon: "m21 21-4.3-4.3M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" },
+    { seg: "settings", label: "设置", icon: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7-3 2 1-2 3-2-1a7 7 0 0 1-2 1l-1 2h-4l-1-2a7 7 0 0 1-2-1l-2 1-2-3 2-1a7 7 0 0 1 0-2l-2-1 2-3 2 1a7 7 0 0 1 2 1l1-2h4l1 2a7 7 0 0 1 0 2l2-1 2 3-2 1a7 7 0 0 1 0 2Z" },
+  ] as const;
+
+  const BASE = "/database/dashboard";
+
+  onMount(async () => {
+    await loadSession();
+    if ($me === null) void goto("/database/admin", { replaceState: true });
+  });
+
+  function href(seg: string): string {
+    return seg === "" ? BASE : `${BASE}/${seg}`;
+  }
+
+  function isActive(seg: string): boolean {
+    const path = page.url.pathname.replace(/\/$/, "");
+    return seg === "" ? path === BASE : path === `${BASE}/${seg}`;
+  }
+</script>
+
+<svelte:head><title>Database Admin</title></svelte:head>
+
+{#if !$authChecked}
+  <div class="flex h-full items-center justify-center text-[13px] text-ink-3">加载中…</div>
+{:else if $me === null}
+  <div class="flex h-full items-center justify-center text-[13px] text-ink-3">跳转到登录页…</div>
+{:else if !$me.isWebsiteAdmin}
+  <div class="flex min-h-full items-center justify-center p-6">
+    <div class="w-full max-w-[420px] rounded-2xl border border-line-soft bg-panel p-9 text-center shadow-[0_4px_20px_rgba(26,26,24,.07)]">
+      <h2 class="mb-2 text-lg font-semibold text-ink">无权访问管理后台</h2>
+      <p class="mb-6 text-[13px] text-ink-3">
+        当前账号不是本组织的所有者或管理员。普通老师请到文件库使用。
+      </p>
+      <a href="/app" class="btn btn-primary justify-center">前往文件库</a>
+      <button class="btn mt-3 w-full justify-center" onclick={logout}>退出登录</button>
+    </div>
+  </div>
+{:else}
+  <div class="flex h-full">
+    <aside class="flex w-[240px] shrink-0 flex-col border-r border-line-soft bg-sidebar">
+      <div class="border-b border-line-soft px-4 py-4">
+        <span class="text-[15px] font-semibold text-ink">Database Admin</span>
+      </div>
+
+      <nav class="flex flex-1 flex-col gap-0.5 p-2.5">
+        {#each NAV as item (item.seg)}
+          {@const active = isActive(item.seg)}
+          <a
+            href={href(item.seg)}
+            class="flex items-center gap-2.5 rounded-[10px] px-3.5 py-2 text-[13px] transition"
+            class:bg-selected={active}
+            class:text-ink={active}
+            class:font-semibold={active}
+            class:text-ink-3={!active}
+            class:hover:bg-hover={!active}
+          >
+            <svg class="h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={item.icon} /></svg>
+            {item.label}
+          </a>
+        {/each}
+      </nav>
+
+      <div class="m-2.5 flex items-center gap-2.5 border-t border-line-soft px-3 py-2.5">
+        <Avatar displayName={$me.displayName} userId={$me.userId} avatarUrl={$me.avatarUrl} size={26} />
+        <p class="min-w-0 flex-1 truncate text-[12.5px] text-ink" title={$me.userId}>{$me.displayName}</p>
+        <button class="btn !px-2.5 !py-[3px] !text-[11px]" onclick={logout}>退出</button>
+      </div>
+    </aside>
+
+    <div class="flex min-w-0 flex-1 flex-col">
+      {@render children()}
+    </div>
+  </div>
+{/if}
diff --git a/hub/filelib-web/src/routes/database/dashboard/+page.svelte b/hub/filelib-web/src/routes/database/dashboard/+page.svelte
new file mode 100644
index 0000000..2654946
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/dashboard/+page.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  /** 概览(迁自后端 renderDashboard 的统计卡片 + 最近活动)。数据走 GET /database/api/stats。 */
+  import { onMount } from "svelte";
+  import { api } from "$lib/api.js";
+  import type { DashboardStats } from "$lib/types.js";
+
+  let stats = $state<DashboardStats | null>(null);
+  let error = $state<string | null>(null);
+
+  onMount(async () => {
+    try {
+      stats = await api<DashboardStats>("/database/api/stats");
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  });
+
+  const cards = $derived([
+    { label: "文件夹", value: stats?.folders },
+    { label: "项目", value: stats?.projects },
+    { label: "文件", value: stats?.files },
+    { label: "活跃授权", value: stats?.grants },
+  ]);
+
+  function fmtWhen(iso: string): string {
+    try {
+      return new Date(iso).toLocaleString("zh-CN");
+    } catch {
+      return iso;
+    }
+  }
+</script>
+
+<section class="flex-1 overflow-y-auto p-7">
+  <h1 class="mb-1 text-lg font-semibold text-ink">概览</h1>
+  <p class="mb-5 text-[11.5px] text-ink-3">文件库实时数据</p>
+
+  {#if error}
+    <div class="panel text-[12.5px] text-danger">{error}</div>
+  {:else}
+    <div class="grid grid-cols-4 gap-4">
+      {#each cards as card (card.label)}
+        <div class="panel !px-5 !py-[18px]">
+          <p class="text-[12.5px] text-ink-3">{card.label}</p>
+          <p class="mt-1.5 text-[28px] font-semibold text-ink">{card.value ?? "—"}</p>
+        </div>
+      {/each}
+    </div>
+
+    <div class="panel mt-[18px]">
+      <h2 class="mb-2 text-[13.5px] font-semibold text-ink">最近活动</h2>
+      {#if stats === null}
+        <div class="quiet py-6 text-center">加载中…</div>
+      {:else if stats.recent.length === 0}
+        <div class="quiet py-[26px] text-center">暂无文件库活动 · 到「文件库」里创建第一个文件夹吧</div>
+      {:else}
+        {#each stats.recent as row (row.action + row.when + row.label)}
+          <div class="flex items-center gap-3 border-t border-line-soft py-2.5 text-[13px]">
+            <span class="tag shrink-0">{row.action}</span>
+            <span class="truncate text-ink">{row.label}</span>
+            <span class="ml-auto shrink-0 text-[11.5px] text-ink-3">{row.actor} · {fmtWhen(row.when)}</span>
+          </div>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</section>
diff --git a/hub/filelib-web/src/routes/database/dashboard/groups/+page.svelte b/hub/filelib-web/src/routes/database/dashboard/groups/+page.svelte
new file mode 100644
index 0000000..5f6de69
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/dashboard/groups/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  /** Group 管理 tab —— MemberGroup 嵌套树(ADR-0028)。
+   *  外框 padding/overflow 对齐旧 `#tab-groups`(padding:20px;overflow:hidden):
+   *  两栏各自内部滚动,外层不滚。 */
+  import GroupAdmin from "$lib/GroupAdmin.svelte";
+</script>
+
+<div class="min-h-0 flex-1 overflow-hidden p-5">
+  <GroupAdmin />
+</div>
diff --git a/hub/filelib-web/src/routes/database/dashboard/library/+page.svelte b/hub/filelib-web/src/routes/database/dashboard/library/+page.svelte
new file mode 100644
index 0000000..e3c6512
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/dashboard/library/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  /** 文件库 tab —— 与老师端 /app 同一个浏览器组件,区别只在侧栏身份区由外壳提供。 */
+  import LibraryView from "$lib/LibraryView.svelte";
+</script>
+
+<div class="flex min-h-0 flex-1 flex-col">
+  <LibraryView />
+</div>
diff --git a/hub/filelib-web/src/routes/database/dashboard/search/+page.svelte b/hub/filelib-web/src/routes/database/dashboard/search/+page.svelte
new file mode 100644
index 0000000..6154d90
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/dashboard/search/+page.svelte
@@ -0,0 +1,4 @@
+<section class="flex-1 overflow-y-auto p-7">
+  <h1 class="mb-1 text-lg font-semibold text-ink">查询</h1>
+  <p class="text-[12.5px] text-ink-3">查询功能建设中</p>
+</section>
diff --git a/hub/filelib-web/src/routes/database/dashboard/settings/+page.svelte b/hub/filelib-web/src/routes/database/dashboard/settings/+page.svelte
new file mode 100644
index 0000000..67201bb
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/dashboard/settings/+page.svelte
@@ -0,0 +1,4 @@
+<section class="flex-1 overflow-y-auto p-7">
+  <h1 class="mb-1 text-lg font-semibold text-ink">设置</h1>
+  <p class="text-[12.5px] text-ink-3">设置功能建设中</p>
+</section>
diff --git a/hub/filelib-web/src/routes/database/dashboard/users/+page.svelte b/hub/filelib-web/src/routes/database/dashboard/users/+page.svelte
new file mode 100644
index 0000000..fbaede7
--- /dev/null
+++ b/hub/filelib-web/src/routes/database/dashboard/users/+page.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+  /**
+   * 用户管理(迁自后端 adminPanels.ts renderUsersPanel)。
+   *
+   * 用户 = silo org 的成员,走平台层 /api/org/:slug/members(见 src/admin/routes/membersRoutes.ts)。
+   * 与 Group 管理是两套体系:MemberGroup 是全局主体、不归属 org(ADR-0028),
+   * 这里管的是 org 成员与其角色。
+   */
+  import { onMount } from "svelte";
+  import { api } from "$lib/api.js";
+  import { loadConfig } from "$lib/config.js";
+  import { toastOk, toastErr } from "$lib/stores.js";
+  import type { OrgMember, OrgRole } from "$lib/types.js";
+
+  const ROLE_LABEL: Record<OrgRole, string> = {
+    OWNER: "所有者",
+    ADMIN: "管理员",
+    MEMBER: "普通老师",
+  };
+  const ROLES: readonly OrgRole[] = ["OWNER", "ADMIN", "MEMBER"];
+
+  let orgSlug = $state<string | null>(null);
+  let members = $state<OrgMember[] | null>(null);
+  let error = $state<string | null>(null);
+
+  let newOpenId = $state("");
+  let newName = $state("");
+  let newRole = $state<OrgRole>("MEMBER");
+  let adding = $state(false);
+
+  const base = $derived(orgSlug === null ? null : `/api/org/${encodeURIComponent(orgSlug)}`);
+
+  async function load(): Promise<void> {
+    if (base === null) return;
+    try {
+      const r = await api<{ members: OrgMember[] }>(`${base}/members`);
+      members = r.members;
+      error = null;
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  }
+
+  onMount(async () => {
+    try {
+      orgSlug = (await loadConfig()).orgSlug;
+      await load();
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  });
+
+  async function addMember(): Promise<void> {
+    const feishuOpenId = newOpenId.trim();
+    if (feishuOpenId === "") {
+      toastErr("请填写用户 openId");
+      return;
+    }
+    if (base === null) return;
+    adding = true;
+    try {
+      const displayName = newName.trim();
+      await api(`${base}/members`, {
+        method: "POST",
+        body: { feishuOpenId, role: newRole, ...(displayName !== "" ? { displayName } : {}) },
+      });
+      newOpenId = "";
+      newName = "";
+      toastOk("已添加");
+      await load();
+    } catch (e) {
+      toastErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      adding = false;
+    }
+  }
+
+  async function setRole(userId: string, role: string): Promise<void> {
+    if (base === null) return;
+    try {
+      await api(`${base}/members/${encodeURIComponent(userId)}`, { method: "PATCH", body: { role } });
+      toastOk("角色已更新");
+      await load();
+    } catch (e) {
+      toastErr(e instanceof Error ? e.message : String(e));
+      await load();
+    }
+  }
+
+  async function revoke(userId: string, displayName: string): Promise<void> {
+    if (base === null) return;
+    if (!confirm(`移除成员「${displayName || userId}」?`)) return;
+    try {
+      await api(`${base}/members/${encodeURIComponent(userId)}/revoke`, { method: "POST" });
+      toastOk("已移除");
+      await load();
+    } catch (e) {
+      toastErr(e instanceof Error ? e.message : String(e));
+    }
+  }
+</script>
+
+<section class="flex-1 overflow-y-auto p-7">
+  <h1 class="mb-4 text-lg font-semibold text-ink">用户管理</h1>
+
+  <div class="max-w-[880px]">
+    <div class="panel mb-3.5">
+      <div class="section-title mb-2.5">添加成员</div>
+      <div class="flex flex-wrap items-center gap-2">
+        <input class="input min-w-0 flex-[2]" placeholder="用户 openId(飞书 ou_ 开头)" bind:value={newOpenId} />
+        <input class="input min-w-0 flex-1" placeholder="显示名(可选)" bind:value={newName} />
+        <select class="select !w-[130px]" bind:value={newRole}>
+          {#each ROLES as role (role)}
+            <option value={role}>{ROLE_LABEL[role]}</option>
+          {/each}
+        </select>
+        <button class="btn btn-primary disabled:opacity-50" onclick={addMember} disabled={adding}>
+          {adding ? "添加中…" : "添加"}
+        </button>
+      </div>
+    </div>
+
+    <div class="panel">
+      <div class="section-title mb-2.5">成员列表</div>
+
+      {#if error}
+        <div class="py-3 text-[12.5px] text-danger">{error}</div>
+      {:else if members === null}
+        <div class="quiet py-[18px] text-center">加载中…</div>
+      {:else if members.length === 0}
+        <div class="quiet py-[18px] text-center">暂无成员</div>
+      {:else}
+        <table class="list">
+          <thead>
+            <tr>
+              <th>成员</th>
+              <th>userId</th>
+              <th>角色</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each members as m (m.userId)}
+              <tr>
+                <td class="text-ink">{m.displayName || m.userId}</td>
+                <td class="file-meta">{m.userId}</td>
+                <td>
+                  <select
+                    class="select !w-[110px] !px-2 !py-[3px] !text-xs"
+                    value={m.role}
+                    onchange={(e) => setRole(m.userId, e.currentTarget.value)}
+                  >
+                    {#each ROLES as role (role)}
+                      <option value={role}>{ROLE_LABEL[role]}</option>
+                    {/each}
+                  </select>
+                </td>
+                <td class="text-right">
+                  <button class="link-danger" onclick={() => revoke(m.userId, m.displayName)}>移除</button>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      {/if}
+    </div>
+  </div>
+</section>