From efa7cff4314d0aca25d0ab246ee5f53967877957 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Wed, 4 Mar 2026 00:01:39 +0800
Subject: [PATCH] fix(canvas): compact bottom toolbar and move zoom undo
 controls to corner

---
 app/canvas/[id]/page.tsx | 53 ++++++++++++++++++++++++----------------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index ec9fd4c45..0b3baff21 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -685,14 +685,19 @@ export default function CanvasEditorPage({ params }: PageProps) {
 
         {/* 5. Floating Toolbar (Bottom) */}
         <div className="absolute bottom-5 left-1/2 z-20 -translate-x-1/2">
-          <div className="flex items-center gap-1.5 rounded-[28px] border bg-background/88 px-3 py-2 shadow-2xl backdrop-blur-md">
+          <div
+            className="flex items-center gap-1 rounded-[24px] border bg-background/88 px-2.5 py-1.5 shadow-2xl backdrop-blur-md"
+            style={{
+              marginLeft: isPanelOpen ? "-238px" : "0px",
+            }}
+          >
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
                   variant={tool === "select" ? "secondary" : "ghost"}
                   size="icon"
                   onClick={() => setTool("select")}
-                  className={cn("h-10 w-10 rounded-2xl", tool === "select" && "bg-primary text-primary-foreground hover:bg-primary/90")}
+                  className={cn("h-9 w-9 rounded-xl", tool === "select" && "bg-primary text-primary-foreground hover:bg-primary/90")}
                 >
                   <MousePointer className="h-4 w-4" />
                 </Button>
@@ -706,7 +711,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                   variant={tool === "pan" ? "secondary" : "ghost"}
                   size="icon"
                   onClick={() => setTool("pan")}
-                  className={cn("h-10 w-10 rounded-2xl", tool === "pan" && "bg-primary text-primary-foreground hover:bg-primary/90")}
+                  className={cn("h-9 w-9 rounded-xl", tool === "pan" && "bg-primary text-primary-foreground hover:bg-primary/90")}
                 >
                   <Hand className="h-4 w-4" />
                 </Button>
@@ -720,7 +725,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                   variant="ghost"
                   size="icon"
                   onClick={handleAddImageNode}
-                  className="h-10 w-10 rounded-2xl"
+                  className="h-9 w-9 rounded-xl"
                 >
                   <ImagePlus className="h-4 w-4" />
                 </Button>
@@ -734,7 +739,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                   variant="ghost"
                   size="icon"
                   onClick={handleAddTextNode}
-                  className="h-10 w-10 rounded-2xl"
+                  className="h-9 w-9 rounded-xl"
                 >
                   <Type className="h-4 w-4" />
                 </Button>
@@ -750,7 +755,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     variant="ghost"
                     size="icon"
                     onClick={() => router.push(`/canvas/${id}/realtime`)}
-                    className="h-10 w-10 rounded-2xl"
+                    className="h-9 w-9 rounded-xl"
                   >
                     <PenTool className="h-4 w-4" />
                   </Button>
@@ -765,7 +770,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                   variant="ghost"
                   size="icon"
                   onClick={() => router.push(`/canvas/${id}/model3d`)}
-                  className="h-10 w-10 rounded-2xl"
+                  className="h-9 w-9 rounded-xl"
                 >
                   <Box className="h-4 w-4" />
                 </Button>
@@ -779,20 +784,26 @@ export default function CanvasEditorPage({ params }: PageProps) {
                   variant="ghost"
                   size="icon"
                   onClick={() => router.push('/canvas?new=1')}
-                  className="h-10 w-10 rounded-2xl"
+                  className="h-9 w-9 rounded-xl"
                 >
                   <Plus className="h-4 w-4" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">新建画布</TooltipContent>
             </Tooltip>
+          </div>
+        </div>
 
-            <Separator orientation="vertical" className="mx-1 h-6" />
-
+        {/* 6. Bottom Right Compact Controls */}
+        <div
+          className="absolute bottom-5 z-20"
+          style={{ right: isPanelOpen ? "492px" : "16px" }}
+        >
+          <div className="flex items-center gap-1 rounded-2xl border bg-background/88 px-2 py-1.5 shadow-xl backdrop-blur-md">
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={undo} disabled={!canUndo} className="h-10 w-10 rounded-2xl">
-                  <Undo2 className="h-4 w-4" />
+                <Button variant="ghost" size="icon" onClick={undo} disabled={!canUndo} className="h-8 w-8 rounded-lg">
+                  <Undo2 className="h-3.5 w-3.5" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">撤销</TooltipContent>
@@ -800,28 +811,28 @@ export default function CanvasEditorPage({ params }: PageProps) {
 
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={redo} disabled={!canRedo} className="h-10 w-10 rounded-2xl">
-                  <Redo2 className="h-4 w-4" />
+                <Button variant="ghost" size="icon" onClick={redo} disabled={!canRedo} className="h-8 w-8 rounded-lg">
+                  <Redo2 className="h-3.5 w-3.5" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">重做</TooltipContent>
             </Tooltip>
 
-            <Separator orientation="vertical" className="mx-1 h-6" />
+            <Separator orientation="vertical" className="mx-0.5 h-5" />
 
-            <Button variant="ghost" size="icon" onClick={zoomOut} className="h-10 w-10 rounded-2xl">
-              <ZoomOut className="h-4 w-4" />
+            <Button variant="ghost" size="icon" onClick={zoomOut} className="h-8 w-8 rounded-lg">
+              <ZoomOut className="h-3.5 w-3.5" />
             </Button>
-            <span className="w-14 text-center text-sm tabular-nums font-medium text-muted-foreground">
+            <span className="w-12 text-center text-xs tabular-nums font-medium text-muted-foreground">
               {Math.round(viewport.zoom * 100)}%
             </span>
-            <Button variant="ghost" size="icon" onClick={zoomIn} className="h-10 w-10 rounded-2xl">
-              <ZoomIn className="h-4 w-4" />
+            <Button variant="ghost" size="icon" onClick={zoomIn} className="h-8 w-8 rounded-lg">
+              <ZoomIn className="h-3.5 w-3.5" />
             </Button>
           </div>
         </div>
 
-        {/* 6. 物品拾取模式覆盖层 */}
+        {/* 7. 物品拾取模式覆盖层 */}
         <ObjectPickerOverlay />
       </div>
     </TooltipProvider>