feat(filelib): 老师端左栏导航:回收站 + 最近打开(ADR-0031)

- 回收站:listBin(祖先全活跃的已删顶点;管理员/直连 MANAGE 可见)、 restore(与 D15 对称只清本节点,落审计)、purge(仅管理员,pathIds 枚举子树按深度降序分批硬删,绕过 self-FK RESTRICT) - 最近打开:FileLibRecentVisit 表(filePath='' 兜底 PG 唯一索引),客户端成功打开后上报(VIEW 门禁,upsert 刷新),列表 20 条,D8/D15 可见性过滤 - 前端:/app 左栏(文件库/最近打开/回收站);RecentView/BinView; GridLibraryView 埋点 + navTarget 跳转(breadcrumb 建栈,role 已捎带) - 测试:filelib-nav 集成 4 例;全套 79 例绿
2026-07-31 13:27:04 +08:00
parent 04fa383286
commit d072e9ec1e
17 changed files with 998 additions and 17 deletions
@@ -0,0 +1,103 @@
+<script lang="ts">
+  /**
+   * 回收站(ADR-0031):祖先全活跃的已删节点顶;恢复只清本节点 deletedAt;
+   * 彻底删除(整支硬删)仅网站管理员,二次确认。
+   */
+  import { onMount } from "svelte";
+  import { api } from "./api.js";
+  import { me, 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 {
+      await api(`/database/api/bin/${encodeURIComponent(e.id)}/restore`, { method: "POST" });
+      toastOk(`已恢复「${e.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>
+          {#if $me?.isWebsiteAdmin}
+            <button
+              class="btn btn-sm btn-danger disabled:opacity-50"
+              onclick={() => void purge(e)}
+              disabled={busyId === e.id}
+            >
+              <Icon name="trash" size={12} /> 彻底删除
+            </button>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
@@ -23,14 +23,23 @@
  import GrantsPanel from "./GrantsPanel.svelte";
  import OverviewPanel from "./OverviewPanel.svelte";

+  /** 最近打开上报的导航目标(ADR-0031):父组件传入后,本组件跳到对应节点并清除。 */
+  export interface NavTarget {
+    readonly nodeId: string;
+    readonly filePath?: string | undefined;
+  }
+
+  let { navTarget = null, onnavigated }: { navTarget?: NavTarget | null; onnavigated?: () => void } = $props();
+
  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<NodeChild[]>([]);
+  let stack = $state<StackItem[]>([]);
  let children = $state<NodeChild[] | null>(null);
  let nodesError = $state<string | null>(null);

@@ -48,7 +57,7 @@
  let createParentId = $state<string | null>(null);
  let formName = $state("");
  let formDesc = $state("");
-  let renameTarget = $state<NodeChild | null>(null);
+  let renameTarget = $state<StackItem | null>(null);
  let detailNode = $state<NodeDetail | null>(null);
  let newPath = $state("");
  let newContent = $state("");
@@ -98,6 +107,14 @@

  onMount(loadChildren);

+  /** 最近打开上报(ADR-0031):fire-and-forget,失败静默,不阻塞浏览。 */
+  function record(nodeId: string, filePath?: string): void {
+    void api("/database/api/recent", {
+      method: "POST",
+      body: { nodeId, ...(filePath !== undefined ? { filePath } : {}) },
+    }).catch(() => undefined);
+  }
+
  function refresh(): void {
    selected = null;
    menu = null;
@@ -107,8 +124,9 @@

  /* ------------------------------------------------------------ 导航 */

-  function openNode(n: NodeChild): void {
+  function openNode(n: StackItem): void {
    selected = null;
+    record(n.id);
    if (n.kind === "FOLDER") {
      stack = [...stack, n];
      void loadChildren();
@@ -156,6 +174,43 @@
    void loadChildren();
  }

+  /** 跳到任意节点(最近打开入口):breadcrumb 建栈,FOLDER 进子层,PROJECT 进文件视图。 */
+  async function navigateTo(target: NavTarget): Promise<void> {
+    try {
+      const r = await api<{ breadcrumb: Array<{ id: string | null; name: string | null; kind: "FOLDER" | "PROJECT"; role: Role | null }> }>(
+        `/database/api/nodes/${target.nodeId}/breadcrumb`,
+      );
+      const visible = r.breadcrumb.filter(
+        (e): e is { id: string; name: string; kind: "FOLDER" | "PROJECT"; role: Role | null } =>
+          e.id !== null && e.name !== null,
+      );
+      if (visible.length === 0) return;
+      const self = visible[visible.length - 1]!;
+      selected = null;
+      if (self.kind === "FOLDER") {
+        view = "nodes";
+        projectNode = null;
+        clearSelectedFile();
+        stack = visible.map((e) => ({ id: e.id, name: e.name, kind: e.kind, role: e.role ?? "VIEW" }));
+        await loadChildren();
+      } else {
+        stack = visible.slice(0, -1).map((e) => ({ id: e.id, name: e.name, kind: e.kind, role: e.role ?? "VIEW" }));
+        projectNode = await fetchDetail(self.id);
+        view = "files";
+        await loadFiles();
+        if (target.filePath !== undefined) selectedFilePath.set(target.filePath);
+      }
+    } catch (e) {
+      toastErr(errText(e));
+    }
+  }
+
+  $effect(() => {
+    if (navTarget === null) return;
+    const t = navTarget;
+    void navigateTo(t).finally(() => onnavigated?.());
+  });
+
  /* ------------------------------------------------------------ 节点操作 */

  function openCreate(kind: "FOLDER" | "PROJECT", parentId: string | null): void {
@@ -190,7 +245,7 @@
    }
  }

-  function openRename(n: NodeChild): void {
+  function openRename(n: StackItem): void {
    renameTarget = n;
    formName = n.name;
    modal = "rename";
@@ -213,7 +268,7 @@
    }
  }

-  async function removeNode(n: NodeChild): Promise<void> {
+  async function removeNode(n: StackItem): Promise<void> {
    if (!confirm(`删除「${n.name}」?软删除后不可见。`)) return;
    try {
      await api(`/database/api/nodes/${n.id}`, { method: "DELETE" });
@@ -224,7 +279,7 @@
    }
  }

-  async function openGrants(n: NodeChild): Promise<void> {
+  async function openGrants(n: StackItem): Promise<void> {
    try {
      detailNode = await fetchDetail(n.id);
      modal = "grants";
@@ -233,7 +288,7 @@
    }
  }

-  async function openDetail(n: NodeChild): Promise<void> {
+  async function openDetail(n: StackItem): Promise<void> {
    try {
      detailNode = await fetchDetail(n.id);
      modal = "detail";
@@ -244,6 +299,11 @@

  /* ------------------------------------------------------------ 文件操作 */

+  function previewFile(f: FileEntry): void {
+    if (projectNode !== null) record(projectNode.id, f.path);
+    selectedFilePath.set(f.path);
+  }
+
  async function submitNewFile(): Promise<void> {
    if (projectNode === null) return;
    const path = newPath.trim();
@@ -285,7 +345,7 @@

  /* ------------------------------------------------------------ 右键菜单 */

-  function nodeMenuItems(n: NodeChild): MenuItem[] {
+  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) });
@@ -305,7 +365,7 @@

  function fileMenuItems(f: FileEntry): MenuItem[] {
    const items: MenuItem[] = [
-      { label: "打开预览", icon: "chevron", onclick: () => selectedFilePath.set(f.path) },
+      { label: "打开预览", icon: "chevron", onclick: () => previewFile(f) },
      {
        label: "下载",
        icon: "download",
@@ -441,7 +501,7 @@
                meta="{f.size} B"
                selected={selected === f.path}
                onselect={() => (selected = f.path)}
-                onopen={() => selectedFilePath.set(f.path)}
+                onopen={() => previewFile(f)}
                oncontextmenu={(x, y) => (menu = { x, y, items: fileMenuItems(f) })}
              />
            {/each}
@@ -21,6 +21,7 @@
    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",
@@ -0,0 +1,67 @@
+<script lang="ts">
+  /**
+   * 最近打开(ADR-0031):本人最近 20 条,点击跳回文件库对应位置
+   * (经 onopen 把导航目标交给外层,由 GridLibraryView 建栈跳转)。
+   */
+  import { onMount } from "svelte";
+  import { api } from "./api.js";
+  import type { RecentEntry } from "./types.js";
+  import Icon from "./Icon.svelte";
+
+  let { onopen }: { onopen: (target: { nodeId: string; filePath?: string }) => void } = $props();
+
+  let entries = $state<RecentEntry[] | null>(null);
+  let error = $state<string | null>(null);
+
+  onMount(async () => {
+    try {
+      const r = await api<{ entries: RecentEntry[] }>("/database/api/recent");
+      entries = r.entries;
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  });
+
+  function fmt(iso: string): string {
+    try {
+      return new Date(iso).toLocaleString("zh-CN", { dateStyle: "medium", timeStyle: "short" });
+    } catch {
+      return iso;
+    }
+  }
+
+  function iconOf(e: RecentEntry): "folder" | "layers" | "chevron" {
+    if (e.filePath !== "") return "chevron";
+    return e.kind === "FOLDER" ? "folder" : "layers";
+  }
+</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.nodeId + "/" + e.filePath)}
+        <button
+          class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition hover:bg-hover"
+          onclick={() => onopen({ nodeId: e.nodeId, ...(e.filePath !== "" ? { filePath: e.filePath } : {}) })}
+        >
+          <span class="flex text-ink-3"><Icon name={iconOf(e)} size={15} /></span>
+          <span class="min-w-0 flex-1">
+            <span class="block truncate text-[13px] text-ink">{e.name}</span>
+            {#if e.filePath !== ""}
+              <span class="block truncate font-mono text-[11px] text-ink-3">{e.filePath}</span>
+            {/if}
+          </span>
+          <span class="quiet shrink-0">{fmt(e.openedAt)}</span>
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
@@ -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 {
@@ -130,9 +132,27 @@ export interface UserSearchResult {
  readonly avatarUrl: string | null;
 }

+/** 最近打开条目(GET /database/api/recent)。 */
+export interface RecentEntry {
+  readonly nodeId: string;
+  readonly kind: NodeKind;
+  readonly name: string;
+  /** "" = 节点本身;非空 = 项目内文件路径。 */
+  readonly filePath: string;
+  readonly openedAt: string;
+}
+
+/** 回收站条目(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;
@@ -1,12 +1,30 @@
 <script lang="ts">
-  /** 老师端。未登录显示登录卡片;登录后是网盘式文件库浏览器。 */
+  /** 老师端。未登录显示登录卡片;登录后是带左栏导航的文件库(ADR-0031)。 */
  import { onMount } from "svelte";
  import { me, authChecked } from "$lib/stores.js";
  import { loadSession } from "$lib/session.js";
  import LoginView from "$lib/LoginView.svelte";
-  import GridLibraryView from "$lib/GridLibraryView.svelte";
+  import GridLibraryView, { type NavTarget } from "$lib/GridLibraryView.svelte";
+  import RecentView from "$lib/RecentView.svelte";
+  import BinView from "$lib/BinView.svelte";
+  import Icon from "$lib/Icon.svelte";

  onMount(loadSession);
+
+  type View = "library" | "recent" | "bin";
+  let view = $state<View>("library");
+  let navTarget = $state<NavTarget | null>(null);
+
+  function openFromRecent(target: NavTarget): void {
+    navTarget = target;
+    view = "library";
+  }
+
+  const tabs: ReadonlyArray<readonly [View, string, "layers" | "clock" | "trash"]> = [
+    ["library", "文件库", "layers"],
+    ["recent", "最近打开", "clock"],
+    ["bin", "回收站", "trash"],
+  ];
 </script>

 <svelte:head><title>文件库</title></svelte:head>
@@ -14,8 +32,29 @@
 {#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">
-    <GridLibraryView />
+  <div class="flex h-full">
+    <!-- 左栏导航(ADR-0031) -->
+    <nav class="flex w-[168px] shrink-0 flex-col gap-0.5 border-r border-line-soft bg-sidebar px-2.5 py-3.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}
+    </nav>
+
+    {#if view === "library"}
+      <GridLibraryView {navTarget} onnavigated={() => (navTarget = null)} />
+    {:else if view === "recent"}
+      <RecentView onopen={openFromRecent} />
+    {:else}
+      <BinView />
+    {/if}
  </div>
 {:else}
  <LoginView />