Merge branch 'chore/grants-panel-wider'

chore(filelib-web): 详情容器加宽到 1400px,宽屏下授权表格全列无遮挡;仅文件预览挤压时出横向滚动条
Merge branch 'chore/grants-table-overflow'
2026-07-27 17:00:42 +08:00 · 2026-07-27 17:00:41 +08:00 · 2026-07-27 16:54:07 +08:00 · 2026-07-27 16:54:07 +08:00 · 2026-07-27 16:47:05 +08:00 · 2026-07-27 16:47:05 +08:00
11 changed files with 388 additions and 111 deletions
@@ -1,37 +1,70 @@
 <script lang="ts">
  /**
-   * 节点授权面板。迁自已删除的 routes/libraryBrowser.ts `renderGrantsTab`(ADR-0029)。
+   * 节点授权面板(表格化改版)。迁自已删除的 routes/libraryBrowser.ts
+   * `renderGrantsTab`(ADR-0029)。
   *
-   * 迁移时整个「授权」tab 连同这四个端点一起漏掉了 —— 后端一直可用,只是前端没入口。
+   * 布局:顶部工具条(左:授权成员搜索框;右:「+ 添加授权」弹窗入口);
+   * 下方一行一条授权 —— 成员(名称+id,点击跳用户管理/Group 管理)、
+   * 类型(个人/Group)、权限(下拉可改)、加入时间、操作(删除)。
   *
-   * 语义(契约 8.1 / ADR-0021):
+   * 语义(契约 8.1 / ADR-0021 / ADR-0028):
   *  - 创建者授权(isCreatorGrant)不可收回、不可改;
-   *  - MANAGE 仅创建者可授,这里不做前端拦截 —— 后端 fail closed,报错原样呈现;
-   *  - GROUP 主体走 in-hub MemberGroup(ADR-0028),用 /groups/search 选,不手敲 id。
+   *  - 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 { currentNode } from "./browser.js";
-  import type { Grant, MemberGroupSearchResult, NodeDetail, Role } from "./types.js";
+  import { ROLE_LABEL } from "./labels.js";
+  import type { Grant, MemberGroupSearchResult, NodeDetail, Role, UserSearchResult } from "./types.js";
  import Icon from "./Icon.svelte";
+  import Modal from "./Modal.svelte";
+  import Avatar from "./Avatar.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 userIdInput = $state("");
-  let groupId = $state("");
-  let groupOptions = $state<MemberGroupSearchResult[] | null>(null);
+  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.principalOpenId ?? "").toLowerCase().includes(q) ||
+        (g.principalType === "USER" ? "个人" : "group").includes(q),
+    );
+  });
+
  $effect(() => {
    void node.id;
    void load();
@@ -48,33 +81,102 @@
    }
  }

-  /** 切到 GROUP 时懒加载候选组(活跃组 + breadcrumb)。 */
-  async function onTypeChange(): Promise<void> {
-    if (principalType !== "GROUP" || groupOptions !== null) return;
+  /** 成员单元格跳转: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 {
-      const r = await api<{ groups: MemberGroupSearchResult[] }>("/database/api/groups/search?q=");
-      groupOptions = r.groups;
-      if (r.groups.length > 0 && groupId === "") groupId = r.groups[0]!.id;
-    } catch (e) {
-      toastErr(errText(e));
+      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 = principalType === "GROUP" ? groupId : userIdInput.trim();
+    const principalId = selectedPrincipal?.id ?? manualId.trim();
    if (principalId === "") {
-      toastErr("请填写主体");
+      toastErr("请选择或填写授权主体");
      return;
    }
    saving = true;
    try {
-      // PUT /grants 是增量语义(putGrants),不是整表替换。
+      // PUT /grants 是 upsert 语义(putGrants):同主体已有授权则改级别,否则新建。
      await api(`/database/api/nodes/${node.id}/grants`, {
        method: "PUT",
        body: { grants: [{ principalType, principalId, role }] },
      });
      toastOk("已授予");
-      userIdInput = "";
+      showAdd = false;
      await load();
    } catch (e) {
      toastErr(errText(e));
@@ -83,30 +185,29 @@
    }
  }

+  /** 权限下拉改级别:复用 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.principalId}」的 ${g.role} 授权?`)) return;
+    if (!confirm(`删除「${g.principalName ?? g.principalId}」的${ROLE_LABEL[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));
-    }
-  }
-
-  /** 独立权限开关(仅 PROJECT;关闭时只继承父级,创建者除外)。 */
-  async function toggleIndependent(): Promise<void> {
-    try {
-      await api(`/database/api/projects/${node.id}/independent-permission`, {
-        method: "PUT",
-        body: { enabled: !node.independentPermission },
-      });
-      toastOk("已切换");
-      currentNode.update((n) =>
-        n !== null && n.id === node.id ? { ...n, independentPermission: !node.independentPermission } : n,
-      );
+      toastOk("已删除");
      await load();
    } catch (e) {
      toastErr(errText(e));
@@ -115,34 +216,92 @@
 </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 grants === null}
+  {:else if shown === null}
    <div class="quiet py-[18px] text-center">加载中…</div>
  {:else}
+    <!-- 内容不可断行(头像名/id/日期/下拉)可能超宽:溢出时横向滚动,
+         而不是把表格挤变形或顶出 panel 右边界(文件预览打开时主区变窄)。 -->
+    <div class="overflow-x-auto">
      <table class="list">
      <thead>
-        <tr><th>主体</th><th>级别</th><th></th></tr>
+        <tr>
+          <th class="whitespace-nowrap pr-4">成员</th>
+          <th class="whitespace-nowrap pr-4">userId</th>
+          <th class="whitespace-nowrap pr-4">飞书 ID</th>
+          <th class="whitespace-nowrap pr-4">类型</th>
+          <th class="whitespace-nowrap pr-4">权限</th>
+          <th class="whitespace-nowrap pr-4">加入时间</th>
+          <th></th>
+        </tr>
      </thead>
      <tbody>
-        {#if grants.length === 0}
-          <tr><td colspan="3" class="quiet !py-[18px] text-center">暂无显式授权</td></tr>
-        {:else}
-          {#each grants as g (g.id)}
+        {#if shown.length === 0}
          <tr>
-              <td>
-                <span class="inline-flex items-center gap-2">
-                  <span class="flex text-ink-3"><Icon name={g.principalType === "USER" ? "user" : "group"} size={14} /></span>
-                  <span class="font-mono text-[12px]">{g.principalId}</span>
+            <td colspan="7" class="quiet !py-[18px] text-center">
+              {searchText.trim() === "" ? "暂无授权" : `无匹配「${searchText.trim()}」的授权`}
+            </td>
+          </tr>
+        {:else}
+          {#each shown as g (g.id)}
+            <tr>
+              <td class="whitespace-nowrap pr-4">
+                <a class="inline-flex items-center gap-2 text-ink hover:text-accent" href={principalHref(g)}>
+                  <Avatar displayName={g.principalName} userId={g.principalId} size={26} />
+                  <span class="flex items-center gap-1.5 text-[13px]">
+                    {g.principalName ?? g.principalId}
                    {#if g.isCreatorGrant}<span class="quiet">(创建者)</span>{/if}
                  </span>
+                </a>
              </td>
-              <td class="file-meta">{g.role}</td>
-              <td class="text-right">
-                <!-- 创建者授权不可动(契约 8.1);非 MANAGE 也不给收回入口。 -->
+              <td class="file-meta max-w-[230px] truncate pr-4 font-mono" title={g.principalType === "USER" ? g.principalId : ""}>
+                {g.principalType === "USER" ? g.principalId : "—"}
+              </td>
+              <td class="file-meta max-w-[230px] truncate pr-4 font-mono" title={g.principalOpenId ?? ""}>
+                {g.principalOpenId ?? "—"}
+              </td>
+              <td class="whitespace-nowrap pr-4"><span class="tag">{g.principalType === "USER" ? "个人" : "Group"}</span></td>
+              <td class="whitespace-nowrap pr-4">
+                <!-- 创建者授权不可动(契约 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}>{ROLE_LABEL[r]}</option>
+                    {/each}
+                  </select>
+                {:else}
+                  <span class="file-meta">{ROLE_LABEL[g.role]}</span>
+                {/if}
+              </td>
+              <td class="file-meta whitespace-nowrap pr-4">{fmtDate(g.createdAt)}</td>
+              <td class="whitespace-nowrap pr-2 text-right">
                {#if !g.isCreatorGrant && canManage}
                  <button class="link-danger inline-flex items-center gap-1" onclick={() => void revoke(g)}>
-                    <Icon name="minus" size={12} /> 收回
+                    <Icon name="trash" size={12} /> 删除
                  </button>
                {/if}
              </td>
@@ -151,41 +310,72 @@
        {/if}
      </tbody>
      </table>
+    </div>
  {/if}
+</div>

-  {#if canManage}
-    <div class="my-3.5 border-t border-line-soft"></div>
-    <div class="section-title mb-2.5">新增授权</div>
-    <div class="flex flex-wrap items-center gap-2">
-      <select class="select !w-[110px]" bind:value={principalType} onchange={onTypeChange}>
-        <option value="USER">用户</option>
+{#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>
-
-      {#if principalType === "USER"}
-        <input class="input min-w-0 flex-1" placeholder="用户 id" bind:value={userIdInput} />
-      {:else if groupOptions === null}
-        <span class="quiet flex-1">加载 Group 列表…</span>
-      {:else if groupOptions.length === 0}
-        <span class="quiet flex-1">暂无可选 Group · 先到「Group 管理」建一个</span>
-      {:else}
-        <select class="select min-w-0 flex-1" bind:value={groupId}>
-          {#each groupOptions as g (g.id)}
-            <option value={g.id}>{g.breadcrumb}</option>
-          {/each}
-        </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}
-
-      <select class="select !w-[110px]" bind:value={role}>
+    {#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>
+          <option value={r}>{ROLE_LABEL[r]}</option>
        {/each}
      </select>
+    </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 ? "授予中…" : "授予"}
+        {saving ? "授予中…" : "添加"}
      </button>
    </div>
-    <div class="section-note mt-1.5">MANAGE 仅创建者可授;创建者授权不可动(契约 8.1)</div>
+  </Modal>
 {/if}
-
-</div>
@@ -5,6 +5,7 @@
   * 归档组展示与恢复 / 右键菜单 / 面包屑 / 统计条 / 成员表(头像·openId·加入时间)。
   */
  import { onMount } from "svelte";
+  import { page } from "$app/state";
  import { api } from "./api.js";
  import { toastErr, toastOk } from "./stores.js";
  import type { MemberGroupNode, MemberGroupMember, UserSearchResult } from "./types.js";
@@ -172,7 +173,13 @@
    }
  }

-  onMount(loadGroups);
+  onMount(async () => {
+    await loadGroups();
+    // 授权面板「成员」单元格跳转:?select=<groupId> 直接选中该组。
+    // 组不在列表(已归档且未开归档展示)时不动作,停留默认态。
+    const target = page.url.searchParams.get("select");
+    if (target !== null && groups.some((g) => g.id === target)) select(target);
+  });

  function select(id: string): void {
    selectedId = id;
@@ -79,10 +79,10 @@
    </div>

    <div class="flex-1 overflow-y-auto px-2 py-2 text-[13px]">
-      {#if roots === null}
-        <div class="px-3 py-6 text-center text-xs text-ink-3">加载中…</div>
-      {:else if treeError}
+      {#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 ? "空文件库 · 点上方「+ 根目录」开始" : "文件库为空,请联系管理员创建根目录"}
@@ -2,6 +2,7 @@
  import { api } from "./api.js";
  import { currentNode, breadcrumb, bumpTree, clearSelectedFile } from "./browser.js";
  import { toastOk, toastErr } from "./stores.js";
+  import { ROLE_LABEL } from "./labels.js";
  import OverviewPanel from "./OverviewPanel.svelte";
  import FilesPanel from "./FilesPanel.svelte";
  import GrantsPanel from "./GrantsPanel.svelte";
@@ -87,7 +88,7 @@
 {#if node === null}
  <div class="flex h-full items-center justify-center text-[13px] text-ink-3">从左侧选择一个文件夹或项目</div>
 {:else}
-  <div class="mx-auto max-w-[880px] px-9 py-9">
+  <div class="mx-auto max-w-[1400px] px-9 py-9">
    <div class="mb-2 text-[12.5px] text-ink-3">
      {#each crumbs as c, i (i)}
        {#if i > 0}<span class="mx-1 text-line">/</span>{/if}
@@ -99,7 +100,7 @@
      <div class="flex items-center gap-2 text-[17px] font-semibold text-ink">
        {node.name}
        <span class="tag">{node.kind === "PROJECT" ? "项目" : "文件夹"}</span>
-        <span class="tag !border-line !text-ink-2">{node.role}</span>
+        <span class="tag !border-line !text-ink-2">{ROLE_LABEL[node.role]}</span>
      </div>
      <div class="flex gap-1.5">
        {#if canEdit && node.kind === "FOLDER"}
@@ -2,6 +2,7 @@
  import { api } from "./api.js";
  import { toastOk, toastErr } from "./stores.js";
  import { currentNode } from "./browser.js";
+  import { ROLE_LABEL } from "./labels.js";
  import type { ExportJob, NodeDetail } from "./types.js";
  import Modal from "./Modal.svelte";

@@ -13,7 +14,7 @@

  const canEdit = $derived(node.role === "MANAGE" || node.role === "EDIT");
  const canManage = $derived(node.role === "MANAGE");
-  const roleLabel = $derived(node.role === "MANAGE" ? "可管理" : node.role === "EDIT" ? "可编辑" : "只读");
+  const roleLabel = $derived(ROLE_LABEL[node.role]);

  /** 独立权限开关(仅 PROJECT;关闭时只继承父级权限,创建者除外)。 */
  async function toggleIndependent(): Promise<void> {
@@ -3,6 +3,7 @@
  import { api } from "./api.js";
  import { expanded, currentNode, breadcrumb, toggleExpanded, treeVersion } from "./browser.js";
  import { toastErr } from "./stores.js";
+  import { ROLE_LABEL } from "./labels.js";
  import type { BreadcrumbEntry, NodeChild, NodeDetail } from "./types.js";

  let { node, depth }: { node: NodeChild; depth: number } = $props();
@@ -64,7 +65,7 @@
    </span>
    <span class="truncate">{node.name}</span>
    {#if node.role !== "MANAGE"}
-      <span class="ml-auto pr-1 font-mono text-[10px] text-ink-3">{node.role}</span>
+      <span class="ml-auto pr-1 text-[10px] text-ink-3">{ROLE_LABEL[node.role]}</span>
    {/if}
  </div>

@@ -0,0 +1,10 @@
+/** 展示层文案(与 API 枚举值解耦;传参仍用英文枚举)。 */
+
+import type { Role } from "./types.js";
+
+/** 文件库权限级(契约 8.1 MANAGE>EDIT>VIEW)的中文展示名。 */
+export const ROLE_LABEL: Record<Role, string> = {
+  VIEW: "只读",
+  EDIT: "可编辑",
+  MANAGE: "可管理",
+};
@@ -72,15 +72,6 @@ export interface ExportJob {
  readonly createdAt: string;
 }

-export interface Grant {
-  readonly id: string;
-  readonly principalType: "USER" | "GROUP";
-  readonly principalId: string;
-  readonly role: Role;
-  readonly isCreatorGrant: boolean;
-  readonly createdAt: string;
-}
-
 export interface GroupSearchResult {
  readonly id: string;
  readonly name: string;
@@ -114,6 +105,10 @@ export interface Grant {
  readonly id: string;
  readonly principalType: "USER" | "GROUP";
  readonly principalId: string;
+  /** 主体显示名(用户 displayName / 组 name);主体已删为 null,展示回落 principalId。 */
+  readonly principalName: string | null;
+  /** USER 主体的飞书 openId;GROUP 或主体已删为 null。 */
+  readonly principalOpenId: string | null;
  readonly role: Role;
  /** 创建者授权不可收回、不可改(契约 8.1)。 */
  readonly isCreatorGrant: boolean;
@@ -7,10 +7,12 @@
   * 这里管的是 org 成员与其角色。
   */
  import { onMount } from "svelte";
+  import { page } from "$app/state";
  import { api } from "$lib/api.js";
  import { loadConfig } from "$lib/config.js";
  import { toastOk, toastErr } from "$lib/stores.js";
  import type { OrgMember, OrgRole } from "$lib/types.js";
+  import Icon from "$lib/Icon.svelte";

  const ROLE_LABEL: Record<OrgRole, string> = {
    OWNER: "所有者",
@@ -23,6 +25,9 @@
  let members = $state<OrgMember[] | null>(null);
  let error = $state<string | null>(null);

+  // 列表过滤;授权面板跳转会带 ?q=<userId>,以此为初始过滤词。
+  let filterText = $state(page.url.searchParams.get("q") ?? "");
+
  let newOpenId = $state("");
  let newName = $state("");
  let newRole = $state<OrgRole>("MEMBER");
@@ -30,6 +35,19 @@

  const base = $derived(orgSlug === null ? null : `/api/org/${encodeURIComponent(orgSlug)}`);

+  /** 按显示名 / userId / openId 过滤(纯前端;成员全量在手)。 */
+  const shown = $derived.by((): OrgMember[] | null => {
+    if (members === null) return null;
+    const q = filterText.trim().toLowerCase();
+    if (q === "") return members;
+    return members.filter(
+      (m) =>
+        m.displayName.toLowerCase().includes(q) ||
+        m.userId.toLowerCase().includes(q) ||
+        m.feishuOpenId.toLowerCase().includes(q),
+    );
+  });
+
  async function load(): Promise<void> {
    if (base === null) return;
    try {
@@ -121,14 +139,28 @@
    </div>

    <div class="panel">
-      <div class="section-title mb-2.5">成员列表</div>
+      <div class="mb-2.5 flex items-center justify-between gap-2">
+        <div class="section-title">成员列表</div>
+        <div class="relative w-[260px] shrink-0">
+          <span class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-3">
+            <Icon name="search" size={13} />
+          </span>
+          <input
+            class="input w-full !py-[5px] !pl-8 !text-[12.5px]"
+            placeholder="过滤:名称 / userId / openId"
+            bind:value={filterText}
+          />
+        </div>
+      </div>

      {#if error}
        <div class="py-3 text-[12.5px] text-danger">{error}</div>
-      {:else if members === null}
+      {:else if shown === null}
        <div class="quiet py-[18px] text-center">加载中…</div>
-      {:else if members.length === 0}
-        <div class="quiet py-[18px] text-center">暂无成员</div>
+      {:else if shown.length === 0}
+        <div class="quiet py-[18px] text-center">
+          {filterText.trim() === "" ? "暂无成员" : `无匹配「${filterText.trim()}」的成员`}
+        </div>
      {:else}
        <table class="list">
          <thead>
@@ -140,7 +172,7 @@
            </tr>
          </thead>
          <tbody>
-            {#each members as m (m.userId)}
+            {#each shown as m (m.userId)}
              <tr>
                <td class="text-ink">{m.displayName || m.userId}</td>
                <td class="file-meta">{m.userId}</td>
@@ -25,6 +25,10 @@ export interface GrantDto {
  readonly id: string;
  readonly principalType: "USER" | "GROUP";
  readonly principalId: string;
+  /** 主体显示名(用户 displayName / 组 name);主体已删时为 null,前端回落 principalId。 */
+  readonly principalName: string | null;
+  /** USER 主体的飞书 openId;GROUP 或主体已删时为 null。 */
+  readonly principalOpenId: string | null;
  readonly role: FileLibRole;
  readonly isCreatorGrant: boolean;
  readonly createdAt: Date;
@@ -35,12 +39,42 @@ function toDto(grant: FileLibGrant): GrantDto {
    id: grant.id,
    principalType: grant.principalType,
    principalId: grant.principalId,
+    principalName: null,
+    principalOpenId: null,
    role: grant.role,
    isCreatorGrant: grant.isCreatorGrant,
    createdAt: grant.createdAt,
  };
 }

+/** 批量回填主体显示名与飞书 openId(两次查询,不做 per-row 往返)。可在事务内调用。 */
+async function withPrincipalNames(
+  prisma: Pick<PrismaClient, "user" | "memberGroup">,
+  grants: readonly GrantDto[],
+): Promise<readonly GrantDto[]> {
+  const userIds = [...new Set(grants.filter((g) => g.principalType === "USER").map((g) => g.principalId))];
+  const groupIds = [...new Set(grants.filter((g) => g.principalType === "GROUP").map((g) => g.principalId))];
+  const users = userIds.length === 0
+    ? []
+    : await prisma.user.findMany({
+        where: { id: { in: userIds } },
+        select: { id: true, displayName: true, feishuOpenId: true },
+      });
+  const groups = groupIds.length === 0
+    ? []
+    : await prisma.memberGroup.findMany({ where: { id: { in: groupIds } }, select: { id: true, name: true } });
+  const nameById = new Map<string, string>([
+    ...users.map((u) => [u.id, u.displayName] as const),
+    ...groups.map((g) => [g.id, g.name] as const),
+  ]);
+  const openIdById = new Map<string, string>(users.map((u) => [u.id, u.feishuOpenId] as const));
+  return grants.map((g) => ({
+    ...g,
+    principalName: nameById.get(g.principalId) ?? null,
+    principalOpenId: g.principalType === "USER" ? openIdById.get(g.principalId) ?? null : null,
+  }));
+}
+
 type Tx = Prisma.TransactionClient;
 type Deps = AccessDeps & { readonly prisma: PrismaClient };

@@ -66,7 +100,7 @@ export async function listGrants(
    where: { organizationId: deps.organizationId, nodeId, revokedAt: null },
    orderBy: [{ isCreatorGrant: "desc" }, { createdAt: "asc" }],
  });
-  return grants.map(toDto);
+  return withPrincipalNames(deps.prisma, grants.map(toDto));
 }

 export interface PutGrantsResult {
@@ -137,7 +171,7 @@ export async function putGrants(
      where: { organizationId: deps.organizationId, nodeId: node.id, revokedAt: null },
      orderBy: [{ isCreatorGrant: "desc" }, { createdAt: "asc" }],
    });
-    return { granted, updated, grants: grants.map(toDto) };
+    return { granted, updated, grants: await withPrincipalNames(tx, grants.map(toDto)) };
  });
 }

@@ -236,7 +270,7 @@ export async function forceAdjustGrants(
      where: { organizationId: deps.organizationId, nodeId: node.id, revokedAt: null },
      orderBy: [{ isCreatorGrant: "desc" }, { createdAt: "asc" }],
    });
-    return { granted, updated, grants: grants.map(toDto) };
+    return { granted, updated, grants: await withPrincipalNames(tx, grants.map(toDto)) };
  });
 }

@@ -45,6 +45,12 @@ export async function resetDb(): Promise<void> {
    // two tables have no FK to Project and must be cleared explicitly.
    prisma.permissionGrant.deleteMany(),
    prisma.permissionSettings.deleteMany(),
+    // MemberGroup is global (ADR-0028): no FK to the org/user roots, so the
+    // cascade above never reaches it. Clear explicitly — closure/membership
+    // first (they FK into MemberGroup), groups last.
+    prisma.memberGroupClosure.deleteMany(),
+    prisma.memberGroupMembership.deleteMany(),
+    prisma.memberGroup.deleteMany(),
    prisma.user.deleteMany(),
    prisma.organization.deleteMany(),
  ]);
Author	SHA1	Message	Date
ymy	c72f8c7050	Merge branch 'chore/grants-panel-wider'	2026-07-27 17:00:42 +08:00
ymy	947f969967	chore(filelib-web): 详情容器加宽到 1400px,宽屏下授权表格全列无遮挡;仅文件预览挤压时出横向滚动条	2026-07-27 17:00:41 +08:00
ymy	60856d7cc1	Merge branch 'chore/grants-table-overflow'	2026-07-27 16:54:07 +08:00
ymy	2e08c0a734	chore(filelib-web): 授权表格外套横向滚动容器,修删除列贴边与文件预览打开时表格挤压	2026-07-27 16:54:07 +08:00
ymy	2225c6d43b	Merge branch 'chore/grants-table-width'	2026-07-27 16:47:05 +08:00
ymy	fc908eaf3b	chore(filelib-web): 拉宽授权表格:容器 880→1120px,单元格留白/禁换行,长 id 截断+悬停全文	2026-07-27 16:47:05 +08:00
ymy	2395671693	Merge branch 'chore/grant-id-columns'	2026-07-27 16:40:26 +08:00
ymy	cc4d9d907c	chore(filelib-web): 授权成员单元格只留头像+名称,userId 与飞书 ID 拆为独立两列 GrantDto 增加 principalOpenId(USER 主体的 feishuOpenId),GROUP 行两列显示 —; 搜索过滤同步覆盖 openId。	2026-07-27 16:40:25 +08:00
ymy	ef02428bb6	Merge branch 'chore/grant-avatar'	2026-07-27 16:22:03 +08:00
ymy	ad1a464f22	chore(filelib-web): 授权成员单元格改用首字母圆形头像(复用 Avatar 组件)	2026-07-27 16:22:01 +08:00
ymy	2dfe72cd5e	Merge branch 'chore/grant-modal-copy'	2026-07-27 16:16:17 +08:00
ymy	12a1246a7a	chore(filelib-web): 移除添加授权弹窗底部的 8.1 规则提示语	2026-07-27 16:16:16 +08:00
ymy	405312b36b	Merge branch 'chore/role-label-zh'	2026-07-27 15:57:42 +08:00
ymy	be17f74fc2	chore(filelib-web): 文件库权限名称汉化(VIEW/EDIT/MANAGE → 只读/可编辑/可管理) 统一走新增共享常量 labels.ts ROLE_LABEL(与 OverviewPanel 既有文案一致); 覆盖授权表格与弹窗下拉、详情头 tag、树节点角标;API 传参仍用英文枚举。	2026-07-27 15:57:41 +08:00
ymy	fccae5dacb	Merge branch 'feat/grants-table'	2026-07-27 15:16:30 +08:00
ymy	0dd2ae347e	feat(filelib-web): 授权面板表格化:搜索、添加弹窗、权限下拉与成员跳转 - GrantsPanel 重写为表格:顶部左侧授权成员搜索框(名称/id/类型过滤), 右侧「添加授权」弹窗(类型 + 主体搜索选择 + 权限);行内权限下拉直接改级(复用 PUT upsert),操作列删除;成员单元格跳转用户管理 (?q= 过滤)或 Group 管理(?select= 选中)。 - grantService: GrantDto 增加 principalName,list/put/force 三处统一批量回填(用户 displayName / 组 name),前端不再只显示裸 id。 - 用户管理页加过滤框并从 ?q= 初始化;GroupAdmin 支持 ?select= 直达。 - 测试:resetDb 补 MemberGroup 三表清理(全局表不被 org/user 级联清到, 此前跨用例污染导致级联软删用例断言失败);cph_hub_test 补 migrate。 - 顺带合并 types.ts 里重复的 Grant 声明(interface 合并残留)。	2026-07-27 15:13:57 +08:00
ymy	a4c07d1a5d	Merge branch 'fix/filelib-tree-loading'	2026-07-27 14:09:48 +08:00
ymy	91afd3c1b1	fix(filelib-web): 文件库树加载失败时显示错误而非永久加载中	2026-07-27 14:09:35 +08:00
白	e6e23294a2	Merge branch 'feat/member-group-hierarchy' MemberGroup 全局嵌套层级(ADR-0028)与 /database 前后端分离(ADR-0029)。	2026-07-26 20:43:59 +08:00