curriculum-project-hub/hub/filelib-web/src/lib/LibraryView.svelte

<script lang="ts">
  /**
   * 文件库浏览器(树 + 详情 + 文件编辑栏)。
   *
   * 两处复用:老师端 /app(showUserFooter=true,侧栏底部带身份与退出)
   * 与管理后台 /database/dashboard/library(false —— 外层壳已有身份区)。
   */
  import { onMount } from "svelte";
  import { api } from "./api.js";
  import { me, toastErr, toastOk } from "./stores.js";
  import { logout } from "./session.js";
  import { treeVersion, bumpTree, currentNode, selectedFilePath, clearSelectedFile, bumpFiles } from "./browser.js";
  import type { NodeChild } from "./types.js";
  import TreeNode from "./TreeNode.svelte";
  import NodeDetailPanel from "./NodeDetailPanel.svelte";
  import FileEditor from "./FileEditor.svelte";
  import Modal from "./Modal.svelte";

  let { showUserFooter = false }: { showUserFooter?: boolean } = $props();

  let roots = $state<NodeChild[] | null>(null);
  let treeError = $state<string | null>(null);
  let showCreateRoot = $state(false);
  let newName = $state("");
  let newKind = $state<"FOLDER" | "PROJECT">("FOLDER");
  let newDesc = $state("");

  async function loadRoots(): Promise<void> {
    try {
      const r = await api<{ nodes: NodeChild[] }>("/database/api/nodes");
      roots = r.nodes;
      treeError = null;
    } catch (e) {
      treeError = e instanceof Error ? e.message : String(e);
    }
  }

  onMount(loadRoots);
  $effect(() => {
    void $treeVersion;
    void loadRoots();
  });

  async function createRoot(): Promise<void> {
    const name = newName.trim();
    if (name === "") return;
    try {
      await api("/database/api/nodes", {
        method: "POST",
        body: {
          parentId: null,
          kind: newKind,
          name,
          ...(newDesc.trim() !== "" ? { description: newDesc.trim() } : {}),
        },
      });
      toastOk("已创建");
      showCreateRoot = false;
      newName = ""; newKind = "FOLDER"; newDesc = "";
      bumpTree();
    } catch (e) {
      toastErr(e instanceof Error ? e.message : String(e));
    }
  }

  const initial = $derived(($me?.userId ?? "U").slice(0, 1).toUpperCase());
</script>

<div class="flex min-h-0 flex-1">
  <!-- 侧栏 -->
  <aside class="flex w-[300px] shrink-0 flex-col border-r border-line-soft bg-sidebar">
    <div class="flex items-center justify-between border-b border-line-soft px-4 py-3.5">
      <span class="text-[15px] font-semibold text-ink">文件库</span>
      {#if $me?.isWebsiteAdmin}
        <button class="btn btn-sm" onclick={() => (showCreateRoot = true)}>
          + 根目录
        </button>
      {/if}
    </div>

    <div class="flex-1 overflow-y-auto px-2 py-2 text-[13px]">
      {#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 ? "空文件库 · 点上方「+ 根目录」开始" : "文件库为空,请联系管理员创建根目录"}
        </div>
      {:else}
        {#each roots as node (node.id)}
          <TreeNode {node} depth={0} />
        {/each}
      {/if}
    </div>

    {#if showUserFooter}
      <div class="flex items-center gap-2 border-t border-line-soft px-4 py-3 text-[12.5px]">
        <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-white">{initial}</div>
        <span class="flex-1 truncate text-ink">{$me?.userId ?? ""}</span>
        <button class="rounded-lg border border-line-soft px-2.5 py-1 text-[11.5px] text-ink-3 transition hover:bg-hover hover:text-ink" onclick={logout} title="退出登录">退出</button>
      </div>
    {/if}
  </aside>

  <!-- 主区 -->
  <main class="flex-1 overflow-y-auto">
    <NodeDetailPanel />
  </main>

  <!-- 右侧:文件预览/编辑栏(选中文件时出现) -->
  {#if $selectedFilePath && $currentNode?.kind === "PROJECT"}
    <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={$currentNode.id}
        path={$selectedFilePath}
        role={$currentNode.role}
        onchanged={bumpFiles}
        onclose={clearSelectedFile}
      />
    </section>
  {/if}
</div>

{#if showCreateRoot}
  <Modal title="新建根目录" onclose={() => (showCreateRoot = false)}>
    <div class="form-row">
      <label class="form-label" for="root-name">名称</label>
      <input id="root-name" class="input" bind:value={newName} placeholder="例如:物理教研" />
    </div>
    <div class="form-row">
      <label class="form-label" for="root-kind">类型</label>
      <select id="root-kind" class="select" bind:value={newKind}>
        <option value="FOLDER">文件夹</option>
        <option value="PROJECT">项目(课程资源库)</option>
      </select>
    </div>
    <div class="form-row">
      <label class="form-label" for="root-desc">简介(可选)</label>
      <textarea id="root-desc" rows="3" class="textarea" bind:value={newDesc} placeholder="简要说明用途…"></textarea>
    </div>
    <div class="mt-4 flex justify-end gap-2">
      <button class="btn" onclick={() => (showCreateRoot = false)}>取消</button>
      <button class="btn btn-primary" onclick={createRoot}>创建</button>
    </div>
  </Modal>
{/if}