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

<script lang="ts">
  import { api } from "./api.js";
  import { toastOk, toastErr } from "./stores.js";
  import { selectedFilePath, filesVersion } from "./browser.js";
  import { loadConfig } from "./config.js";
  import type { FileEntry, NodeDetail } from "./types.js";
  import Modal from "./Modal.svelte";
  import Icon from "./Icon.svelte";

  let { node }: { node: NodeDetail } = $props();

  let files = $state<FileEntry[] | null>(null);
  let loadError = $state<string | null>(null);
  let showNewFile = $state(false);
  let newPath = $state("");
  let newContent = $state("");
  let newMessage = $state("");
  // 上传弹窗:选完文件先暂存,等用户确认路径与 commit 信息再传。
  let pendingFile = $state<File | null>(null);
  let uploadPath = $state("");
  let uploadMessage = $state("");
  let uploading = $state(false);
  // bind:this 的目标要用 $state,否则 svelte 5 warn 不会正确更新。
  let uploadInput = $state<HTMLInputElement | null>(null);
  /** 上传上限由 /database/config 下发(后端 HUB_FILELIB_MAX_FILE_BYTES)。 */
  let maxFileBytes = $state<number | null>(null);

  const maxLabel = $derived(
    maxFileBytes === null ? "" : `${(maxFileBytes / 1024 / 1024).toFixed(maxFileBytes % (1024 * 1024) === 0 ? 0 : 1)}MB`,
  );

  const canEdit = $derived(node.role !== "VIEW");

  async function loadFiles(): Promise<void> {
    try {
      const r = await api<{ files: FileEntry[] }>(`/database/api/projects/${node.id}/files`);
      files = r.files;
      loadError = null;
    } catch (e) {
      loadError = e instanceof Error ? e.message : String(e);
    }
  }

  $effect(() => {
    void node.id;
    void $filesVersion;
    void loadFiles();
  });

  $effect(() => {
    void loadConfig()
      .then((c) => (maxFileBytes = c.maxFileBytes))
      .catch(() => (maxFileBytes = null));
  });

  async function submitNewFile(): Promise<void> {
    const path = newPath.trim();
    if (path === "") return;
    const message = newMessage.trim();
    try {
      await api(`/database/api/projects/${node.id}/file`, {
        method: "PUT",
        // message 缺失时不传 —— 后端回退到【用户名】修改了【路径】。
        body: message === "" ? { path, content: newContent } : { path, content: newContent, message },
      });
      toastOk("已创建");
      showNewFile = false;
      newPath = ""; newContent = ""; newMessage = "";
      await loadFiles();
    } catch (e) {
      toastErr(e instanceof Error ? e.message : String(e));
    }
  }

  function u8ToBase64(bytes: Uint8Array): string {
    let bin = "";
    const CHUNK = 0x8000;
    for (let i = 0; i < bytes.length; i += CHUNK) {
      bin += String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + CHUNK)) as unknown as number[]);
    }
    return btoa(bin);
  }

  /** 选文件只负责暂存与预填;真正上传在弹窗确认后。 */
  function pickFile(e: Event): void {
    const input = e.target as HTMLInputElement;
    const file = input.files?.[0];
    input.value = "";
    if (!file) return;
    // 上限取后端值;拉不到就不在前端拦 —— 后端横竖会以 413 file_too_large 兼底,
    // 前端这道只是省一次往返。
    if (maxFileBytes !== null && file.size > maxFileBytes) {
      toastErr(`文件超过 ${maxLabel} 上限`);
      return;
    }
    pendingFile = file;
    uploadPath = `材料/${file.name}`;
    uploadMessage = "";
  }

  function cancelUpload(): void {
    pendingFile = null;
    uploadPath = "";
    uploadMessage = "";
  }

  async function submitUpload(): Promise<void> {
    const file = pendingFile;
    const targetPath = uploadPath.trim();
    if (file === null || targetPath === "") return;
    uploading = true;
    try {
      const bytes = new Uint8Array(await file.arrayBuffer());
      const isBinary = bytes.includes(0);
      const message = uploadMessage.trim();
      const body: Record<string, string> = isBinary
        ? { path: targetPath, content: u8ToBase64(bytes), encoding: "base64" }
        : { path: targetPath, content: new TextDecoder("utf-8").decode(bytes), encoding: "utf8" };
      // message 缺失时不传 —— 后端回退到【用户名】修改了【路径】。
      if (message !== "") body["message"] = message;
      await api(`/database/api/projects/${node.id}/file`, { method: "PUT", body });
      toastOk(`已上传 ${file.name}`);
      cancelUpload();
      await loadFiles();
    } catch (err) {
      toastErr(err instanceof Error ? err.message : String(err));
    } finally {
      uploading = false;
    }
  }
