Merge branch 'chore/grants-table-width'

GrantDto 增加 principalOpenId(USER 主体的 feishuOpenId),GROUP 行两列显示 —;
搜索过滤同步覆盖 openId。

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

@@ -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,报错原样呈现;
+   *  - MANAGE 仅创建者可授,前端不做矩阵拦截 —— 后端 fail closed,报错原样 toast;
-   *  - GROUP 主体走 in-hub MemberGroup(ADR-0028),用 /groups/search 选,不手敲 id。
+   *  - 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 { ROLE_LABEL } from "./labels.js";
-  import type { Grant, MemberGroupSearchResult, NodeDetail, Role } from "./types.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 principalQuery = $state("");
-  let groupId = $state("");
+  let principalOptions = $state<readonly PrincipalOption[] | null>(null);
-  let groupOptions = $state<MemberGroupSearchResult[] | 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)。 */
+  /** 成员单元格跳转:USER → 用户管理(带过滤词);GROUP → Group 管理(选中该组)。 */
-  async function onTypeChange(): Promise<void> {
+  function principalHref(g: Grant): string {
-    if (principalType !== "GROUP" || groupOptions !== null) return;
+    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=");
+      return new Date(iso).toLocaleString("zh-CN", { dateStyle: "medium", timeStyle: "short" });
-      groupOptions = r.groups;
+    } catch {
-      if (r.groups.length > 0 && groupId === "") groupId = r.groups[0]!.id;
+      return iso;
-    } catch (e) {
-      toastErr(errText(e));
     }
   }
 
+  /* ------------------------------------------------------------ 添加授权弹窗 */
+
+  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("已收回");
+      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,
-      );
       await load();
     } catch (e) {
       toastErr(errText(e));
@@ -115,34 +216,89 @@
 </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}
     <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}
+        {#if shown.length === 0}
-          <tr><td colspan="3" class="quiet !py-[18px] text-center">暂无显式授权</td></tr>
+          <tr>
+            <td colspan="7" class="quiet !py-[18px] text-center">
+              {searchText.trim() === "" ? "暂无授权" : `无匹配「${searchText.trim()}」的授权`}
+            </td>
+          </tr>
         {:else}
-          {#each grants as g (g.id)}
+          {#each shown as g (g.id)}
             <tr>
-              <td>
+              <td class="whitespace-nowrap pr-4">
-                <span class="inline-flex items-center gap-2">
+                <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>
+                  <Avatar displayName={g.principalName} userId={g.principalId} size={26} />
-                  <span class="font-mono text-[12px]">{g.principalId}</span>
+                  <span class="flex items-center gap-1.5 text-[13px]">
-                  {#if g.isCreatorGrant}<span class="quiet">(创建者)</span>{/if}
+                    {g.principalName ?? g.principalId}
-                </span>
+                    {#if g.isCreatorGrant}<span class="quiet">(创建者)</span>{/if}
+                  </span>
+                </a>
               </td>
-              <td class="file-meta">{g.role}</td>
+              <td class="file-meta max-w-[230px] truncate pr-4 font-mono" title={g.principalType === "USER" ? g.principalId : ""}>
-              <td class="text-right">
+                {g.principalType === "USER" ? g.principalId : "—"}
-                <!-- 创建者授权不可动(契约 8.1);非 MANAGE 也不给收回入口。 -->
+              </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 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>
@@ -152,40 +308,70 @@
       </tbody>
     </table>
   {/if}
+</div>
 
-  {#if canManage}
+{#if showAdd}
-    <div class="my-3.5 border-t border-line-soft"></div>
+  <Modal title="添加授权" onclose={() => (showAdd = false)}>
-    <div class="section-title mb-2.5">新增授权</div>
+    <div class="form-row">
-    <div class="flex flex-wrap items-center gap-2">
+      <label class="form-label" for="grant-type">类型</label>
-      <select class="select !w-[110px]" bind:value={principalType} onchange={onTypeChange}>
+      <select id="grant-type" class="select" bind:value={principalType} onchange={onTypeChange}>
-        <option value="USER">用户</option>
+        <option value="USER">个人</option>
         <option value="GROUP">Group</option>
       </select>
-
+    </div>
-      {#if principalType === "USER"}
+    <div class="form-row">
-        <input class="input min-w-0 flex-1" placeholder="用户 id" bind:value={userIdInput} />
+      <label class="form-label" for="grant-principal">{principalType === "USER" ? "用户" : "Group"}</label>
-      {:else if groupOptions === null}
+      <input
-        <span class="quiet flex-1">加载 Group 列表…</span>
+        id="grant-principal"
-      {:else if groupOptions.length === 0}
+        class="input"
-        <span class="quiet flex-1">暂无可选 Group · 先到「Group 管理」建一个</span>
+        placeholder={principalType === "USER" ? "搜索显示名 / openId" : "搜索组名"}
-      {:else}
+        bind:value={principalQuery}
-        <select class="select min-w-0 flex-1" bind:value={groupId}>
+        oninput={onQueryInput}
-          {#each groupOptions as g (g.id)}
+      />
-            <option value={g.id}>{g.breadcrumb}</option>
+    </div>
-          {/each}
+    {#if selectedPrincipal !== null}
-        </select>
+      <div class="form-row">
-      {/if}
+        <span class="form-label">已选</span>
-
+        <span class="quiet self-center text-[12.5px]">
-      <select class="select !w-[110px]" bind:value={role}>
+          {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>
+          <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}
+{/if}
-
-</div>

hub/filelib-web/src/lib/GroupAdmin.svelte

@@ -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;

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

@@ -79,10 +79,10 @@
     </div>
 
     <div class="flex-1 overflow-y-auto px-2 py-2 text-[13px]">
-      {#if roots === null}
+      {#if treeError}
-        <div class="px-3 py-6 text-center text-xs text-ink-3">加载中…</div>
-      {:else 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 ? "空文件库 · 点上方「+ 根目录」开始" : "文件库为空,请联系管理员创建根目录"}

hub/filelib-web/src/lib/NodeDetailPanel.svelte

@@ -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-[1120px] 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"}

hub/filelib-web/src/lib/OverviewPanel.svelte

@@ -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> {

hub/filelib-web/src/lib/TreeNode.svelte

@@ -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>
 

hub/filelib-web/src/lib/labels.ts

@@ -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: "可管理",
+};

hub/filelib-web/src/lib/types.ts

@@ -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;

hub/filelib-web/src/routes/database/dashboard/users/+page.svelte

@@ -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}
+      {:else if shown.length === 0}
-        <div class="quiet py-[18px] text-center">暂无成员</div>
+        <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>

hub/src/database/filelib/grantService.ts

@@ -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)) };
   });
 }
 

hub/test/integration/helpers.ts

@@ -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(),
   ]);