体验: 顶栏改程序名+Collection胶囊，画布卡片层次强化，修复侧栏长文本截断无省略号

Co-authored-by: Cursor <cursoragent@cursor.com>

mactfsui/app/app.css

@@ -55,7 +55,7 @@
     --radius-3xl: calc(var(--radius) * 2.2);
     --radius-4xl: calc(var(--radius) * 2.6);
     /* 阴影分层：卡片极轻 / 浮层轻 / 弹窗（Sheet）明显 */
-    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.05);
+    --shadow-card: 0 0 0 0.5px rgb(0 0 0 / 0.03), 0 1px 1px rgb(0 0 0 / 0.04), 0 4px 14px rgb(0 0 0 / 0.06);
     --shadow-overlay: 0 4px 16px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.06);
     --shadow-dialog: 0 18px 50px rgb(0 0 0 / 0.22), 0 4px 12px rgb(0 0 0 / 0.1);
     /* 缓动曲线 */
@@ -131,6 +131,11 @@ html.vibrancy body {
     background: transparent;
 }
 
+/* 工作台画布底色：比卡片深一档的中性灰，让白色卡片浮起；vibrancy 下半透明透出窗口毛玻璃。 */
+@utility canvas-surface {
+  background-color: oklch(0.934 0.004 286 / 0.85);
+}
+
 /* 隐藏式标题栏下的窗口拖拽区域：顶栏整体可拖动，交互控件单独豁免。 */
 @utility app-drag {
   -webkit-app-region: drag;

mactfsui/app/components/app/top-bar.tsx

@@ -15,8 +15,8 @@ export interface PanelVisibility {
 }
 
 /**
- * 顶部上下文栏：展示固定的 Server / Collection / Workspace 上下文，
- * 以及面板折叠开关与重新连接入口，不承载对象级操作。
+ * 顶部上下文栏：仿 Finder 的居中上下文胶囊展示 Collection / Workspace
+ * （悬停查看服务器地址），右侧为面板折叠开关与重新连接入口，不承载对象级操作。
  */
 export function TopBar({
   session,
@@ -40,21 +40,26 @@ export function TopBar({
         macInset && "pl-20",
       )}
     >
-      <div className="flex min-w-0 items-center gap-2 text-sm">
-        <span className="shrink-0 font-semibold">MacTFS</span>
-        <Separator orientation="vertical" className="h-4!" />
-        <span className="hidden shrink-0 text-xs text-muted-foreground lg:inline">
-          服务器
-        </span>
-        <span className="hidden max-w-56 truncate font-mono text-xs lg:inline">
-          {session.serverUri}
-        </span>
-        <Separator orientation="vertical" className="hidden h-4! lg:block" />
-        <span className="shrink-0 text-xs text-muted-foreground">Collection</span>
-        <span className="max-w-40 truncate text-xs font-medium">{session.collection}</span>
-        <Separator orientation="vertical" className="h-4!" />
-        <span className="shrink-0 text-xs text-muted-foreground">Workspace</span>
-        <span className="max-w-44 truncate font-mono text-xs">{session.workspace}</span>
+      {/* 左侧：程序名 + Collection 胶囊；服务器地址与工作区收进悬停提示 */}
+      <div className="flex min-w-0 items-center gap-2.5">
+        <span className="shrink-0 text-sm font-medium">MacTFS</span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="app-no-drag flex h-7 min-w-0 items-center rounded-lg bg-foreground/5 px-3 text-xs text-muted-foreground transition-colors hover:bg-foreground/8 hover:text-foreground">
+              <span className="truncate">{session.collection}</span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs">
+            <div className="space-y-0.5">
+              <p>
+                服务器 <span className="font-mono">{session.serverUri}</span>
+              </p>
+              <p>
+                工作区 <span className="font-mono">{session.workspace}</span>
+              </p>
+            </div>
+          </TooltipContent>
+        </Tooltip>
       </div>
 
       <div className="app-no-drag flex shrink-0 items-center gap-1">

mactfsui/app/components/app/workspace-shell.tsx

@@ -88,7 +88,7 @@ export function WorkspaceShell({
   return (
     <TooltipProvider>
       {/* 毛玻璃画布 + 卡片化面板：半透明画布透出 vibrancy，四个面板为圆角卡片留缝隙 */}
-      <div className="flex h-svh flex-col overflow-hidden bg-sidebar">
+      <div className="canvas-surface flex h-svh flex-col overflow-hidden">
         <TopBar
           session={session}
           panels={panels}

mactfsui/app/components/explorer/folder-items-panel.tsx

@@ -129,7 +129,7 @@ export function FolderItemsPanel({
 
   return (
     <section className="flex h-full min-w-0 flex-1 flex-col overflow-hidden rounded-xl border bg-card shadow-card">
-      <div className="flex h-9 shrink-0 items-center gap-2 border-b px-3">
+      <div className="flex h-9 shrink-0 items-center gap-2 border-b bg-muted/40 px-3">
         <span className="shrink-0 text-xs text-muted-foreground">当前路径</span>
         <span className="min-w-0 truncate font-mono text-xs">{selectedServerPath}</span>
         <span className="ml-auto shrink-0 text-xs text-muted-foreground">
@@ -172,7 +172,7 @@ export function FolderItemsPanel({
           </div>
         ) : (
           <Table>
-            <TableHeader className="sticky top-0 z-10 bg-card">
+            <TableHeader className="sticky top-0 z-10 bg-[oklch(0.972_0.003_286)]">
               <TableRow className="hover:bg-transparent">
                 <TableHead className="h-8 text-xs text-muted-foreground">名称</TableHead>
                 <TableHead className="h-8 w-24 text-xs text-muted-foreground">状态</TableHead>

mactfsui/app/components/explorer/source-tree-panel.tsx

@@ -130,7 +130,7 @@ export function SourceTreePanel({
 
   return (
     <aside className="flex h-full w-[280px] shrink-0 flex-col overflow-hidden rounded-xl border bg-card shadow-card">
-      <div className="flex h-9 shrink-0 items-center gap-2 border-b px-3">
+      <div className="flex h-9 shrink-0 items-center gap-2 border-b bg-muted/40 px-3">
         <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
           源码目录
         </span>
@@ -216,6 +216,7 @@ function TreeNode({
             isSelected ? "bg-sidebar-accent" : "hover:bg-sidebar-accent/60",
           )}
           style={{ paddingLeft: `${depth * 14 + 2}px` }}
+          title={path}
         >
           <span className="flex size-5 shrink-0 items-center justify-center">
             {isLoading ? (

mactfsui/app/components/inspector/changes-panel.tsx

@@ -67,7 +67,7 @@ export function ChangesPanel({
 
   return (
     <aside className="flex h-full w-[340px] shrink-0 flex-col overflow-hidden rounded-xl border bg-card shadow-card">
-      <div className="flex h-9 shrink-0 items-center gap-2 border-b px-3">
+      <div className="flex h-9 shrink-0 items-center gap-2 border-b bg-muted/40 px-3">
         <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
           挂起更改
         </span>

mactfsui/app/components/logs/console-panel.tsx

@@ -61,7 +61,7 @@ export function ConsolePanel({
 
   return (
     <footer className="flex h-full flex-col overflow-hidden rounded-xl border bg-card shadow-card">
-      <div className="flex h-8 shrink-0 items-center gap-2 border-b px-3">
+      <div className="flex h-8 shrink-0 items-center gap-2 border-b bg-muted/40 px-3">
         <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
           操作日志
         </span>

mactfsui/app/components/ui/scroll-area.tsx

@@ -16,7 +16,9 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        // Radix 默认给内容包一层 display:table + min-width:100% 的 div，会让内容按
+        // 自身宽度撑开导致 truncate 失效、文字被面板边缘硬切；改为 block 占满视口宽度。
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 [&>div]:block! [&>div]:w-full [&>div]:min-w-0!"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

mactfsui/app/components/ui/table.tsx

@@ -55,7 +55,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-primary/8 data-[state=selected]:hover:bg-primary/10",
         className
       )}
       {...props}