</script>

<div class="panel">
  <div class="mb-1.5 flex items-center justify-between">
    <div class="section-title">项目文件({files?.length ?? 0})</div>
    {#if canEdit}
      <div class="flex gap-1.5">
        <button class="btn" onclick={() => (showNewFile = true)}><Icon name="plus" size={13} /> 新建文件</button>
        <button class="btn btn-primary" onclick={() => uploadInput?.click()}>上传文件</button>
        <input bind:this={uploadInput} type="file" class="hidden" onchange={pickFile} />
      </div>
    {/if}
  </div>

  {#if files === null && loadError === null}
    <div class="quiet py-5 text-center">加载中…</div>
  {:else if loadError}
    <div class="py-5 text-center text-xs text-danger">{loadError}</div>
  {:else if files && files.length === 0}
    <div class="quiet py-5 text-center">空仓库 · 可新建或上传文件</div>
  {:else if files}
    <table class="list">
      <tbody>
        {#each files as f (f.path)}
          <tr
            class="cursor-pointer {$selectedFilePath === f.path ? 'bg-selected' : 'hover:bg-hover'}"
            onclick={() => selectedFilePath.set(f.path)}
          >
            <td class="font-mono text-[12.5px] text-ink">{f.path}</td>
            <td class="file-meta text-right">{f.size} B</td>
          </tr>
        {/each}
      </tbody>
    </table>
  {/if}
</div>

{#if showNewFile}
  <Modal title="新建文件" onclose={() => (showNewFile = false)}>
    <div class="form-row">
      <label class="form-label" for="nf-path">路径</label>
      <input id="nf-path" class="input font-mono" bind:value={newPath} placeholder="docs/intro.md" />
    </div>
    <div class="form-row">
      <label class="form-label" for="nf-content">内容</label>
      <textarea id="nf-content" rows="8" class="textarea" bind:value={newContent} placeholder="内容…"></textarea>
    </div>
    <div class="form-row">
      <label class="form-label" for="nf-msg">提交信息(可选)</label>
      <input id="nf-msg" class="input" bind:value={newMessage} placeholder="留空则自动生成" />
    </div>
    <div class="mt-4 flex justify-end gap-2">
      <button class="btn" onclick={() => (showNewFile = false)}>取消</button>
      <button class="btn btn-primary" onclick={submitNewFile}>创建</button>
    </div>
  </Modal>
{/if}

{#if pendingFile}
  <Modal title="上传文件" onclose={cancelUpload}>
    <div class="form-row">
      <span class="form-label">已选文件</span>
      <p class="font-mono text-[12.5px] text-ink">{pendingFile.name}<span class="quiet"> · {pendingFile.size} B</span></p>
    </div>
    <div class="form-row">
      <label class="form-label" for="up-path">保存到路径</label>
      <input id="up-path" class="input font-mono" bind:value={uploadPath} placeholder="材料/课件.pptx" />
    </div>
    <div class="form-row">
      <label class="form-label" for="up-msg">提交信息(可选)</label>
      <input id="up-msg" class="input" bind:value={uploadMessage} placeholder="留空则自动生成" />
    </div>
    <div class="mt-4 flex justify-end gap-2">
      <button class="btn" onclick={cancelUpload} disabled={uploading}>取消</button>
      <button class="btn btn-primary" onclick={submitUpload} disabled={uploading || uploadPath.trim() === ""}>
        {uploading ? "上传中…" : "上传"}
      </button>
    </div>
  </Modal>
{/if}