bai/curriculum-project-hub
1
0
Fork 1
forked from EduCraft/curriculum-project-hub
Code Pull Requests Activity

Merge branch 'maoyuanyang-main'

Browse Source 
# Conflicts:
#	hub/filelib-web/src/lib/GrantsPanel.svelte
#	hub/filelib-web/src/lib/OverviewPanel.svelte
#	hub/filelib-web/src/lib/types.ts
#	hub/src/database/filelib/grantService.ts
This commit is contained in:
白
2026-08-03 15:35:44 +08:00
parent 87bbf0bd57 3cfbe55070
commit dc271ff9f3
37 changed files with 1926 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hub/filelib-web/src/lib/BinView.svelte
+105
View File
@@ -0,0 +1,105 @@
<script lang="ts">
/**
* 回收站(ADR-0031):祖先全活跃的已删节点顶;恢复只清本节点 deletedAt;
* 彻底删除(整支硬删)仅网站管理员,二次确认。
*/
import { onMount } from "svelte";
import { api } from "./api.js";
import { toastErr, toastOk } from "./stores.js";
import type { BinEntry } from "./types.js";
import Icon from "./Icon.svelte";
let entries = $state<BinEntry[] | null>(null);
let error = $state<string | null>(null);
let busyId = $state<string | null>(null);
async function load(): Promise<void> {
try {
const r = await api<{ entries: BinEntry[] }>("/database/api/bin");
entries = r.entries;
error = null;
} catch (e) {
error = e instanceof Error ? e.message : String(e);
}
}
onMount(load);
function fmt(iso: string): string {
try {
return new Date(iso).toLocaleString("zh-CN", { dateStyle: "medium", timeStyle: "short" });
} catch {
return iso;
}
}
async function restore(e: BinEntry): Promise<void> {
busyId = e.id;
try {
const r = await api<{ name: string }>(
`/database/api/bin/${encodeURIComponent(e.id)}/restore`,
{ method: "POST" },
);
toastOk(`已恢复「${r.name}」`);
await load();
} catch (err) {
toastErr(err instanceof Error ? err.message : String(err));
} finally {
busyId = null;
}
}
async function purge(e: BinEntry): Promise<void> {
if (!confirm(`彻底删除「${e.name}」及其全部内容?此操作不可恢复。`)) return;
if (!confirm(`再次确认:整支硬删,含子文件夹/项目/文件与授权记录。继续?`)) return;
busyId = e.id;
try {
const r = await api<{ removed: number }>(`/database/api/bin/${encodeURIComponent(e.id)}`, { method: "DELETE" });
toastOk(`已彻底删除(${r.removed} 个节点)`);
await load();
} catch (err) {
toastErr(err instanceof Error ? err.message : String(err));
} finally {
busyId = null;
}
}
</script>
<div class="flex-1 overflow-y-auto px-6 py-5">
<h1 class="mb-4 text-[15px] font-semibold text-ink">回收站</h1>
{#if error !== null}
<div class="py-8 text-center text-[13px] text-danger">{error}</div>
{:else if entries === null}
<div class="quiet py-8 text-center">加载中…</div>
{:else if entries.length === 0}
<div class="quiet py-8 text-center">回收站是空的</div>
{:else}
<div class="panel !p-2">
{#each entries as e (e.id)}
<div class="flex items-center gap-3 rounded-lg px-3 py-2">
<span class="flex text-ink-3"><Icon name={e.kind === "FOLDER" ? "folder" : "layers"} size={15} /></span>
<span class="min-w-0 flex-1">
<span class="block truncate text-[13px] text-ink">{e.name}</span>
<span class="quiet block">删除于 {fmt(e.deletedAt)}</span>
</span>
<button
class="btn btn-sm disabled:opacity-50"
onclick={() => void restore(e)}
disabled={busyId === e.id}
>
<Icon name="restore" size={12} /> 恢复
</button>
<!-- 彻底删除与条目可见性同权(ADR-0034):能在回收站看到,就能清空 -->
<button
class="btn btn-sm btn-danger disabled:opacity-50"
onclick={() => void purge(e)}
disabled={busyId === e.id}
>
<Icon name="trash" size={12} /> 彻底删除
</button>
</div>
{/each}
</div>
{/if}
</div>
hub/filelib-web/src/lib/ContextMenu.svelte
+55
View File
@@ -0,0 +1,55 @@
<script lang="ts" module>
import type { IconName } from "./Icon.svelte";
export interface MenuItem {
readonly label: string;
readonly icon?: IconName;
readonly danger?: boolean;
readonly onclick: () => void;
}
</script>
<script lang="ts">
/**
* 通用右键菜单:光标处弹出,点任意处/再次右键关闭。
* 位置做视口夹取(右侧/底部溢出时向内收)。
*/
import Icon from "./Icon.svelte";
let { x, y, items, onclose }: { x: number; y: number; items: readonly MenuItem[]; onclose: () => void } = $props();
const MENU_W = 178;
const ITEM_H = 34;
const px = $derived(
typeof window === "undefined" ? x : Math.max(4, Math.min(x, window.innerWidth - MENU_W - 8)),
);
const py = $derived(
typeof window === "undefined" ? y : Math.max(4, Math.min(y, window.innerHeight - items.length * ITEM_H - 20)),
);
</script>
<div
class="fixed inset-0 z-50"
role="presentation"
onclick={onclose}
oncontextmenu={(e) => { e.preventDefault(); onclose(); }}
>
<div
class="fixed rounded-xl border border-line-soft bg-panel py-1.5 shadow-[0_8px_28px_rgba(26,26,24,.12)]"
style="left:{px}px;top:{py}px;width:{MENU_W}px"
>
{#each items as item (item.label)}
<button
class="flex w-full items-center gap-2.5 px-3.5 py-[7px] text-left text-[12.5px] transition {item.danger
? 'text-danger hover:bg-hover'
: 'text-ink hover:bg-hover'}"
onclick={() => { onclose(); item.onclick(); }}
>
{#if item.icon}
<span class={item.danger ? "" : "text-ink-3"}><Icon name={item.icon} size={14} /></span>
{/if}
{item.label}
</button>
{/each}
</div>
</div>
hub/filelib-web/src/lib/GrantsPanel.svelte
+276 -87
View File
@@ -1,37 +1,70 @@
<script lang="ts">
/**
* 节点授权面板。迁自已删除的 routes/libraryBrowser.ts `renderGrantsTab`(ADR-0029)。
* 节点授权面板(表格化改版)。迁自已删除的 routes/libraryBrowser.ts
* `renderGrantsTab`(ADR-0029)。
*
* 迁移时整个「授权」tab 连同这四个端点一起漏掉了 —— 后端一直可用,只是前端没入口。
* 布局:顶部工具条(左:授权成员搜索框;右:「+ 添加授权」弹窗入口);
* 下方一行一条授权 —— 成员(名称+id,点击跳用户管理/Group 管理)、
* 类型(个人/Group)、权限(下拉可改)、加入时间、操作(删除)。
*
* 语义(契约 8.1 / ADR-0021):
* 语义(契约 8.1 / ADR-0021 / ADR-0028):
* - 创建者授权(isCreatorGrant)不可收回、不可改;
* - MANAGE 仅创建者可授,这里不做前端拦截 —— 后端 fail closed,报错原样呈现;
* - GROUP 主体走 in-hub MemberGroup(ADR-0028),用 /groups/search 选,不手敲 id。
* - MANAGE 仅创建者可授,前端不做矩阵拦截 —— 后端 fail closed,报错原样 toast;
* - GROUP 主体走 in-hub MemberGroup,/groups/search 搜索选(MANAGE 即可);
* USER 主体用 /users/search(仅网站管理员),老师端无此权限时回落手输 id。
*/
import { api } from "./api.js";
import { toastOk, toastErr } from "./stores.js";
import { currentNode } from "./browser.js";
import type { Grant, MemberGroupSearchResult, NodeDetail, Role } from "./types.js";
import { ROLE_LABEL } from "./labels.js";
import type { Grant, MemberGroupSearchResult, NodeDetail, Role, UserSearchResult } from "./types.js";
import Icon from "./Icon.svelte";
import Modal from "./Modal.svelte";
import Avatar from "./Avatar.svelte";
let { node }: { node: NodeDetail } = $props();
const ROLES: readonly Role[] = ["VIEW", "EDIT", "MANAGE"];
interface PrincipalOption {
readonly id: string;
readonly label: string;
readonly sub: string;
}
let grants = $state<Grant[] | null>(null);
let error = $state<string | null>(null);
let searchText = $state("");
// 添加授权弹窗
let showAdd = $state(false);
let principalType = $state<"USER" | "GROUP">("USER");
let userIdInput = $state("");
let groupId = $state("");
let groupOptions = $state<MemberGroupSearchResult[] | null>(null);
let principalQuery = $state("");
let principalOptions = $state<readonly PrincipalOption[] | null>(null);
let selectedPrincipal = $state<{ readonly id: string; readonly label: string } | null>(null);
let manualId = $state("");
let searchUnavailable = $state(false);
let role = $state<Role>("VIEW");
let saving = $state(false);
let searchSeq = 0;
let searchTimer: ReturnType<typeof setTimeout> | undefined;
const canManage = $derived(node.role === "MANAGE");
const errText = (e: unknown): string => (e instanceof Error ? e.message : String(e));
/** 工具条搜索:按名称 / id / 类型过滤当前授权行(纯前端过滤,数据已全量在手)。 */
const shown = $derived.by((): Grant[] | null => {
if (grants === null) return null;
const q = searchText.trim().toLowerCase();
if (q === "") return grants;
return grants.filter(
(g) =>
g.principalId.toLowerCase().includes(q) ||
(g.principalName ?? "").toLowerCase().includes(q) ||
(g.principalOpenId ?? "").toLowerCase().includes(q) ||
(g.principalType === "USER" ? "个人" : "group").includes(q),
);
});
$effect(() => {
void node.id;
void load();
@@ -48,33 +81,102 @@
}
}
/** 切到 GROUP 时懒加载候选组(活跃组 + breadcrumb)。 */
async function onTypeChange(): Promise<void> {
if (principalType !== "GROUP" || groupOptions !== null) return;
/** 成员单元格跳转:USER → 用户管理(带过滤词);GROUP → Group 管理(选中该组)。 */
function principalHref(g: Grant): string {
return g.principalType === "USER"
? `/database/dashboard/users?q=${encodeURIComponent(g.principalId)}`
: `/database/dashboard/groups?select=${encodeURIComponent(g.principalId)}`;
}
function fmtDate(iso: string): string {
try {
const r = await api<{ groups: MemberGroupSearchResult[] }>("/database/api/groups/search?q=");
groupOptions = r.groups;
if (r.groups.length > 0 && groupId === "") groupId = r.groups[0]!.id;
} catch (e) {
toastErr(errText(e));
return new Date(iso).toLocaleString("zh-CN", { dateStyle: "medium", timeStyle: "short" });
} catch {
return iso;
}
}
/* ------------------------------------------------------------ 添加授权弹窗 */
function openAdd(): void {
showAdd = true;
principalType = "USER";
principalQuery = "";
principalOptions = null;
selectedPrincipal = null;
manualId = "";
searchUnavailable = false;
role = "VIEW";
void searchPrincipals("");
}
function onTypeChange(): void {
principalQuery = "";
principalOptions = null;
selectedPrincipal = null;
manualId = "";
searchUnavailable = false;
void searchPrincipals("");
}
function onQueryInput(): void {
selectedPrincipal = null;
if (searchTimer !== undefined) clearTimeout(searchTimer);
const q = principalQuery.trim();
searchTimer = setTimeout(() => void searchPrincipals(q), 250);
}
async function searchPrincipals(q: string): Promise<void> {
// seq 防乱序:慢响应不覆盖新查询的结果。
const seq = ++searchSeq;
try {
if (principalType === "USER") {
const r = await api<{ users: UserSearchResult[] }>(
`/database/api/users/search?q=${encodeURIComponent(q)}`,
);
if (seq !== searchSeq) return;
principalOptions = r.users.map((u) => ({
id: u.userId,
label: u.displayName === "" ? u.userId : u.displayName,
sub: u.feishuOpenId,
}));
} else {
const r = await api<{ groups: MemberGroupSearchResult[] }>(
`/database/api/groups/search?q=${encodeURIComponent(q)}`,
);
if (seq !== searchSeq) return;
principalOptions = r.groups.map((g) => ({ id: g.id, label: g.name, sub: g.breadcrumb }));
}
searchUnavailable = false;
} catch {
if (seq !== searchSeq) return;
// 老师端 MANAGE 持有者没有 users/search 权限(403)——回落为手输 id。
principalOptions = null;
searchUnavailable = true;
}
}
function pick(option: PrincipalOption): void {
selectedPrincipal = { id: option.id, label: option.label };
principalQuery = option.label;
principalOptions = null;
}
async function addGrant(): Promise<void> {
const principalId = principalType === "GROUP" ? groupId : userIdInput.trim();
const principalId = selectedPrincipal?.id ?? manualId.trim();
if (principalId === "") {
toastErr("请填写主体");
toastErr("请选择或填写授权主体");
return;
}
saving = true;
try {
// PUT /grants 是增量语义(putGrants),不是整表替换。
// PUT /grants 是 upsert 语义(putGrants):同主体已有授权则改级别,否则新建。
await api(`/database/api/nodes/${node.id}/grants`, {
method: "PUT",
body: { grants: [{ principalType, principalId, role }] },
});
toastOk("已授予");
userIdInput = "";
showAdd = false;
await load();
} catch (e) {
toastErr(errText(e));
@@ -83,30 +185,29 @@
}
}
/** 权限下拉改级别:复用 PUT upsert;被 8.1 矩阵拒绝时 toast 并 reload 回显真实态。 */
async function changeRole(g: Grant, next: Role): Promise<void> {
if (next === g.role) return;
try {
await api(`/database/api/nodes/${node.id}/grants`, {
method: "PUT",
body: { grants: [{ principalType: g.principalType, principalId: g.principalId, role: next }] },
});
toastOk("权限已更新");
await load();
} catch (e) {
toastErr(errText(e));
await load();
}
}
async function revoke(g: Grant): Promise<void> {
if (!confirm(`收回「${g.principalName}」的 ${g.role} 授权?`)) return;
if (!confirm(`删除「${g.principalName ?? g.principalId}」的${ROLE_LABEL[g.role]}授权?`)) return;
try {
await api(`/database/api/nodes/${node.id}/grants/${encodeURIComponent(g.id)}`, {
method: "DELETE",
});
toastOk("已收回");
await load();
} catch (e) {
toastErr(errText(e));
}
}
/** 独立权限开关(仅 PROJECT;关闭时只继承父级,创建者除外)。 */
async function toggleIndependent(): Promise<void> {
try {
await api(`/database/api/projects/${node.id}/independent-permission`, {
method: "PUT",
body: { enabled: !node.independentPermission },
});
toastOk("已切换");
currentNode.update((n) =>
n !== null && n.id === node.id ? { ...n, independentPermission: !node.independentPermission } : n,
);
toastOk("已删除");
await load();
} catch (e) {
toastErr(errText(e));
@@ -115,35 +216,92 @@
</script>
<div class="panel">
<!-- 工具条:左侧授权成员搜索框,右侧添加授权入口 -->
<div class="mb-3 flex items-center gap-2">
<div class="relative min-w-0 flex-1">
<span class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-3">
<Icon name="search" size={14} />
</span>
<input
class="input w-full !pl-8"
placeholder="搜索授权成员(名称 / id / 类型)"
bind:value={searchText}
/>
</div>
{#if canManage}
<button class="btn btn-primary shrink-0" onclick={openAdd}>
<Icon name="plus" size={13} /> 添加授权
</button>
{/if}
</div>
{#if error !== null}
<div class="py-2 text-[12.5px] text-danger">{error}</div>
{:else if grants === null}
{:else if shown === null}
<div class="quiet py-[18px] text-center">加载中…</div>
{:else}
<table class="list">
<!-- 内容不可断行(头像名/id/日期/下拉)可能超宽:溢出时横向滚动,
而不是把表格挤变形或顶出 panel 右边界(文件预览打开时主区变窄)。 -->
<div class="overflow-x-auto">
<table class="list">
<thead>
<tr><th>主体</th><th>级别</th><th></th></tr>
<tr>
<th class="whitespace-nowrap pr-4">成员</th>
<th class="whitespace-nowrap pr-4">userId</th>
<th class="whitespace-nowrap pr-4">飞书 ID</th>
<th class="whitespace-nowrap pr-4">类型</th>
<th class="whitespace-nowrap pr-4">权限</th>
<th class="whitespace-nowrap pr-4">加入时间</th>
<th></th>
</tr>
</thead>
<tbody>
{#if grants.length === 0}
<tr><td colspan="3" class="quiet !py-[18px] text-center">暂无显式授权</td></tr>
{#if shown.length === 0}
<tr>
<td colspan="7" class="quiet !py-[18px] text-center">
{searchText.trim() === "" ? "暂无授权" : `无匹配「${searchText.trim()}」的授权`}
</td>
</tr>
{:else}
{#each grants as g (g.id)}
{#each shown as g (g.id)}
<tr>
<td>
<span class="inline-flex items-center gap-2">
<span class="flex text-ink-3"><Icon name={g.principalType === "USER" ? "user" : "group"} size={14} /></span>
<!-- 展示名优先(后端已解析);id 作为 title 供排查。 -->
<span class="font-medium" title={g.principalId}>{g.principalName}</span>
{#if g.isCreatorGrant}<span class="quiet">(创建者)</span>{/if}
</span>
<td class="whitespace-nowrap pr-4">
<a class="inline-flex items-center gap-2 text-ink hover:text-accent" href={principalHref(g)}>
<Avatar displayName={g.principalName} userId={g.principalId} size={26} />
<span class="flex items-center gap-1.5 text-[13px]">
{g.principalName ?? g.principalId}
{#if g.isCreatorGrant}<span class="quiet">(创建者)</span>{/if}
</span>
</a>
</td>
<td class="file-meta">{g.role}</td>
<td class="text-right">
<!-- 创建者授权不可动(契约 8.1);非 MANAGE 也不给收回入口。 -->
<td class="file-meta max-w-[230px] truncate pr-4 font-mono" title={g.principalType === "USER" ? g.principalId : ""}>
{g.principalType === "USER" ? g.principalId : "—"}
</td>
<td class="file-meta max-w-[230px] truncate pr-4 font-mono" title={g.principalOpenId ?? ""}>
{g.principalOpenId ?? "—"}
</td>
<td class="whitespace-nowrap pr-4"><span class="tag">{g.principalType === "USER" ? "个人" : "Group"}</span></td>
<td class="whitespace-nowrap pr-4">
<!-- 创建者授权不可动(契约 8.1);非 MANAGE 持有者只读。 -->
{#if !g.isCreatorGrant && canManage}
<select
class="select !w-[110px]"
value={g.role}
onchange={(e) => void changeRole(g, e.currentTarget.value as Role)}
>
{#each ROLES as r (r)}
<option value={r}>{ROLE_LABEL[r]}</option>
{/each}
</select>
{:else}
<span class="file-meta">{ROLE_LABEL[g.role]}</span>
{/if}
</td>
<td class="file-meta whitespace-nowrap pr-4">{fmtDate(g.createdAt)}</td>
<td class="whitespace-nowrap pr-2 text-right">
{#if !g.isCreatorGrant && canManage}
<button class="link-danger inline-flex items-center gap-1" onclick={() => void revoke(g)}>
<Icon name="minus" size={12} /> 收回
<Icon name="trash" size={12} /> 删除
</button>
{/if}
</td>
@@ -151,42 +309,73 @@
{/each}
{/if}
</tbody>
</table>
</table>
</div>
{/if}
</div>
{#if canManage}
<div class="my-3.5 border-t border-line-soft"></div>
<div class="section-title mb-2.5">新增授权</div>
<div class="flex flex-wrap items-center gap-2">
<select class="select !w-[110px]" bind:value={principalType} onchange={onTypeChange}>
<option value="USER">用户</option>
{#if showAdd}
<Modal title="添加授权" onclose={() => (showAdd = false)}>
<div class="form-row">
<label class="form-label" for="grant-type">类型</label>
<select id="grant-type" class="select" bind:value={principalType} onchange={onTypeChange}>
<option value="USER">个人</option>
<option value="GROUP">Group</option>
</select>
{#if principalType === "USER"}
<input class="input min-w-0 flex-1" placeholder="用户 id" bind:value={userIdInput} />
{:else if groupOptions === null}
<span class="quiet flex-1">加载 Group 列表…</span>
{:else if groupOptions.length === 0}
<span class="quiet flex-1">暂无可选 Group · 先到「Group 管理」建一个</span>
{:else}
<select class="select min-w-0 flex-1" bind:value={groupId}>
{#each groupOptions as g (g.id)}
<option value={g.id}>{g.breadcrumb}</option>
{/each}
</select>
{/if}
<select class="select !w-[110px]" bind:value={role}>
</div>
<div class="form-row">
<label class="form-label" for="grant-principal">{principalType === "USER" ? "用户" : "Group"}</label>
<input
id="grant-principal"
class="input"
placeholder={principalType === "USER" ? "搜索显示名 / openId" : "搜索组名"}
bind:value={principalQuery}
oninput={onQueryInput}
/>
</div>
{#if selectedPrincipal !== null}
<div class="form-row">
<span class="form-label">已选</span>
<span class="quiet self-center text-[12.5px]">
{selectedPrincipal.label}<span class="font-mono">({selectedPrincipal.id})</span>
</span>
</div>
{/if}
{#if principalOptions !== null && principalOptions.length > 0}
<div class="mb-3 max-h-[180px] overflow-y-auto rounded-lg border border-line-soft">
{#each principalOptions as o (o.id)}
<button class="block w-full px-3 py-2 text-left hover:bg-hover" onclick={() => pick(o)}>
<span class="block text-[13px] text-ink">{o.label}</span>
<span class="block font-mono text-[11px] text-ink-3">{o.sub}</span>
</button>
{/each}
</div>
{:else if searchUnavailable}
<div class="form-row">
<label class="form-label" for="grant-manual-id">主体 id</label>
<input
id="grant-manual-id"
class="input font-mono"
placeholder="无搜索权限,请直接填写 id"
bind:value={manualId}
/>
</div>
{:else if principalOptions !== null}
<div class="quiet mb-3 py-2 text-center text-[12px]">无匹配结果</div>
{/if}
<div class="form-row">
<label class="form-label" for="grant-role">权限</label>
<select id="grant-role" class="select" bind:value={role}>
{#each ROLES as r (r)}
<option value={r}>{r}</option>
<option value={r}>{ROLE_LABEL[r]}</option>
{/each}
</select>
</div>
<div class="mt-4 flex justify-end gap-2">
<button class="btn" onclick={() => (showAdd = false)}>取消</button>
<button class="btn btn-primary disabled:opacity-50" onclick={addGrant} disabled={saving}>
{saving ? "授予中…" : "授予"}
{saving ? "授予中…" : "添加"}
</button>
</div>
<div class="section-note mt-1.5">MANAGE 仅创建者可授;创建者授权不可动(契约 8.1)</div>
{/if}
</div>
</Modal>
{/if}
hub/filelib-web/src/lib/GridCard.svelte
+47
View File
@@ -0,0 +1,47 @@
<script lang="ts">
/**
* 网盘式大图标卡片:文件夹(琥珀填充)/项目(立方体描边)/文件(文档描边)。
* 单击选中、onopen(双击)、oncontextmenu(右键,回传光标坐标)。
*/
let {
kind,
name,
meta = null,
selected = false,
onselect,
onopen,
oncontextmenu,
}: {
kind: "FOLDER" | "PROJECT" | "FILE";
name: string;
meta?: string | null;
selected?: boolean;
onselect: () => void;
onopen: () => void;
oncontextmenu: (x: number, y: number) => void;
} = $props();
</script>
<button
class="flex cursor-pointer flex-col items-center gap-1.5 rounded-xl px-2 pb-2 pt-3 select-none {selected
? 'bg-selected'
: 'hover:bg-hover'}"
onclick={onselect}
ondblclick={onopen}
oncontextmenu={(e) => { e.preventDefault(); e.stopPropagation(); oncontextmenu(e.clientX, e.clientY); }}
title={name}
>
<span class="flex h-20 w-20 items-center justify-center">
{#if kind === "FOLDER"}
<svg width="72" height="72" viewBox="0 0 24 24" fill="#f5c94a" stroke="#d9a92b" stroke-width="0.6" stroke-linejoin="round"><path d="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" /></svg>
{:else if kind === "PROJECT"}
<svg width="66" height="66" viewBox="0 0 24 24" fill="#e8f0ea" stroke="#4a6741" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
{:else}
<svg width="60" height="60" viewBox="0 0 24 24" fill="#ffffff" stroke="#9c9b96" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z" /><path d="M14 3v5h5" /><path d="M9 13h6M9 17h6" /></svg>
{/if}
</span>
<span class="line-clamp-2 w-full break-all text-center text-[12.5px] leading-snug text-ink">{name}</span>
{#if meta !== null}
<span class="-mt-1 text-[10.5px] text-ink-3">{meta}</span>
{/if}
</button>
hub/filelib-web/src/lib/GridLibraryView.svelte
+527
View File
@@ -0,0 +1,527 @@
<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 { 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");
/* ------------------------------------------------------------ 数据加载 */
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>
</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}
hub/filelib-web/src/lib/GroupAdmin.svelte
+8 -1
View File
@@ -5,6 +5,7 @@
* 归档组展示与恢复 / 右键菜单 / 面包屑 / 统计条 / 成员表(头像·openId·加入时间)。
*/
import { onMount } from "svelte";
import { page } from "$app/state";
import { api } from "./api.js";
import { toastErr, toastOk } from "./stores.js";
import type { MemberGroupNode, MemberGroupMember, UserSearchResult } from "./types.js";
@@ -172,7 +173,13 @@
}
}
onMount(loadGroups);
onMount(async () => {
await loadGroups();
// 授权面板「成员」单元格跳转:?select=<groupId> 直接选中该组。
// 组不在列表(已归档且未开归档展示)时不动作,停留默认态。
const target = page.url.searchParams.get("select");
if (target !== null && groups.some((g) => g.id === target)) select(target);
});
function select(id: string): void {
selectedId = id;
hub/filelib-web/src/lib/Icon.svelte
+6
View File
@@ -16,6 +16,12 @@
layers: "m12 2 9 5-9 5-9-5 9-5Zm9 11-9 5-9-5m18 5-9 5-9-5",
clock: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm0-14v6l4 2",
minus: "M5 12h14",
download: "M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2",
refresh: "M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6",
arrowLeft: "M19 12H5m0 0 6 6m-6-6 6-6",
info: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm0-10v6m0-11v.5",
shield: "M12 3l8 3v6c0 4.5-3.2 7.7-8 9-4.8-1.3-8-4.5-8-9V6l8-3Z",
folder: "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",
// 已归档(软删)标记用;与"删除"区分 —— 数据仍在,只是打了 archivedAt。
archive: "M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Zm1-5h16l1 5H3l1-5Zm5 9h6",
restore: "M3 12a9 9 0 1 0 3-6.7M3 4v4.5h4.5",
hub/filelib-web/src/lib/LibraryView.svelte
+3 -3
View File
@@ -94,10 +94,10 @@
</div>
<div class="flex-1 overflow-y-auto px-2 py-2 text-[13px]">
{#if roots === null}
<div class="px-3 py-6 text-center text-xs text-ink-3">加载中…</div>
{:else if treeError}
{#if treeError}
<div class="px-3 py-6 text-center text-xs text-danger">{treeError}</div>
{:else if roots === null}
<div class="px-3 py-6 text-center text-xs text-ink-3">加载中…</div>
{:else if roots.length === 0}
<div class="px-3 py-6 text-center text-xs text-ink-3">
{$me?.isWebsiteAdmin ? "空文件库 · 点上方「+ 根目录」开始" : "文件库为空,请联系管理员创建根目录"}
hub/filelib-web/src/lib/Modal.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import type { Snippet } from "svelte";
let { title, onclose, children }: { title: string; onclose: () => void; children: Snippet } = $props();
let { title, onclose, children, maxW = 440 }: { title: string; onclose: () => void; children: Snippet; maxW?: number } = $props();
</script>
<div
@@ -9,7 +9,7 @@
role="presentation"
onclick={(e) => { if (e.target === e.currentTarget) onclose(); }}
>
<div class="w-full max-w-[440px] rounded-2xl border border-line-soft bg-panel p-6 shadow-[0_4px_20px_rgba(26,26,24,.07)]">
<div class="max-h-[88vh] w-full overflow-y-auto rounded-2xl border border-line-soft bg-panel p-6 shadow-[0_4px_20px_rgba(26,26,24,.07)]" style="max-width:{maxW}px">
<div class="mb-4 text-[15px] font-semibold">{title}</div>
{@render children()}
</div>
hub/filelib-web/src/lib/NodeDetailPanel.svelte
+3 -2
View File
@@ -2,6 +2,7 @@
import { api } from "./api.js";
import { currentNode, breadcrumb, bumpTree, clearSelectedFile, activeTab, restoreTab } from "./browser.js";
import { toastOk, toastErr } from "./stores.js";
import { ROLE_LABEL } from "./labels.js";
import OverviewPanel from "./OverviewPanel.svelte";
import FilesPanel from "./FilesPanel.svelte";
import GrantsPanel from "./GrantsPanel.svelte";
@@ -110,7 +111,7 @@
{#if node === null}
<div class="flex h-full items-center justify-center text-[13px] text-ink-3">从左侧选择一个文件夹或项目</div>
{:else}
<div class="mx-auto max-w-[880px] px-9 py-9">
<div class="mx-auto max-w-[1400px] px-9 py-9">
<div class="mb-2 text-[12.5px] text-ink-3">
{#each crumbs as c, i (i)}
{#if i > 0}<span class="mx-1 text-line">/</span>{/if}
@@ -122,7 +123,7 @@
<div class="flex items-center gap-2 text-[17px] font-semibold text-ink">
{node.name}
<span class="tag">{node.kind === "PROJECT" ? "项目" : "文件夹"}</span>
<span class="tag !border-line !text-ink-2">{node.role}</span>
<span class="tag !border-line !text-ink-2">{ROLE_LABEL[node.role]}</span>
</div>
<div class="flex gap-1.5">
{#if canEdit && node.kind === "FOLDER"}
hub/filelib-web/src/lib/OverviewPanel.svelte
+25 -23
View File
@@ -2,34 +2,35 @@
import { api } from "./api.js";
import { toastOk, toastErr } from "./stores.js";
import { currentNode } from "./browser.js";
import { ROLE_LABEL } from "./labels.js";
import type { ExportJob, NodeDetail } from "./types.js";
import Modal from "./Modal.svelte";
import Icon from "./Icon.svelte";
let { node }: { node: NodeDetail } = $props();
let { node, ondeleted }: { node: NodeDetail; ondeleted?: () => void } = $props();
let showEditDesc = $state(false);
let descDraft = $state("");
let exportJob = $state<ExportJob | null>(null);
let exporting = $state(false);
let deleting = $state(false);
const canEdit = $derived(node.role === "MANAGE" || node.role === "EDIT");
const canManage = $derived(node.role === "MANAGE");
const roleLabel = $derived(node.role === "MANAGE" ? "可管理" : node.role === "EDIT" ? "可编辑" : "只读");
const roleLabel = $derived(ROLE_LABEL[node.role]);
/** 独立权限开关(仅 PROJECT;关闭时只继承父级权限,创建者除外)。 */
async function toggleIndependent(): Promise<void> {
/** 删除(进回收站,可恢复;ADR-0031)。MANAGE 专属,与右键菜单同语义。 */
async function deleteNode(): Promise<void> {
if (!confirm(`删除「${node.name}」?移入回收站,可在回收站恢复。`)) return;
deleting = true;
try {
await api(`/database/api/projects/${node.id}/independent-permission`, {
method: "PUT",
body: { enabled: !node.independentPermission },
});
toastOk("已切换");
currentNode.update((n) =>
n !== null && n.id === node.id ? { ...n, independentPermission: !node.independentPermission } : n,
);
await api(`/database/api/nodes/${node.id}`, { method: "DELETE" });
toastOk("已移入回收站");
ondeleted?.();
} catch (e) {
toastErr(e instanceof Error ? e.message : String(e));
} finally {
deleting = false;
}
}
@@ -143,18 +144,8 @@
<div>更新时间 <b class="font-semibold text-ink">{new Date(node.updatedAt).toLocaleString("zh-CN")}</b></div>
</div>
<!-- 独立权限与导出都只对 PROJECT 有意义(FOLDER 是透明组织节点,ADR-0021)。 -->
<!-- 导出只对 PROJECT 有意义(FOLDER 是透明组织节点,ADR-0021)。 -->
{#if node.kind === "PROJECT"}
<div class="my-4 border-t border-line-soft"></div>
<div class="flex flex-wrap items-center gap-2.5">
<span class="quiet">独立权限</span>
<b class="text-[13px]">{node.independentPermission ? "开启" : "关闭"}</b>
{#if canManage}
<button class="btn" onclick={toggleIndependent}>{node.independentPermission ? "关闭" : "开启"}</button>
{/if}
<span class="quiet">关闭时仅继承父级权限(创建者除外)</span>
</div>
<div class="my-4 border-t border-line-soft"></div>
<div class="section-title mb-2">导出</div>
@@ -172,6 +163,17 @@
{/if}
</div>
{/if}
{#if canManage}
<div class="my-4 border-t border-line-soft"></div>
<div class="flex items-center justify-between">
<span class="quiet">删除后移入回收站,可恢复</span>
<button class="btn btn-danger disabled:opacity-50" onclick={deleteNode} disabled={deleting}>
{deleting ? "删除中…" : `删除此${node.kind === "PROJECT" ? "项目" : "文件夹"}`}
</button>
</div>
{/if}
</div>
{#if showEditDesc}
hub/filelib-web/src/lib/TreeNode.svelte
+2 -1
View File
@@ -3,6 +3,7 @@
import { api } from "./api.js";
import { expanded, currentNode, breadcrumb, toggleExpanded, treeVersion } from "./browser.js";
import { toastErr } from "./stores.js";
import { ROLE_LABEL } from "./labels.js";
import type { BreadcrumbEntry, NodeChild, NodeDetail } from "./types.js";
let { node, depth }: { node: NodeChild; depth: number } = $props();
@@ -64,7 +65,7 @@
</span>
<span class="truncate">{node.name}</span>
{#if node.role !== "MANAGE"}
<span class="ml-auto pr-1 font-mono text-[10px] text-ink-3">{node.role}</span>
<span class="ml-auto pr-1 text-[10px] text-ink-3">{ROLE_LABEL[node.role]}</span>
{/if}
</div>
hub/filelib-web/src/lib/labels.ts
+10
View File
@@ -0,0 +1,10 @@
/** 展示层文案(与 API 枚举值解耦;传参仍用英文枚举)。 */
import type { Role } from "./types.js";
/** 文件库权限级(契约 8.1 MANAGE>EDIT>VIEW)的中文展示名。 */
export const ROLE_LABEL: Record<Role, string> = {
VIEW: "只读",
EDIT: "可编辑",
MANAGE: "可管理",
};
hub/filelib-web/src/lib/types.ts
+23 -5
View File
@@ -18,6 +18,8 @@ export interface BreadcrumbEntry {
readonly id: string | null;
readonly name: string | null;
readonly kind: NodeKind;
/** 该节点对调用者的 effective role;无 View 为 null。 */
readonly role: Role | null;
}
export interface NodeDetail {
@@ -28,7 +30,6 @@ export interface NodeDetail {
readonly description: string | null;
readonly role: Role;
readonly provisionStatus: "PROVISIONING" | "READY" | "FAILED";
readonly independentPermission: boolean;
readonly createdAt: string;
readonly updatedAt: string;
}
@@ -81,6 +82,13 @@ export interface ExportJob {
readonly createdAt: string;
}
export interface GroupSearchResult {
readonly id: string;
readonly name: string;
readonly breadcrumb: string;
}
/** 成员组(ADR-0028);后端返回扁平列表,前端按 parentId/depth 拼树。 */
export interface MemberGroupNode {
readonly id: string;
@@ -108,8 +116,10 @@ export interface Grant {
readonly id: string;
readonly principalType: "USER" | "GROUP";
readonly principalId: string;
/** 后端解析好的展示名(USER→displayName / GROUP→组名);取不到行时回落为 principalId。 */
readonly principalName: string;
/** 主体显示名(用户 displayName / 组 name);主体已删为 null,展示回落 principalId。 */
readonly principalName: string | null;
/** USER 主体的飞书 openId;GROUP 或主体已删为 null。 */
readonly principalOpenId: string | null;
readonly role: Role;
/** 创建者授权不可收回、不可改(契约 8.1)。 */
readonly isCreatorGrant: boolean;
@@ -132,9 +142,17 @@ export interface UserSearchResult {
readonly avatarUrl: string | null;
}
/** 回收站条目(GET /database/api/bin)。 */
export interface BinEntry {
readonly id: string;
readonly parentId: string | null;
readonly kind: NodeKind;
readonly name: string;
readonly deletedAt: string;
}
/** 管理后台概览统计(GET /database/api/stats)。 */
export interface DashboardStats {
readonly folders: number;
export interface DashboardStats { readonly folders: number;
readonly projects: number;
readonly files: number;
readonly grants: number;
hub/filelib-web/src/routes/app/+page.svelte
+55 -6
View File
@@ -1,21 +1,70 @@
<script lang="ts">
/** 老师端。未登录显示登录卡片;登录后直接是文件库浏览器。 */
/** 老师端。未登录显示登录卡片;登录后是带左栏导航的文件库(ADR-0031)。 */
import { onMount } from "svelte";
import { me, authChecked } from "$lib/stores.js";
import { loadSession } from "$lib/session.js";
import { loadSession, logout } from "$lib/session.js";
import LoginView from "$lib/LoginView.svelte";
import LibraryView from "$lib/LibraryView.svelte";
import GridLibraryView from "$lib/GridLibraryView.svelte";
import BinView from "$lib/BinView.svelte";
import Icon from "$lib/Icon.svelte";
onMount(loadSession);
type View = "library" | "bin";
let view = $state<View>("library");
const tabs: ReadonlyArray<readonly [View, string, "layers" | "trash"]> = [
["library", "文件库", "layers"],
["bin", "回收站", "trash"],
];
const initial = $derived(($me?.displayName ?? $me?.userId ?? "U").slice(0, 1).toUpperCase());
</script>
<svelte:head><title>文件库</title></svelte:head>
<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 class="flex h-full">
<!-- 左栏导航(ADR-0031) -->
<nav class="flex w-[240px] shrink-0 flex-col border-r border-line-soft bg-sidebar px-3 py-4">
<!-- 标题 -->
<div class="mb-3 px-1 text-[15px] font-bold text-ink">教研数据库</div>
<div class="mb-2 border-t border-line-soft"></div>
<!-- 导航项 -->
<div class="flex flex-1 flex-col gap-0.5">
{#each tabs as [id, label, icon] (id)}
<button
class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-left text-[13px] transition {view === id
? 'bg-selected font-semibold text-ink'
: 'text-ink-2 hover:bg-hover'}"
onclick={() => (view = id)}
>
<span class="text-ink-3"><Icon name={icon} size={15} /></span>
{label}
</button>
{/each}
</div>
<!-- 底部:用户身份 + 退出 -->
<div class="mt-auto flex items-center gap-2 border-t border-line-soft pt-3">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-white">{initial}</span>
<span class="min-w-0 flex-1 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>
</nav>
{#if view === "library"}
<GridLibraryView />
{:else}
<BinView />
{/if}
</div>
{:else}
<LoginView />
hub/filelib-web/src/routes/database/dashboard/users/+page.svelte
+37 -5
View File
@@ -7,10 +7,12 @@
* 这里管的是 org 成员与其角色。
*/
import { onMount } from "svelte";
import { page } from "$app/state";
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";
import Icon from "$lib/Icon.svelte";
const ROLE_LABEL: Record<OrgRole, string> = {
OWNER: "所有者",
@@ -23,6 +25,9 @@
let members = $state<OrgMember[] | null>(null);
let error = $state<string | null>(null);
// 列表过滤;授权面板跳转会带 ?q=<userId>,以此为初始过滤词。
let filterText = $state(page.url.searchParams.get("q") ?? "");
let newOpenId = $state("");
let newName = $state("");
let newRole = $state<OrgRole>("MEMBER");
@@ -30,6 +35,19 @@
const base = $derived(orgSlug === null ? null : `/api/org/${encodeURIComponent(orgSlug)}`);
/** 按显示名 / userId / openId 过滤(纯前端;成员全量在手)。 */
const shown = $derived.by((): OrgMember[] | null => {
if (members === null) return null;
const q = filterText.trim().toLowerCase();
if (q === "") return members;
return members.filter(
(m) =>
m.displayName.toLowerCase().includes(q) ||
m.userId.toLowerCase().includes(q) ||
m.feishuOpenId.toLowerCase().includes(q),
);
});
async function load(): Promise<void> {
if (base === null) return;
try {
@@ -121,14 +139,28 @@
</div>
<div class="panel">
<div class="section-title mb-2.5">成员列表</div>
<div class="mb-2.5 flex items-center justify-between gap-2">
<div class="section-title">成员列表</div>
<div class="relative w-[260px] shrink-0">
<span class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-3">
<Icon name="search" size={13} />
</span>
<input
class="input w-full !py-[5px] !pl-8 !text-[12.5px]"
placeholder="过滤:名称 / userId / openId"
bind:value={filterText}
/>
</div>
</div>
{#if error}
<div class="py-3 text-[12.5px] text-danger">{error}</div>
{:else if members === null}
{:else if shown === null}
<div class="quiet py-[18px] text-center">加载中…</div>
{:else if members.length === 0}
<div class="quiet py-[18px] text-center">暂无成员</div>
{:else if shown.length === 0}
<div class="quiet py-[18px] text-center">
{filterText.trim() === "" ? "暂无成员" : `无匹配「${filterText.trim()}」的成员`}
</div>
{:else}
<table class="list">
<thead>
@@ -140,7 +172,7 @@
</tr>
</thead>
<tbody>
{#each members as m (m.userId)}
{#each shown as m (m.userId)}
<tr>
<td class="text-ink">{m.displayName || m.userId}</td>
<td class="file-meta">{m.userId}</td>