From faf15526076ca349e0b91416d35bea242167925c Mon Sep 17 00:00:00 2001
From: root <root@localhost>
Date: Wed, 30 Sep 2026 00:00:03 +0800
Subject: [PATCH] =?UTF-8?q?style(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=E6=94=B9=E6=88=90=E4=B8=8E?=
 =?UTF-8?q?=E4=B8=BB=E9=9D=A2=E6=9D=BF=E5=90=8C=E6=AC=BE=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?(FIX-7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

目录树放进同背景、边框、圆角的卡片,两卡间距与上下边缘对齐;头部「目录」+ 折叠钮与工具栏第一行等高,
折叠钮从主面板工具栏挪到这里;拖宽与折叠记忆保留,手机抽屉不变。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/app/components/files/dir-tree.tsx |   2 +-
 apps/web/app/routes/console/files.tsx      | 129 ++++++++++-----------
 2 files changed, 62 insertions(+), 69 deletions(-)

diff --git a/apps/web/app/components/files/dir-tree.tsx b/apps/web/app/components/files/dir-tree.tsx
index 886afdc4..b9bc7174 100644
--- a/apps/web/app/components/files/dir-tree.tsx
+++ b/apps/web/app/components/files/dir-tree.tsx
@@ -61,7 +61,7 @@ export function DirTree({
     <nav aria-label="登记目录" className={cn("space-y-4", className)}>
       {groups.map((g) => (
         <section key={g.title} aria-label={g.title}>
-          <p className="mb-1 px-2 text-micro font-semibold tracking-[0.15em] text-muted-foreground uppercase">
+          <p className="mb-1 px-2 text-micro font-semibold tracking-[0.15em] text-muted-foreground/75 uppercase">
             {g.title}
           </p>
           <div className="space-y-0.5">
diff --git a/apps/web/app/routes/console/files.tsx b/apps/web/app/routes/console/files.tsx
index c20510b7..746179fe 100644
--- a/apps/web/app/routes/console/files.tsx
+++ b/apps/web/app/routes/console/files.tsx
@@ -192,7 +192,7 @@ function readLastLoc(): Loc | null {
 const hnrPathsOf = (list: FileEntry[]) =>
   list.filter((e) => e.download && (e.download.hnr !== "satisfied" || e.status === "downloading")).map((e) => e.path);
 
-/** 折叠后的左栏:44px 图标条(登记目录 + 回收站) */
+/** 折叠后的左栏:52px 圆角卡片里的图标条(登记目录 + 回收站),展开钮与主面板工具栏第一行对齐 */
 function TreeRail({
   roots,
   current,
@@ -207,7 +207,7 @@ function TreeRail({
   trashCount: string;
 }) {
   return (
-    <nav aria-label="登记目录" className="flex flex-col items-center gap-1 py-2">
+    <nav aria-label="登记目录" className="flex flex-col items-center gap-1 py-2.5">
       <Button variant="ghost" size="icon-sm" aria-label="展开目录树" title="展开目录树" onClick={onExpand}>
         <PanelLeftOpen />
       </Button>
@@ -883,61 +883,34 @@ export default function FilesPage() {
     <>
       {/* 顶栏已显示页面名,这里只给读屏留标题,把高度让给列表 */}
       <h1 className="sr-only">文件管理</h1>
-      <div className={cn("flex h-[calc(100dvh-3.5rem)] min-w-0", mobile && "flex-col p-3")}>
-        {/* 桌面左栏:贴着侧边栏的整高目录树(可折叠、可拖宽,宽度记在本机) */}
+      <div className={cn("flex h-[calc(100dvh-3.5rem)] min-w-0 gap-3 p-3", mobile && "flex-col")}>
+        {/* 桌面左栏:与主面板同款的圆角卡片(同背景、边框、圆角),上下与主面板对齐;可折叠、可拖宽,宽度记在本机 */}
         {!mobile ? (
           <aside
-            className="pg-chrome pg-chrome-side relative flex shrink-0 flex-col border-r"
-            style={{ width: treeOpen ? treeW : 44 }}
+            className="relative flex shrink-0"
+            style={{ width: treeOpen ? treeW : 52 }}
             aria-label="登记目录与目录树"
           >
-            {treeOpen ? (
-              <>
-                {/* 左侧留出全站侧栏折叠钮的位置 */}
-                <div className="flex h-11 shrink-0 items-center border-b border-[var(--shell-border)] pr-2 pl-6">
-                  <span className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">
-                    登记目录
-                  </span>
-                  {filesMockEnabled() ? (
-                    <StatusBadge tone="warning" className="ml-auto">
-                      演示数据
-                    </StatusBadge>
-                  ) : null}
-                </div>
-                <div className="min-h-0 flex-1 overflow-y-auto p-2">{tree}</div>
-                {/* biome-ignore lint/a11y/useSemanticElements: 可拖动、可键盘调整的分隔条,hr 不能获焦 */}
-                <div
-                  role="separator"
-                  aria-orientation="vertical"
-                  aria-label="调整目录树宽度"
-                  title="拖动调整宽度，双击恢复默认"
-                  aria-valuenow={treeW}
-                  aria-valuemin={TREE_W_MIN}
-                  aria-valuemax={TREE_W_MAX}
-                  tabIndex={0}
-                  onKeyDown={(e) => {
-                    if (e.key === "ArrowLeft") setTreeW(treeW - 16);
-                    if (e.key === "ArrowRight") setTreeW(treeW + 16);
-                  }}
-                  onDoubleClick={() => setTreeW(TREE_W_DEFAULT)}
-                  onPointerDown={(e) => {
-                    e.preventDefault();
-                    const startX = e.clientX;
-                    const startW = treeW;
-                    const move = (ev: PointerEvent) => setTreeW(startW + ev.clientX - startX);
-                    const upH = () => {
-                      window.removeEventListener("pointermove", move);
-                      window.removeEventListener("pointerup", upH);
-                    };
-                    window.addEventListener("pointermove", move);
-                    window.addEventListener("pointerup", upH);
-                  }}
-                  className="absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize hover:bg-foreground/[0.08] focus-visible:bg-foreground/[0.12] focus-visible:outline-none"
-                />
-              </>
-            ) : (
-              <>
-                <div aria-hidden className="h-11 shrink-0 border-b border-[var(--shell-border)]" />
+            <div className="pg-slab flex min-h-0 w-full flex-col overflow-hidden rounded-2xl">
+              {treeOpen ? (
+                <>
+                  {/* 头部一行与主面板工具栏第一行等高(同 px-3 py-2.5 + 按钮高度) */}
+                  <div className="flex shrink-0 items-center gap-1.5 px-3 py-2.5">
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="折叠目录树"
+                      title="折叠目录树"
+                      onClick={() => setTreeOpenStored(false)}
+                    >
+                      <PanelLeftClose />
+                    </Button>
+                    <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">目录</span>
+                    {filesMockEnabled() ? <StatusBadge tone="warning">演示数据</StatusBadge> : null}
+                  </div>
+                  <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">{tree}</div>
+                </>
+              ) : (
                 <TreeRail
                   roots={rootList}
                   current={rootId}
@@ -945,16 +918,45 @@ export default function FilesPage() {
                   onExpand={() => setTreeOpenStored(true)}
                   trashCount={trashCount}
                 />
-              </>
-            )}
+              )}
+            </div>
+            {treeOpen ? (
+              // biome-ignore lint/a11y/useSemanticElements: 可拖动、可键盘调整的分隔条,hr 不能获焦
+              <div
+                role="separator"
+                aria-orientation="vertical"
+                aria-label="调整目录树宽度"
+                title="拖动调整宽度，双击恢复默认"
+                aria-valuenow={treeW}
+                aria-valuemin={TREE_W_MIN}
+                aria-valuemax={TREE_W_MAX}
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === "ArrowLeft") setTreeW(treeW - 16);
+                  if (e.key === "ArrowRight") setTreeW(treeW + 16);
+                }}
+                onDoubleClick={() => setTreeW(TREE_W_DEFAULT)}
+                onPointerDown={(e) => {
+                  e.preventDefault();
+                  const startX = e.clientX;
+                  const startW = treeW;
+                  const move = (ev: PointerEvent) => setTreeW(startW + ev.clientX - startX);
+                  const upH = () => {
+                    window.removeEventListener("pointermove", move);
+                    window.removeEventListener("pointerup", upH);
+                  };
+                  window.addEventListener("pointermove", move);
+                  window.addEventListener("pointerup", upH);
+                }}
+                // 放在两张卡片之间的缝里
+                className="absolute inset-y-3 -right-2.5 z-10 w-2 cursor-col-resize rounded-full hover:bg-foreground/[0.08] focus-visible:bg-foreground/[0.12] focus-visible:outline-none"
+              />
+            ) : null}
           </aside>
         ) : null}
 
         <section
-          className={cn(
-            "pg-slab relative flex min-h-[24rem] min-w-0 flex-1 flex-col overflow-hidden rounded-2xl",
-            !mobile && "m-3",
-          )}
+          className="pg-slab relative flex min-h-[24rem] min-w-0 flex-1 flex-col overflow-hidden rounded-2xl"
           aria-label="目录内容"
         >
           {/* 工具栏 */}
@@ -1001,15 +1003,6 @@ export default function FilesPage() {
           ) : (
             <div className="space-y-2 border-b border-border px-3 py-2.5">
               <div className="flex min-w-0 items-center gap-1.5">
-                <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={treeOpen ? "折叠目录树" : "展开目录树"}
-                  title={treeOpen ? "折叠目录树" : "展开目录树"}
-                  onClick={() => setTreeOpenStored(!treeOpen)}
-                >
-                  {treeOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
-                </Button>
                 <Button
                   variant="ghost"
                   size="icon-sm"