fix(filelib-web): 补回迁移丢失的共享组件样式层与图标集

第一版迁移只把 uiTheme.ts 的 @theme 颜色令牌搬了过来,155 行里约 90
行的组件类(.btn/.panel/.input/.select/table.list/.tag/.switch/
.link-danger/.quiet 等)被丢掉,于是每个组件各自内联重述按钮、输入框、
面板的样式 —— 正是旧代码的重复问题被原样复刻,后台观感明显退化。

现在 app.css 是设计系统的唯一去处:@theme 管令牌,@layer components
管组件类。组件只带布局工具类,不重述组件样式。

图标集同样是丢的:旧面板有 13 个内联 SVG,新版一个不剩,只有纯文字的
「+」「删除」—— 这是"简陋"最直接的来源。提成 Icon.svelte 共享。
Group 节点沿用两人剪影而非文件夹图标:MemberGroup 与文件库的
FOLDER/PROJECT 是两套无关层级,图标不应混淆(ADR-0028/0021)。

顺手修 FilesPanel 的 uploadInput:bind:this 的目标要用 $state,
否则 Svelte 5 下不保证更新。

hub/filelib-web/src/app.css

@@ -23,8 +23,7 @@
 }
 
 html,
-body,
+body {
-#app {
   height: 100%;
 }
 
