forked from EduCraft/curriculum-project-hub
feat(filelib-web): 老师端文件库改网盘式网格浏览(下钻导航+右键菜单)
- 新 GridLibraryView:双击下钻文件夹/项目,面包屑+返回跳级,项目内文件同网格, 双击进 FileEditor 预览;工具条按上下文出新建文件夹/项目/文件 - 右键菜单(ContextMenu):打开/新建子文件夹/重命名/授权管理/详情/删除, 按节点 role 动态显隐;文件菜单:打开预览/下载/删除;空白处右键出新建+刷新 - GridCard 大图标卡片(琥珀文件夹/立方体项目/文档文件);授权与详情复用 GrantsPanel/OverviewPanel(Modal 加 maxW prop);Icon 补 5 个图标 - 管理后台 /database 保留树状 LibraryView 不动;后端零改动
This commit is contained in:
ymy
@@ -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>
|
||||
@@ -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(); oncontextmenu(e.clientX, e.clientY); }}
|
||||
title={name}
|
||||
>
|
||||
<span class="flex h-14 w-14 items-center justify-center">
|
||||
{#if kind === "FOLDER"}
|
||||
<svg width="54" height="54" 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="50" height="50" 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="46" height="46" 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>
|
||||
@@ -0,0 +1,534 @@
|
||||
<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";
|
||||
|
||||
let view = $state<View>("nodes");
|
||||
/** 下钻栈(均为 FOLDER;根层为空栈)。 */
|
||||
let stack = $state<NodeChild[]>([]);
|
||||
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<NodeChild | 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: NodeChild): 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: NodeChild): 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: NodeChild): 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: NodeChild): Promise<void> {
|
||||
try {
|
||||
detailNode = await fetchDetail(n.id);
|
||||
modal = "grants";
|
||||
} catch (e) {
|
||||
toastErr(errText(e));
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetail(n: NodeChild): Promise<void> {
|
||||
try {
|
||||
detailNode = await fetchDetail(n.id);
|
||||
modal = "detail";
|
||||
} catch (e) {
|
||||
toastErr(errText(e));
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ 文件操作 */
|
||||
|
||||
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: NodeChild): 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: () => selectedFilePath.set(f.path) },
|
||||
{
|
||||
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(118px,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(118px,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={() => selectedFilePath.set(f.path)}
|
||||
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} />
|
||||
</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}
|
||||
@@ -16,6 +16,11 @@
|
||||
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",
|
||||
// 已归档(软删)标记用;与"删除"区分 —— 数据仍在,只是打了 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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<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";
|
||||
import GridLibraryView from "$lib/GridLibraryView.svelte";
|
||||
|
||||
onMount(loadSession);
|
||||
</script>
|
||||
@@ -15,7 +15,7 @@
|
||||
<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 />
|
||||
<GridLibraryView />
|
||||
</div>
|
||||
{:else}
|
||||
<LoginView />
|
||||
|
||||
Reference in New Issue
Block a user