From fe6649f17db7ef9939f947cc461f4c5c2a7c3f32 Mon Sep 17 00:00:00 2001
From: root <root@localhost>
Date: Wed, 30 Sep 2026 19:32:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=96=87=E4=BB=B6=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=9B=AE=E5=BD=95=E6=A0=91=E4=B8=8E=E4=B8=BB=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E5=85=B1=E7=94=A8=E5=AE=9E=E5=BA=95=20slab=20?=
 =?UTF-8?q?=E4=B8=8E=E8=A1=A8=E5=A4=B4=20token(FIX-9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/app/app.css                        | 15 +++++++++++++++
 apps/web/app/components/files/file-list.tsx |  2 +-
 apps/web/app/routes/console/files.tsx       |  4 ++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/app.css b/apps/web/app/app.css
index 760c9882..4df6287e 100644
--- a/apps/web/app/app.css
+++ b/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;
diff --git a/apps/web/app/components/files/file-list.tsx b/apps/web/app/components/files/file-list.tsx
index 135c1c73..300878b0 100644
--- a/apps/web/app/components/files/file-list.tsx
+++ b/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,
           )}
         >
diff --git a/apps/web/app/routes/console/files.tsx b/apps/web/app/routes/console/files.tsx
index 746179fe..681555d7 100644
--- a/apps/web/app/routes/console/files.tsx
+++ b/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="目录内容"
         >
           {/* 工具栏 */}