@@ -47,6 +46,204 @@ body {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
+/* 共享组件层(ADR-0029)。
+ *
+ * 从已删除的 hub/src/database/routes/uiTheme.ts 原样搬来。组件只带布局工具类,
+ * 不重述这里的组件样式 —— 第一版迁移只搬了上面的 @theme 令牌,把按钮/输入框/
+ * 面板样式在每个组件里内联重写了一遍,后台随即明显退化。 */
+@layer components {
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 14px;
+    border-radius: 8px;
+    border: 1px solid var(--color-line);
+    background: var(--color-panel);
+    color: var(--color-ink);
+    font-size: 12.5px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 120ms ease;
+    white-space: nowrap;
+  }
+  .btn:hover {
+    background: var(--color-hover);
+  }
+  .btn-sm {
+    padding: 4px 9px;
+    font-size: 11.5px;
+  }
+  .btn-primary {
+    background: var(--color-accent);
+    border-color: var(--color-accent);
+    color: #fff;
+  }
+  .btn-primary:hover {
+    background: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+  .btn-danger {
+    border-color: transparent;
+    background: transparent;
+    color: var(--color-danger);
+  }
+  .btn-danger:hover {
+    background: color-mix(in srgb, var(--color-danger) 7%, transparent);
+  }
+
+  .panel {
+    background: var(--color-panel);
+    border: 1px solid var(--color-line-soft);
+    border-radius: 10px;
+    padding: 20px 22px;
+  }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 10.5px;
+    font-weight: 500;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    padding: 2px 8px;
+    border-radius: 999px;
+    border: 1px solid var(--color-line-soft);
+    color: var(--color-ink-3);
+    background: var(--color-panel);
+  }
+
+  .input,
+  .select,
+  .textarea {
+    width: 100%;
+    padding: 7px 11px;
+    border-radius: 8px;
+    border: 1px solid var(--color-line);
+    background: var(--color-panel);
+    font-size: 13px;
+    color: var(--color-ink);
+    font-family: inherit;
+    outline: none;
+    transition: border-color 120ms ease;
+  }
+  .input:focus,
+  .select:focus,
+  .textarea:focus {
+    border-color: var(--color-accent);
+  }
+  .textarea {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12.5px;
+    line-height: 1.75;
+    resize: vertical;
+  }
+  .form-label {
+    display: block;
+    font-size: 11.5px;
+    color: var(--color-ink-3);
+    margin-bottom: 4px;
+  }
+  .form-row {
+    margin-bottom: 12px;
+  }
+
+  table.list {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+  table.list th {
+    text-align: left;
+    font-size: 11.5px;
+    font-weight: 500;
+    color: var(--color-ink-3);
+    padding: 4px 0;
+  }
+  table.list td {
+    padding: 8px 0;
+    border-top: 1px solid var(--color-line-soft);
+  }
+  table.list tr:first-child td {
+    border-top: none;
+  }
+
+  .quiet {
+    color: var(--color-ink-3);
+    font-size: 12.5px;
+  }
+  .section-title {
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .section-note {
+    font-size: 11.5px;
+    color: var(--color-ink-3);
+  }
+  .file-meta {
+    font-size: 11px;
+    color: var(--color-ink-3);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+  .link-danger {
+    color: var(--color-danger);
+    font-size: 12.5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+  }
+  .link-danger:hover {
+    text-decoration: underline;
+  }
+
+  /* 开关。真 checkbox 藏在下面 —— 保留键盘可达与 :checked 语义,不做 div 假开关。 */
+  .switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .switch > input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  .switch > span {
+    position: relative;
+    flex-shrink: 0;
+    width: 30px;
+    height: 17px;
+    border-radius: 999px;
+    background: var(--color-line);
+    transition: background 0.16s;
+  }
+  .switch > span::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.16s;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  }
+  .switch > input:checked + span {
+    background: var(--color-accent);
+  }
+  .switch > input:checked + span::after {
+    transform: translateX(13px);
+  }
+  .switch > input:focus-visible + span {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}
+
 /* diff 渲染 */
 pre.diff {
   white-space: pre-wrap;

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  /** 头像:有 avatarUrl 用图,否则显示首字母色块。 */
+  let {
+    displayName,
+    userId,
+    avatarUrl = null,
+    size = 28,
+  }: {
+    displayName?: string | null;
+    userId?: string | null;
+    avatarUrl?: string | null;
+    size?: number;
+  } = $props();
+
+  const initial = $derived((displayName || userId || "?").slice(0, 1).toUpperCase());
+</script>
+
+{#if avatarUrl}
+  <img
+    src={avatarUrl}
+    alt=""
+    class="shrink-0 rounded-full object-cover"
+    style="width:{size}px;height:{size}px"
+  />
+{:else}
+  <span
+    class="inline-flex shrink-0 items-center justify-center rounded-full bg-accent font-semibold text-white"
+    style="width:{size}px;height:{size}px;font-size:{Math.round(size * 0.42)}px"
+    aria-hidden="true">{initial}</span
+  >
+{/if}

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

@@ -3,6 +3,7 @@
   import { toastOk, toastErr, toast } from "./stores.js";
   import type { FileContent, VersionInfo, Role } from "./types.js";
   import Modal from "./Modal.svelte";
+  import Icon from "./Icon.svelte";
 
   let { projectId, path, role, onchanged, onclose }: { projectId: string; path: string; role: Role; onchanged: () => void; onclose?: () => void } = $props();
 
@@ -104,32 +105,32 @@
 </script>
 
 {#if loadError}
-  <div class="rounded-xl border border-line-soft bg-panel p-5 text-xs text-danger">{loadError}</div>
+  <div class="panel text-xs text-danger">{loadError}</div>
 {:else if file}
-  <div class="rounded-xl border border-line-soft bg-panel p-5">
+  <div class="panel">
     <div class="mb-2.5 flex items-center justify-between">
-      <span class="font-mono text-[11px] text-ink-3">{file.path} @ {file.version}</span>
+      <span class="file-meta">{file.path} @ {file.version}</span>
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1.5">
-        <a class="rounded-lg border border-line bg-panel px-3 py-1 text-[12px] font-medium text-ink transition hover:bg-hover" href="/database/api/projects/{projectId}/file/raw?path={encodeURIComponent(file.path)}" download>下载</a>
+        <a class="btn" href="/database/api/projects/{projectId}/file/raw?path={encodeURIComponent(file.path)}" download>下载</a>
-        <button class="rounded-lg border border-line bg-panel px-3 py-1 text-[12px] font-medium text-ink transition hover:bg-hover" onclick={openHistory}>历史</button>
+        <button class="btn" onclick={openHistory}><Icon name="clock" size={13} /> 历史</button>
         {#if canEdit}
-          <button class="rounded-lg border border-transparent px-3 py-1 text-[12px] font-medium text-danger transition hover:bg-[#A13A3312]" onclick={remove}>删除文件</button>
+          <button class="btn btn-danger" onclick={remove}><Icon name="trash" size={13} /> 删除文件</button>
         {/if}
         {#if onclose}
-          <button class="rounded-lg border border-line bg-panel px-2.5 py-1 text-[12px] font-medium text-ink-3 transition hover:bg-hover hover:text-ink" onclick={onclose} title="关闭预览">✕</button>
+          <button class="btn !px-2.5" onclick={onclose} title="关闭预览" aria-label="关闭预览">✕</button>
         {/if}
       </div>
     </div>
 
     {#if file.encoding === "base64"}
-      <div class="text-xs text-ink-3">二进制文件({file.size} B),不支持在线编辑</div>
+      <div class="quiet">二进制文件({file.size} B),不支持在线编辑</div>
     {:else}
-      <textarea rows="14" class="w-full rounded-lg border border-line bg-panel px-3 py-2 font-mono text-xs leading-7 outline-none focus:border-accent" bind:value={draft} readonly={!canEdit}></textarea>
+      <textarea rows="14" class="textarea !leading-7" bind:value={draft} readonly={!canEdit}></textarea>
     {/if}
 
     {#if canEdit && file.encoding !== "base64"}
       <div class="mt-3 flex justify-end">
-        <button class="rounded-lg bg-accent px-3.5 py-1.5 text-[12.5px] font-medium text-white transition hover:bg-accent-hover" onclick={save}>提交修改</button>
+        <button class="btn btn-primary" onclick={save}>提交修改</button>
       </div>
     {/if}
 
@@ -139,13 +140,13 @@
         <pre class="diff rounded-lg border border-line-soft bg-panel p-3">{@html renderDiff(conflict.diff)}</pre>
         <div class="mt-2 text-[11.5px] text-[#8A8059]">请人工合并后,以最新内容为全文重新提交(基版将更新为 {conflict.currentVersion})</div>
         <div class="mt-2 flex justify-end">
-          <button class="rounded-lg border border-line bg-panel px-3 py-1 text-[12px] font-medium text-ink transition hover:bg-hover" onclick={acceptLatest}>载入最新内容</button>
+          <button class="btn" onclick={acceptLatest}>载入最新内容</button>
         </div>
       </div>
     {/if}
   </div>
 {:else}
-  <div class="rounded-xl border border-line-soft bg-panel p-5 text-xs text-ink-3">加载中…</div>
+  <div class="panel quiet">加载中…</div>
 {/if}
 
 {#if showHistory}
@@ -159,7 +160,7 @@
       {/each}
     </div>
     <div class="mt-3 flex justify-end">
-      <button class="rounded-lg border border-line bg-panel px-3 py-1 text-[12px] font-medium text-ink transition hover:bg-hover" onclick={() => (showHistory = false)}>关闭</button>
+      <button class="btn" onclick={() => (showHistory = false)}>关闭</button>
     </div>
   </Modal>
 {/if}

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

@@ -4,6 +4,7 @@
   import { selectedFilePath, filesVersion } from "./browser.js";
   import type { FileEntry, NodeDetail } from "./types.js";
   import Modal from "./Modal.svelte";
+  import Icon from "./Icon.svelte";
 
   let { node }: { node: NodeDetail } = $props();
 
@@ -12,7 +13,8 @@
   let showNewFile = $state(false);
   let newPath = $state("");
   let newContent = $state("");
-  let uploadInput: HTMLInputElement;
+  // bind:this 的目标要用 $state,否则 svelte 5 warn 不会正确更新。
+  let uploadInput = $state<HTMLInputElement | null>(null);
 
   const canEdit = $derived(node.role !== "VIEW");
 
@@ -84,34 +86,34 @@
   }
 </script>
 
-<div class="rounded-xl border border-line-soft bg-panel p-5">
+<div class="panel">
-  <div class="mb-2 flex items-center justify-between">
+  <div class="mb-1.5 flex items-center justify-between">
-    <div class="text-[13px] font-semibold">项目文件({files?.length ?? 0})</div>
+    <div class="section-title">项目文件({files?.length ?? 0})</div>
     {#if canEdit}
-      <div class="flex gap-2">
+      <div class="flex gap-1.5">
-        <button class="rounded-lg border border-line bg-panel px-3 py-1.5 text-[12.5px] font-medium text-ink transition hover:bg-hover" onclick={() => (showNewFile = true)}>+ 新建文件</button>
+        <button class="btn" onclick={() => (showNewFile = true)}><Icon name="plus" size={13} /> 新建文件</button>
-        <button class="rounded-lg bg-accent px-3 py-1.5 text-[12.5px] font-medium text-white transition hover:bg-accent-hover" onclick={() => uploadInput.click()}>上传文件</button>
+        <button class="btn btn-primary" onclick={() => uploadInput?.click()}>上传文件</button>
         <input bind:this={uploadInput} type="file" class="hidden" onchange={doUpload} />
       </div>
     {/if}
   </div>
 
   {#if files === null && loadError === null}
-    <div class="py-5 text-center text-xs text-ink-3">加载中…</div>
+    <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="py-5 text-center text-xs text-ink-3">空仓库 · 可新建或上传文件</div>
+    <div class="quiet py-5 text-center">空仓库 · 可新建或上传文件</div>
   {:else if files}
-    <table class="w-full border-collapse text-[13px]">
+    <table class="list">
       <tbody>
         {#each files as f (f.path)}
           <tr
-            class="cursor-pointer border-t border-line-soft first:border-t-0 {$selectedFilePath === f.path ? 'bg-selected' : 'hover:bg-hover'}"
+            class="cursor-pointer {$selectedFilePath === f.path ? 'bg-selected' : 'hover:bg-hover'}"
             onclick={() => selectedFilePath.set(f.path)}
           >
-            <td class="py-2 font-mono text-[12.5px] text-ink">{f.path}</td>
+            <td class="font-mono text-[12.5px] text-ink">{f.path}</td>
-            <td class="py-2 text-right font-mono text-[11px] text-ink-3">{f.size} B</td>
+            <td class="file-meta text-right">{f.size} B</td>
           </tr>
         {/each}
       </tbody>
@@ -121,17 +123,17 @@
 
 {#if showNewFile}
   <Modal title="新建文件" onclose={() => (showNewFile = false)}>
-    <div class="mb-3">
+    <div class="form-row">
-      <label class="mb-1 block text-[11.5px] text-ink-3" for="nf-path">路径</label>
+      <label class="form-label" for="nf-path">路径</label>
-      <input id="nf-path" class="w-full rounded-lg border border-line bg-panel px-3 py-2 font-mono text-[13px] outline-none focus:border-accent" bind:value={newPath} placeholder="docs/intro.md" />
+      <input id="nf-path" class="input font-mono" bind:value={newPath} placeholder="docs/intro.md" />
     </div>
-    <div class="mb-3">
+    <div class="form-row">
-      <label class="mb-1 block text-[11.5px] text-ink-3" for="nf-content">内容</label>
+      <label class="form-label" for="nf-content">内容</label>
-      <textarea id="nf-content" rows="8" class="w-full rounded-lg border border-line bg-panel px-3 py-2 font-mono text-xs outline-none focus:border-accent" bind:value={newContent} placeholder="内容…"></textarea>
+      <textarea id="nf-content" rows="8" class="textarea" bind:value={newContent} placeholder="内容…"></textarea>
     </div>
     <div class="mt-4 flex justify-end gap-2">
-      <button class="rounded-lg border border-line bg-panel px-3.5 py-1.5 text-[12.5px] font-medium text-ink transition hover:bg-hover" onclick={() => (showNewFile = false)}>取消</button>
+      <button class="btn" onclick={() => (showNewFile = false)}>取消</button>
-      <button class="rounded-lg bg-accent px-3.5 py-1.5 text-[12.5px] font-medium text-white transition hover:bg-accent-hover" onclick={submitNewFile}>创建</button>
+      <button class="btn btn-primary" onclick={submitNewFile}>创建</button>
     </div>
   </Modal>
 {/if}

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

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+  // 从已删除的 routes/adminPanels.ts 的 GROUP_ICONS 原样搬来(ADR-0029)。
+  export const ICONS = {
+    // Group 节点 = 人的集合。**不用文件夹图标** —— Group 不是目录,与文件库的
+    // FOLDER/PROJECT 是两套体系,图标上也不应混淆。两人剪影。
+    group:
+      "M16 19v-1.5a3.5 3.5 0 0 0-3.5-3.5h-5A3.5 3.5 0 0 0 4 17.5V19M10 11.5a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM20 19v-1.5a3.5 3.5 0 0 0-2.6-3.38M15.4 5.22a3.25 3.25 0 0 1 0 6.06",
+    users:
+      "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm14 10v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75",
+    user: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
+    plus: "M12 5v14M5 12h14",
+    pencil: "M17 3a2.8 2.8 0 0 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",
+    trash: "M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14",
+    search: "m21 21-4.3-4.3M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z",
+    chevron: "m9 18 6-6-6-6",
+    layers: "m12 2 9 5-9 5-9-5 9-5Zm9 11-9 5-9-5m18 5-9 5-9-5",
+    clock: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm0-14v6l4 2",
+    minus: "M5 12h14",
+    // 已归档(软删)标记用;与"删除"区分 —— 数据仍在,只是打了 archivedAt。
+    archive: "M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Zm1-5h16l1 5H3l1-5Zm5 9h6",
+    restore: "M3 12a9 9 0 1 0 3-6.7M3 4v4.5h4.5",
+  } as const;
+
+  export type IconName = keyof typeof ICONS;
+</script>
+
+<script lang="ts">
+  let { name, size = 16 }: { name: IconName; size?: number } = $props();
+</script>
+
+<svg
+  style="width:{size}px;height:{size}px"
+  class="shrink-0"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.8"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+><path d={ICONS[name]} /></svg>