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

<script lang="ts">
  /**
   * 节点授权面板(表格化改版)。迁自已删除的 routes/libraryBrowser.ts
   * `renderGrantsTab`(ADR-0029)。
   *
   * 布局:顶部工具条(左:授权成员搜索框;右:「+ 添加授权」弹窗入口);
   * 下方一行一条授权 —— 成员(名称+id,点击跳用户管理/Group 管理)、
   * 类型(个人/Group)、权限(下拉可改)、加入时间、操作(删除)。
   *
   * 语义(契约 8.1 / ADR-0021 / ADR-0028):
   *  - 创建者授权(isCreatorGrant)不可收回、不可改;
   *  - 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 type { Grant, MemberGroupSearchResult, NodeDetail, Role, UserSearchResult } from "./types.js";
  import Icon from "./Icon.svelte";
  import Modal from "./Modal.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 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.principalType === "USER" ? "个人" : "group").includes(q),
    );
  });

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

  async function load(): Promise<void> {
    grants = null;
    error = null;
    try {
      const r = await api<{ grants: Grant[] }>(`/database/api/nodes/${node.id}/grants`);
      grants = r.grants;
    } catch (e) {
      error = errText(e);
    }
  }

  /** 成员单元格跳转: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 {
      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 = selectedPrincipal?.id ?? manualId.trim();
    if (principalId === "") {
      toastErr("请选择或填写授权主体");
      return;
    }
    saving = true;
    try {
      // PUT /grants 是 upsert 语义(putGrants):同主体已有授权则改级别,否则新建。
      await api(`/database/api/nodes/${node.id}/grants`, {
        method: "PUT",
        body: { grants: [{ principalType, principalId, role }] },
      });
      toastOk("已授予");
      showAdd = false;
      await load();
    } catch (e) {
      toastErr(errText(e));
    } finally {
      saving = false;
    }
  }

  /** 权限下拉改级别:复用 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.principalId}」的 ${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));
    }
  }
</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 shown === null}
    <div class="quiet py-[18px] text-center">加载中…</div>
  {:else}
    <table class="list">
      <thead>
        <tr><th>成员</th><th>类型</th><th>权限</th><th>加入时间</th><th></th></tr>
      </thead>
      <tbody>
        {#if shown.length === 0}
          <tr>
            <td colspan="5" class="quiet !py-[18px] text-center">
              {searchText.trim() === "" ? "暂无授权" : `无匹配「${searchText.trim()}」的授权`}
            </td>
          </tr>
        {:else}
          {#each shown as g (g.id)}
            <tr>
              <td>
                <a class="inline-flex items-center gap-2 text-ink hover:text-accent" href={principalHref(g)}>
                  <span class="flex text-ink-3">
                    <Icon name={g.principalType === "USER" ? "user" : "group"} size={14} />
                  </span>
                  <span>
                    <span class="flex items-center gap-1.5 text-[13px]">
                      {g.principalName ?? g.principalId}
                      {#if g.isCreatorGrant}<span class="quiet">(创建者)</span>{/if}
                    </span>
                    <span class="block font-mono text-[11px] text-ink-3">{g.principalId}</span>
                  </span>
                </a>
              </td>
              <td><span class="tag">{g.principalType === "USER" ? "个人" : "Group"}</span></td>
              <td>
                <!-- 创建者授权不可动(契约 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}>{r}</option>
                    {/each}
                  </select>
                {:else}
                  <span class="file-meta">{g.role}</span>
                {/if}
              </td>
              <td class="file-meta">{fmtDate(g.createdAt)}</td>
              <td class="text-right">
                {#if !g.isCreatorGrant && canManage}
                  <button class="link-danger inline-flex items-center gap-1" onclick={() => void revoke(g)}>
                    <Icon name="trash" size={12} /> 删除
                  </button>
                {/if}
              </td>
            </tr>
          {/each}
        {/if}
      </tbody>
    </table>
  {/if}
</div>

{#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>
    </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>
        {/each}
      </select>
    </div>
    <div class="section-note">MANAGE 仅创建者可授;创建者授权不可动(契约 8.1)</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 ? "授予中…" : "添加"}
      </button>
    </div>
  </Modal>
{/if}