体验: 工作台改画布卡片式布局，四面板圆角卡片+缝隙分隔替代生硬1px拼接

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

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

@@ -47,7 +47,7 @@ export function TopBar({
   return (
     <header
       className={cn(
-        "app-drag flex h-12 shrink-0 items-center justify-between gap-3 border-b bg-background px-3",
+        "app-drag flex h-12 shrink-0 items-center justify-between gap-3 px-3",
         macInset && "pl-20",
       )}
     >
@@ -57,11 +57,11 @@ export function TopBar({
         <span className="hidden max-w-56 truncate font-mono text-xs text-muted-foreground lg:inline">
           {session.serverUri}
         </span>
-        <span className="hidden max-w-44 shrink-0 items-center gap-1 truncate rounded-md bg-muted px-2 py-0.5 text-xs font-medium sm:inline-flex">
+        <span className="hidden max-w-44 shrink-0 items-center gap-1 truncate rounded-md border bg-card px-2 py-0.5 text-xs font-medium shadow-card sm:inline-flex">
           <span className="text-muted-foreground">Collection</span>
           <span className="truncate">{session.collection}</span>
         </span>
-        <span className="inline-flex max-w-52 shrink-0 items-center gap-1 truncate rounded-md bg-muted px-2 py-0.5 text-xs">
+        <span className="inline-flex max-w-52 shrink-0 items-center gap-1 truncate rounded-md border bg-card px-2 py-0.5 text-xs shadow-card">
           <span className="text-muted-foreground">Workspace</span>
           <span className="truncate font-mono">{session.workspace}</span>
         </span>

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

@@ -87,7 +87,8 @@ export function WorkspaceShell({
 
   return (
     <TooltipProvider>
-      <div className="flex h-svh flex-col overflow-hidden bg-background">
+      {/* 画布式布局：浅灰画布 + 各面板卡片化，卡片间留缝隙避免生硬拼接 */}
+      <div className="flex h-svh flex-col overflow-hidden bg-sidebar">
         <TopBar
           session={session}
           panels={panels}
@@ -96,12 +97,12 @@ export function WorkspaceShell({
           onManageWorkspace={() => setManageOpen(true)}
         />
 
-        <div className="flex min-h-0 flex-1">
-          {/* 左右面板保持挂载，通过宽度过渡实现折叠 / 展开动画 */}
+        <div className="flex min-h-0 flex-1 px-2 pb-2">
+          {/* 左右面板保持挂载，通过宽度 + 间距过渡实现折叠 / 展开动画 */}
           <div
             className={cn(
-              "flex min-h-0 shrink-0 overflow-hidden transition-[width] duration-250 ease-out-quart",
-              panels.tree ? "w-[280px]" : "w-0",
+              "flex min-h-0 shrink-0 overflow-hidden transition-[width,margin] duration-250 ease-out-quart",
+              panels.tree ? "mr-2 w-[280px]" : "mr-0 w-0",
             )}
           >
             <SourceTreePanel
@@ -123,8 +124,8 @@ export function WorkspaceShell({
           />
           <div
             className={cn(
-              "flex min-h-0 shrink-0 justify-end overflow-hidden transition-[width] duration-250 ease-out-quart",
-              panels.changes ? "w-[340px]" : "w-0",
+              "flex min-h-0 shrink-0 justify-end overflow-hidden transition-[width,margin] duration-250 ease-out-quart",
+              panels.changes ? "ml-2 w-[340px]" : "ml-0 w-0",
             )}
           >
             <ChangesPanel
@@ -145,8 +146,8 @@ export function WorkspaceShell({
         {/* 底部操作台通过高度过渡实现滑入滑出 */}
         <div
           className={cn(
-            "shrink-0 overflow-hidden transition-[height] duration-250 ease-out-quart",
-            panels.console ? "h-[180px]" : "h-0",
+            "box-border shrink-0 overflow-hidden px-2 transition-[height] duration-250 ease-out-quart",
+            panels.console ? "h-[188px] pb-2" : "h-0",
           )}
         >
           <ConsolePanel

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

@@ -128,7 +128,7 @@ export function FolderItemsPanel({
   })
 
   return (
-    <section className="flex h-full min-w-0 flex-1 flex-col bg-background">
+    <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">
         <span className="shrink-0 text-xs text-muted-foreground">当前路径</span>
         <span className="min-w-0 truncate font-mono text-xs">{selectedServerPath}</span>
@@ -171,7 +171,7 @@ export function FolderItemsPanel({
           </div>
         ) : (
           <Table>
-            <TableHeader className="sticky top-0 z-10 bg-background">
+            <TableHeader className="sticky top-0 z-10 bg-card">
               <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

@@ -129,7 +129,7 @@ export function SourceTreePanel({
   )
 
   return (
-    <aside className="flex h-full w-[280px] shrink-0 flex-col border-r bg-sidebar">
+    <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">
         <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
           源码目录

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

@@ -66,7 +66,7 @@ export function ChangesPanel({
   }, [onCheckin, included, comment])
 
   return (
-    <aside className="flex h-full w-[340px] shrink-0 flex-col border-l bg-sidebar">
+    <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">
         <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
           挂起更改

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

@@ -60,7 +60,7 @@ export function ConsolePanel({
   )
 
   return (
-    <footer className="flex h-[180px] shrink-0 flex-col border-t bg-background">
+    <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">
         <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
           操作日志