fix(web): 文件管理目录树与主面板共用实底 slab 与表头 token(FIX-9)

两块面板垫同一层底色(pg-slab-solid),背后光斑不再让目录树更亮更透;
列表粘性表头改用与卡片同色系的 pg-slab-head,不再是一条纯黑。

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/app/app.css

@@ -311,6 +311,9 @@
   --mat-slab-border: rgba(255, 255, 255, 0.7);
   --mat-slab-blur: blur(20px) saturate(160%);
   --mat-slab-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(20, 22, 28, 0.04), 0 1px 2px rgba(20, 22, 28, 0.05), 0 12px 28px -18px rgba(20, 22, 28, 0.16);
+  /* 满高工作面板(文件管理的目录树 + 主面板)的实底与粘性表头:两块共用,背后的光斑不再让一块比另一块亮 */
+  --mat-slab-base: color-mix(in oklab, var(--background) 35%, transparent);
+  --mat-slab-head: color-mix(in oklab, var(--background) 25%, white);
   --mat-slab-reflection: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.14) 36%, rgba(255, 255, 255, 0.3) 44%, rgba(255, 255, 255, 0.07) 51%, transparent 62%);
   --mat-spotlight: rgba(255, 255, 255, 0.6);
   /* 卡片投影:日间轻,夜间沿用 @theme 里的深投影 */
@@ -458,6 +461,8 @@
   --mat-slab-bg: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.04) 100%);
   --mat-slab-border: rgba(255, 255, 255, 0.1);
   --mat-slab-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 28px -18px rgba(0, 0, 0, 0.4);
+  --mat-slab-base: color-mix(in oklab, var(--background) 78%, transparent);
+  --mat-slab-head: color-mix(in oklab, var(--background) 94%, white);
   --mat-slab-reflection: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.006) 36%, rgba(255, 255, 255, 0.013) 44%, rgba(255, 255, 255, 0.003) 51%, transparent 62%);
   --mat-spotlight: rgba(255, 255, 255, 0.07);
   --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
@@ -859,6 +864,16 @@
     box-shadow: var(--mat-slab-shadow);
   }
 
+  /* 实底 slab:同一套玻璃面,下面垫一层底色,只让光斑淡淡渗进来(满高工作面板用,几块并排时明暗一致) */
+  .pg-slab-solid {
+    background: var(--mat-slab-bg), var(--mat-slab-base);
+  }
+
+  /* slab 里的粘性表头:与卡片同色系的实底,不是一条纯黑 / 纯白的条 */
+  .pg-slab-head {
+    background: var(--mat-slab-head);
+  }
+
   .pg-slab::before {
     content: "";
     position: absolute;

apps/web/app/components/files/file-list.tsx

@@ -363,7 +363,7 @@ export function FileList({
         <div
           role="row"
           className={cn(
-            "sticky top-0 z-10 grid items-center gap-3 border-b border-border bg-background/95 px-3 py-2 text-meta font-medium text-muted-foreground backdrop-blur",
+            "pg-slab-head sticky top-0 z-10 grid items-center gap-3 border-b border-border px-3 py-2 text-meta font-medium text-muted-foreground",
             DESKTOP_COLS,
           )}
         >

apps/web/app/routes/console/files.tsx

@@ -891,7 +891,7 @@ export default function FilesPage() {
             style={{ width: treeOpen ? treeW : 52 }}
             aria-label="登记目录与目录树"
           >
-            <div className="pg-slab flex min-h-0 w-full flex-col overflow-hidden rounded-2xl">
+            <div className="pg-slab pg-slab-solid flex min-h-0 w-full flex-col overflow-hidden rounded-2xl">
               {treeOpen ? (
                 <>
                   {/* 头部一行与主面板工具栏第一行等高(同 px-3 py-2.5 + 按钮高度) */}
@@ -956,7 +956,7 @@ export default function FilesPage() {
         ) : null}
 
         <section
-          className="pg-slab relative flex min-h-[24rem] min-w-0 flex-1 flex-col overflow-hidden rounded-2xl"
+          className="pg-slab pg-slab-solid relative flex min-h-[24rem] min-w-0 flex-1 flex-col overflow-hidden rounded-2xl"
           aria-label="目录内容"
         >
           {/* 工具栏 */}