forked from bai/curriculum-project-hub
ymy
540 lines
19 KiB
Svelte
540 lines
19 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* 老师端网盘式文件库浏览器(仅 /app;管理后台沿用树状 LibraryView)。
|
|
*
|
|
* 下钻导航:双击文件夹/项目进入,面包屑 + 返回跳级;项目内文件同样网格化,
|
|
* 双击进 FileEditor 预览。管理动作全走右键菜单,按节点 role 动态显隐:
|
|
* 打开 / 新建子文件夹(EDIT+,仅 FOLDER)/ 重命名(MANAGE)/ 授权管理(MANAGE,
|
|
* 宽 Modal 复用 GrantsPanel)/ 详情(复用 OverviewPanel)/ 删除(MANAGE)。
|
|
* 文件菜单:打开预览 / 下载 / 删除(EDIT+)。
|
|
*/
|
|
import { onMount } from "svelte";
|
|
import { api } from "./api.js";
|
|
import { me, toastErr, toastOk } from "./stores.js";
|
|
import { logout } from "./session.js";
|
|
import { selectedFilePath, clearSelectedFile } from "./browser.js";
|
|
import { ROLE_LABEL } from "./labels.js";
|
|
import type { FileEntry, NodeChild, NodeDetail, Role } from "./types.js";
|
|
import Icon from "./Icon.svelte";
|
|
import Modal from "./Modal.svelte";
|
|
import ContextMenu, { type MenuItem } from "./ContextMenu.svelte";
|
|
import GridCard from "./GridCard.svelte";
|
|
import FileEditor from "./FileEditor.svelte";
|
|
import GrantsPanel from "./GrantsPanel.svelte";
|
|
import OverviewPanel from "./OverviewPanel.svelte";
|
|
|
|
const RANK: Record<Role, number> = { VIEW: 1, EDIT: 2, MANAGE: 3 };
|
|
const atLeast = (role: Role, min: Role): boolean => RANK[role] >= RANK[min];
|
|
|
|
type View = "nodes" | "files";
|
|
type StackItem = Pick<NodeChild, "id" | "name" | "kind" | "role">;
|
|
|
|
let view = $state<View>("nodes");
|
|
/** 下钻栈(均为 FOLDER;根层为空栈)。 */
|
|
let stack = $state<StackItem[]>([]);
|
|
let children = $state<NodeChild[] | null>(null);
|
|
let nodesError = $state<string | null>(null);
|
|
|
|
/** 文件视图:当前项目详情 + 文件列表。 */
|
|
let projectNode = $state<NodeDetail | null>(null);
|
|
let files = $state<FileEntry[] | null>(null);
|
|
let filesError = $state<string | null>(null);
|
|
|
|
let selected = $state<string | null>(null);
|
|
let menu = $state<{ x: number; y: number; items: readonly MenuItem[] } | null>(null);
|
|
|
|
// 弹窗:create(新建文件夹/项目)/ rename / grants / detail / newFile
|
|
let modal = $state<"create" | "rename" | "grants" | "detail" | "newFile" | null>(null);
|
|
let createKind = $state<"FOLDER" | "PROJECT">("FOLDER");
|
|
let createParentId = $state<string | null>(null);
|
|
let formName = $state("");
|
|
let formDesc = $state("");
|
|
let renameTarget = $state<StackItem | null>(null);
|
|
let detailNode = $state<NodeDetail | null>(null);
|
|
let newPath = $state("");
|
|
let newContent = $state("");
|
|
let saving = $state(false);
|
|
|
|
const errText = (e: unknown): string => (e instanceof Error ? e.message : String(e));
|
|
const currentFolder = $derived(stack.length === 0 ? null : stack[stack.length - 1]!);
|
|
const canCreateHere = $derived(
|
|
currentFolder === null ? ($me?.isWebsiteAdmin ?? false) : atLeast(currentFolder.role, "EDIT"),
|
|
);
|
|
const projectCanEdit = $derived(projectNode !== null && projectNode.role !== "VIEW");
|
|
const initial = $derived(($me?.displayName ?? $me?.userId ?? "U").slice(0, 1).toUpperCase());
|
|
|
|
/* ------------------------------------------------------------ 数据加载 */
|
|
|
|
async function loadChildren(): Promise<void> {
|
|
children = null;
|
|
nodesError = null;
|
|
try {
|
|
const parent = currentFolder;
|
|
const url = parent === null
|
|
? "/database/api/nodes"
|
|
: `/database/api/nodes?parentId=${encodeURIComponent(parent.id)}`;
|
|
const r = await api<{ nodes: NodeChild[] }>(url);
|
|
children = r.nodes;
|
|
} catch (e) {
|
|
nodesError = errText(e);
|
|
}
|
|
}
|
|
|
|
async function loadFiles(): Promise<void> {
|
|
if (projectNode === null) return;
|
|
files = null;
|
|
filesError = null;
|
|
try {
|
|
const r = await api<{ files: FileEntry[] }>(`/database/api/projects/${projectNode.id}/files`);
|
|
files = r.files;
|
|
} catch (e) {
|
|
filesError = errText(e);
|
|
}
|
|
}
|
|
|
|
async function fetchDetail(id: string): Promise<NodeDetail> {
|
|
const r = await api<{ node: NodeDetail }>(`/database/api/nodes/${id}`);
|
|
return r.node;
|
|
}
|
|
|
|
onMount(loadChildren);
|
|
|
|
function refresh(): void {
|
|
selected = null;
|
|
menu = null;
|
|
if (view === "files") void loadFiles();
|
|
else void loadChildren();
|
|
}
|
|
|
|
/* ------------------------------------------------------------ 导航 */
|
|
|
|
function openNode(n: StackItem): void {
|
|
selected = null;
|
|
if (n.kind === "FOLDER") {
|
|
stack = [...stack, n];
|
|
void loadChildren();
|
|
} else {
|
|
void (async () => {
|
|
try {
|
|
projectNode = await fetchDetail(n.id);
|
|
view = "files";
|
|
await loadFiles();
|
|
} catch (e) {
|
|
toastErr(errText(e));
|
|
}
|
|
})();
|
|
}
|
|
}
|
|
|
|
function goRoot(): void {
|
|
if (view === "files") {
|
|
view = "nodes";
|
|
projectNode = null;
|
|
clearSelectedFile();
|
|
return;
|
|
}
|
|
stack = [];
|
|
void loadChildren();
|
|
}
|
|
|
|
function goUp(): void {
|
|
if (view === "files") {
|
|
goRoot();
|
|
return;
|
|
}
|
|
if (stack.length === 0) return;
|
|
stack = stack.slice(0, -1);
|
|
void loadChildren();
|
|
}
|
|
|
|
function goToDepth(depth: number): void {
|
|
if (view === "files") {
|
|
view = "nodes";
|
|
projectNode = null;
|
|
clearSelectedFile();
|
|
}
|
|
stack = stack.slice(0, depth);
|
|
void loadChildren();
|
|
}
|
|
|
|
/* ------------------------------------------------------------ 节点操作 */
|
|
|
|
function openCreate(kind: "FOLDER" | "PROJECT", parentId: string | null): void {
|
|
createKind = kind;
|
|
createParentId = parentId;
|
|
formName = "";
|
|
formDesc = "";
|
|
modal = "create";
|
|
}
|
|
|
|
async function submitCreate(): Promise<void> {
|
|
const name = formName.trim();
|
|
if (name === "") return;
|
|
saving = true;
|
|
try {
|
|
await api("/database/api/nodes", {
|
|
method: "POST",
|
|
body: {
|
|
parentId: createParentId,
|
|
kind: createKind,
|
|
name,
|
|
...(formDesc.trim() !== "" ? { description: formDesc.trim() } : {}),
|
|
},
|
|
});
|
|
toastOk("已创建");
|
|
modal = null;
|
|
refresh();
|
|
} catch (e) {
|
|
toastErr(errText(e));
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
function openRename(n: StackItem): void {
|
|
renameTarget = n;
|
|
formName = n.name;
|
|
modal = "rename";
|
|
}
|
|
|
|
async function submitRename(): Promise<void> {
|
|
if (renameTarget === null) return;
|
|
const name = formName.trim();
|
|
if (name === "" || name === renameTarget.name) return;
|
|
saving = true;
|
|
try {
|
|
await api(`/database/api/nodes/${renameTarget.id}`, { method: "PATCH", body: { name } });
|
|
toastOk("已重命名");
|
|
modal = null;
|
|
refresh();
|
|
} catch (e) {
|
|
toastErr(errText(e));
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
async function removeNode(n: StackItem): Promise<void> {
|
|
if (!confirm(`删除「${n.name}」?软删除后不可见。`)) return;
|
|
try {
|
|
await api(`/database/api/nodes/${n.id}`, { method: "DELETE" });
|
|
toastOk("已删除");
|
|
refresh();
|
|
} catch (e) {
|
|
toastErr(errText(e));
|
|
}
|
|
}
|
|
|
|
async function openGrants(n: StackItem): Promise<void> {
|
|
try {
|
|
detailNode = await fetchDetail(n.id);
|
|
modal = "grants";
|
|
} catch (e) {
|
|
toastErr(errText(e));
|
|
}
|
|
}
|
|
|
|
async function openDetail(n: StackItem): Promise<void> {
|
|
try {
|
|
detailNode = await fetchDetail(n.id);
|
|
modal = "detail";
|
|
} catch (e) {
|
|
toastErr(errText(e));
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------ 文件操作 */
|
|
|
|
function previewFile(f: FileEntry): void {
|
|
selectedFilePath.set(f.path);
|
|
}
|
|
|
|
async function submitNewFile(): Promise<void> {
|
|
if (projectNode === null) return;
|
|
const path = newPath.trim();
|
|
if (path === "") return;
|
|
saving = true;
|
|
try {
|
|
await api(`/database/api/projects/${projectNode.id}/file`, {
|
|
method: "PUT",
|
|
body: { path, content: newContent },
|
|
});
|
|
toastOk("已创建");
|
|
modal = null;
|
|
newPath = ""; newContent = "";
|
|
await loadFiles();
|
|
} catch (e) {
|
|
toastErr(errText(e));
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
async function removeFile(f: FileEntry): Promise<void> {
|
|
if (projectNode === null || !confirm(`删除文件 ${f.path}?`)) return;
|
|
try {
|
|
const cur = await api<{ version: string }>(
|
|
`/database/api/projects/${projectNode.id}/file?path=${encodeURIComponent(f.path)}`,
|
|
);
|
|
await api(`/database/api/projects/${projectNode.id}/file?path=${encodeURIComponent(f.path)}`, {
|
|
method: "DELETE",
|
|
body: { baseVersion: cur.version },
|
|
});
|
|
toastOk("已删除");
|
|
if ($selectedFilePath === f.path) clearSelectedFile();
|
|
await loadFiles();
|
|
} catch (e) {
|
|
toastErr(errText(e));
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------ 右键菜单 */
|
|
|
|
function nodeMenuItems(n: StackItem): MenuItem[] {
|
|
const items: MenuItem[] = [{ label: "打开", icon: "chevron", onclick: () => openNode(n) }];
|
|
if (n.kind === "FOLDER" && atLeast(n.role, "EDIT")) {
|
|
items.push({ label: "新建子文件夹", icon: "plus", onclick: () => openCreate("FOLDER", n.id) });
|
|
}
|
|
if (n.role === "MANAGE") {
|
|
items.push(
|
|
{ label: "重命名", icon: "pencil", onclick: () => openRename(n) },
|
|
{ label: "授权管理", icon: "shield", onclick: () => void openGrants(n) },
|
|
);
|
|
}
|
|
items.push({ label: "详情", icon: "info", onclick: () => void openDetail(n) });
|
|
if (n.role === "MANAGE") {
|
|
items.push({ label: "删除", icon: "trash", danger: true, onclick: () => void removeNode(n) });
|
|
}
|
|
return items;
|
|
}
|
|
|
|
function fileMenuItems(f: FileEntry): MenuItem[] {
|
|
const items: MenuItem[] = [
|
|
{ label: "打开预览", icon: "chevron", onclick: () => previewFile(f) },
|
|
{
|
|
label: "下载",
|
|
icon: "download",
|
|
onclick: () => {
|
|
if (projectNode === null) return;
|
|
const a = document.createElement("a");
|
|
a.href = `/database/api/projects/${projectNode.id}/file/raw?path=${encodeURIComponent(f.path)}`;
|
|
a.download = "";
|
|
a.click();
|
|
},
|
|
},
|
|
];
|
|
if (projectCanEdit) {
|
|
items.push({ label: "删除", icon: "trash", danger: true, onclick: () => void removeFile(f) });
|
|
}
|
|
return items;
|
|
}
|
|
|
|
function bgMenuItems(): MenuItem[] {
|
|
const items: MenuItem[] = [];
|
|
if (view === "nodes" && canCreateHere) {
|
|
items.push(
|
|
{ label: "新建文件夹", icon: "plus", onclick: () => openCreate("FOLDER", currentFolder?.id ?? null) },
|
|
{ label: "新建项目", icon: "plus", onclick: () => openCreate("PROJECT", currentFolder?.id ?? null) },
|
|
);
|
|
}
|
|
if (view === "files" && projectCanEdit) {
|
|
items.push({ label: "新建文件", icon: "plus", onclick: () => (modal = "newFile") });
|
|
}
|
|
items.push({ label: "刷新", icon: "refresh", onclick: refresh });
|
|
return items;
|
|
}
|
|
</script>
|
|
|
|
<div class="flex min-h-0 flex-1 flex-col">
|
|
<!-- 顶栏:返回 + 面包屑 + 动作 + 身份 -->
|
|
<header class="flex shrink-0 items-center gap-2 border-b border-line-soft bg-panel px-5 py-3">
|
|
{#if view === "files" || stack.length > 0}
|
|
<button class="btn btn-sm" onclick={goUp} title="返回上级">
|
|
<Icon name="arrowLeft" size={13} /> 返回
|
|
</button>
|
|
{/if}
|
|
<nav class="flex min-w-0 flex-1 items-center gap-1 text-[13px]">
|
|
<button
|
|
class="shrink-0 {view === 'nodes' && stack.length === 0 ? 'font-semibold text-ink' : 'text-ink-3 hover:text-ink'}"
|
|
onclick={goRoot}
|
|
>文件库</button>
|
|
{#each stack as n, i (n.id)}
|
|
<span class="text-line">/</span>
|
|
<button
|
|
class="truncate {view === 'nodes' && i === stack.length - 1
|
|
? 'font-semibold text-ink'
|
|
: 'text-ink-3 hover:text-ink'}"
|
|
onclick={() => goToDepth(i + 1)}
|
|
>{n.name}</button>
|
|
{/each}
|
|
{#if view === "files" && projectNode}
|
|
<span class="text-line">/</span>
|
|
<span class="truncate font-semibold text-ink">{projectNode.name}</span>
|
|
{/if}
|
|
</nav>
|
|
|
|
{#if view === "nodes" && canCreateHere}
|
|
<button class="btn btn-sm" onclick={() => openCreate("FOLDER", currentFolder?.id ?? null)}>
|
|
<Icon name="plus" size={13} /> 新建文件夹
|
|
</button>
|
|
<button class="btn btn-sm" onclick={() => openCreate("PROJECT", currentFolder?.id ?? null)}>
|
|
<Icon name="plus" size={13} /> 新建项目
|
|
</button>
|
|
{/if}
|
|
{#if view === "files" && projectCanEdit}
|
|
<button class="btn btn-sm" onclick={() => (modal = "newFile")}>
|
|
<Icon name="plus" size={13} /> 新建文件
|
|
</button>
|
|
{/if}
|
|
<button class="btn btn-sm" onclick={refresh} title="刷新"><Icon name="refresh" size={13} /></button>
|
|
|
|
<div class="ml-1 flex shrink-0 items-center gap-2 border-l border-line-soft pl-3">
|
|
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-white">{initial}</span>
|
|
<span class="max-w-[120px] truncate text-[12.5px] text-ink">{$me?.displayName ?? $me?.userId ?? ""}</span>
|
|
<button
|
|
class="rounded-lg border border-line-soft px-2 py-1 text-[11.5px] text-ink-3 transition hover:bg-hover hover:text-ink"
|
|
onclick={logout}
|
|
title="退出登录"
|
|
>退出</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主体:网格 + 文件预览栏 -->
|
|
<div class="flex min-h-0 flex-1">
|
|
<main
|
|
class="flex-1 overflow-y-auto px-6 py-5"
|
|
role="presentation"
|
|
oncontextmenu={(e) => { e.preventDefault(); menu = { x: e.clientX, y: e.clientY, items: bgMenuItems() }; }}
|
|
>
|
|
{#if view === "nodes"}
|
|
{#if nodesError !== null}
|
|
<div class="py-10 text-center text-[13px] text-danger">{nodesError}</div>
|
|
{:else if children === null}
|
|
<div class="quiet py-10 text-center">加载中…</div>
|
|
{:else if children.length === 0}
|
|
<div class="quiet py-10 text-center">
|
|
{currentFolder === null ? "空文件库" : "空文件夹"}{canCreateHere ? " · 右键或点上方按钮新建" : ""}
|
|
</div>
|
|
{:else}
|
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(132px,1fr))] gap-x-2 gap-y-4">
|
|
{#each children as n (n.id)}
|
|
<GridCard
|
|
kind={n.kind}
|
|
name={n.name}
|
|
meta={ROLE_LABEL[n.role]}
|
|
selected={selected === n.id}
|
|
onselect={() => (selected = n.id)}
|
|
onopen={() => openNode(n)}
|
|
oncontextmenu={(x, y) => (menu = { x, y, items: nodeMenuItems(n) })}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
{#if filesError !== null}
|
|
<div class="py-10 text-center text-[13px] text-danger">{filesError}</div>
|
|
{:else if files === null}
|
|
<div class="quiet py-10 text-center">加载中…</div>
|
|
{:else if files.length === 0}
|
|
<div class="quiet py-10 text-center">空仓库{projectCanEdit ? " · 右键或点上方按钮新建文件" : ""}</div>
|
|
{:else}
|
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(132px,1fr))] gap-x-2 gap-y-4">
|
|
{#each files as f (f.path)}
|
|
<GridCard
|
|
kind="FILE"
|
|
name={f.path}
|
|
meta="{f.size} B"
|
|
selected={selected === f.path}
|
|
onselect={() => (selected = f.path)}
|
|
onopen={() => previewFile(f)}
|
|
oncontextmenu={(x, y) => (menu = { x, y, items: fileMenuItems(f) })}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</main>
|
|
|
|
{#if view === "files" && $selectedFilePath && projectNode}
|
|
<section class="flex w-[46%] min-w-[420px] shrink-0 flex-col overflow-y-auto border-l border-line-soft bg-bg p-4">
|
|
<FileEditor
|
|
projectId={projectNode.id}
|
|
path={$selectedFilePath}
|
|
role={projectNode.role}
|
|
onchanged={() => void loadFiles()}
|
|
onclose={clearSelectedFile}
|
|
/>
|
|
</section>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if menu}
|
|
<ContextMenu x={menu.x} y={menu.y} items={menu.items} onclose={() => (menu = null)} />
|
|
{/if}
|
|
|
|
{#if modal === "create"}
|
|
<Modal title={createKind === "FOLDER" ? "新建文件夹" : "新建项目"} onclose={() => (modal = null)}>
|
|
<div class="form-row">
|
|
<label class="form-label" for="gc-name">名称</label>
|
|
<input id="gc-name" class="input" bind:value={formName} placeholder={createKind === "FOLDER" ? "例如:物理" : "例如:微积分基础"} />
|
|
</div>
|
|
<div class="form-row">
|
|
<label class="form-label" for="gc-desc">简介(可选)</label>
|
|
<textarea id="gc-desc" rows="3" class="textarea" bind:value={formDesc} placeholder="简要说明用途…"></textarea>
|
|
</div>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<button class="btn" onclick={() => (modal = null)}>取消</button>
|
|
<button class="btn btn-primary disabled:opacity-50" onclick={submitCreate} disabled={saving}>
|
|
{saving ? "创建中…" : "创建"}
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
{/if}
|
|
|
|
{#if modal === "rename" && renameTarget}
|
|
<Modal title="重命名" onclose={() => (modal = null)}>
|
|
<div class="form-row">
|
|
<label class="form-label" for="gr-name">新名称</label>
|
|
<input id="gr-name" class="input" bind:value={formName} />
|
|
</div>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<button class="btn" onclick={() => (modal = null)}>取消</button>
|
|
<button class="btn btn-primary disabled:opacity-50" onclick={submitRename} disabled={saving}>
|
|
{saving ? "保存中…" : "保存"}
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
{/if}
|
|
|
|
{#if modal === "grants" && detailNode}
|
|
<Modal maxW={880} title="授权管理 · {detailNode.name}" onclose={() => (modal = null)}>
|
|
<GrantsPanel node={detailNode} />
|
|
</Modal>
|
|
{/if}
|
|
|
|
{#if modal === "detail" && detailNode}
|
|
<Modal maxW={680} title="详情 · {detailNode.name}" onclose={() => (modal = null)}>
|
|
<OverviewPanel node={detailNode} ondeleted={() => { modal = null; refresh(); }} />
|
|
</Modal>
|
|
{/if}
|
|
|
|
{#if modal === "newFile"}
|
|
<Modal title="新建文件" onclose={() => (modal = null)}>
|
|
<div class="form-row">
|
|
<label class="form-label" for="gf-path">路径</label>
|
|
<input id="gf-path" class="input font-mono" bind:value={newPath} placeholder="讲义/第一章.md" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label class="form-label" for="gf-content">内容</label>
|
|
<textarea id="gf-content" rows="8" class="textarea" bind:value={newContent} placeholder="内容…"></textarea>
|
|
</div>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<button class="btn" onclick={() => (modal = null)}>取消</button>
|
|
<button class="btn btn-primary disabled:opacity-50" onclick={submitNewFile} disabled={saving}>
|
|
{saving ? "创建中…" : "创建"}
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
{/if}
|