forked from EduCraft/curriculum-project-hub
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, 否则被客户端路由拦下。
This commit is contained in:
白
+23
-47
@@ -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>
|
||||
|
||||
{#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}
|
||||
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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 />
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user