From 601900f933ed2e5166674288d448fe707bda5ece Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 24 Jan 2026 21:48:05 +0800
Subject: [PATCH] fix: adjust canvas UI layout - vertical toolbar and header
 position

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

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index d94ae4ff9..1e24160b0 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -369,7 +369,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
         </div>
 
         {/* 2. Floating Header (Top Left) */}
-        <div className="absolute top-4 left-4 z-20 flex items-center gap-2 bg-background/80 backdrop-blur-md border rounded-xl p-1.5 shadow-sm">
+        <div className="absolute top-24 left-4 z-20 flex items-center gap-2 bg-background/80 backdrop-blur-md border rounded-xl p-1.5 shadow-sm">
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variant="ghost" size="icon" onClick={() => router.push('/')} className="rounded-lg h-8 w-8">
@@ -436,7 +436,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
         </div>
 
         {/* 3. Floating Actions (Top Right) */}
-        <div className="absolute top-4 right-4 z-20 flex items-center gap-2">
+        <div className="absolute top-24 right-4 z-20 flex items-center gap-2">
            <div className="bg-background/80 backdrop-blur-md border rounded-xl p-1.5 shadow-sm flex items-center gap-1">
               {/* Panel Toggle */}
               <Tooltip>
@@ -457,7 +457,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
 
         {/* 4. Floating Sidebar (Right) */}
         <div className={cn(
-            "absolute top-20 right-4 bottom-4 z-10 w-[400px] transition-all duration-300 ease-in-out",
+            "absolute top-40 right-4 bottom-4 z-10 w-[400px] transition-all duration-300 ease-in-out",
             isPanelOpen ? "translate-x-0 opacity-100" : "translate-x-[120%] opacity-0"
         )}>
             <div className="h-full w-full rounded-2xl border bg-background/95 backdrop-blur-md shadow-2xl overflow-hidden flex flex-col">
@@ -641,8 +641,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
         </div>
 
         {/* 5. Floating Bottom Toolbar (Left) */}
-        <div className="absolute bottom-8 left-4 z-20">
-           <div className="flex items-center gap-1.5 p-2 rounded-2xl border bg-background/80 backdrop-blur-md shadow-2xl">
+        <div className="absolute left-4 top-1/2 -translate-y-1/2 z-20">
+           <div className="flex flex-col items-center gap-3 p-2 rounded-2xl border bg-background/80 backdrop-blur-md shadow-2xl">
               {/* Tools: Select, Pan, Add Text, Add Image, Add Video */}
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -655,7 +655,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     <MousePointer className="h-5 w-5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>选择 (V)</TooltipContent>
+                <TooltipContent side="right">选择 (V)</TooltipContent>
               </Tooltip>
               
               <Tooltip>
@@ -669,10 +669,10 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     <Hand className="h-5 w-5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>平移 (H)</TooltipContent>
+                <TooltipContent side="right">平移 (H)</TooltipContent>
               </Tooltip>
 
-              <Separator orientation="vertical" className="h-6 mx-1" />
+              <Separator orientation="horizontal" className="w-6 my-1" />
 
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -680,7 +680,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     <Type className="h-5 w-5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>添加文本</TooltipContent>
+                <TooltipContent side="right">添加文本</TooltipContent>
               </Tooltip>
 
               <Tooltip>
@@ -689,7 +689,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     <ImagePlus className="h-5 w-5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>添加图片</TooltipContent>
+                <TooltipContent side="right">添加图片</TooltipContent>
               </Tooltip>
               
               <Tooltip>
@@ -698,10 +698,10 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     <Video className="h-5 w-5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>添加视频</TooltipContent>
+                <TooltipContent side="right">添加视频</TooltipContent>
               </Tooltip>
 
-              <Separator orientation="vertical" className="h-6 mx-1" />
+              <Separator orientation="horizontal" className="w-6 my-1" />
 
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -709,7 +709,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     <Undo2 className="h-5 w-5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>撤销</TooltipContent>
+                <TooltipContent side="right">撤销</TooltipContent>
               </Tooltip>
 
               <Tooltip>
@@ -718,22 +718,22 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     <Redo2 className="h-5 w-5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>重做</TooltipContent>
+                <TooltipContent side="right">重做</TooltipContent>
               </Tooltip>
               
-              <Separator orientation="vertical" className="h-6 mx-1" />
+              <Separator orientation="horizontal" className="w-6 my-1" />
               
               {/* Zoom Controls */}
-              <div className="flex items-center gap-1">
-                 <Button variant="ghost" size="icon" onClick={zoomOut} className="h-8 w-8 rounded-lg">
-                    <ZoomOut className="h-4 w-4" />
-                 </Button>
-                 <span className="text-xs w-10 text-center tabular-nums font-medium">
-                    {Math.round(viewport.zoom * 100)}%
-                 </span>
+              <div className="flex flex-col items-center gap-1">
                  <Button variant="ghost" size="icon" onClick={zoomIn} className="h-8 w-8 rounded-lg">
                     <ZoomIn className="h-4 w-4" />
                  </Button>
+                 <span className="text-[10px] w-10 text-center tabular-nums font-medium">
+                    {Math.round(viewport.zoom * 100)}%
+                 </span>
+                 <Button variant="ghost" size="icon" onClick={zoomOut} className="h-8 w-8 rounded-lg">
+                    <ZoomOut className="h-4 w-4" />
+                 </Button>
               </div>
            </div>
         </div>