lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust canvas UI layout - vertical toolbar and header position

Browse Source
This commit is contained in:
Your Name 2026-01-24 21:48:05 +08:00
parent 30950a89dc
commit 601900f933
1 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/canvas/[id]/page.tsx
View File

@ -369,7 +369,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div> </div>
{/* 2. Floating Header (Top Left) */} {/* 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> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={() => router.push('/')} className="rounded-lg h-8 w-8"> <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> </div>
{/* 3. Floating Actions (Top Right) */} {/* 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"> <div className="bg-background/80 backdrop-blur-md border rounded-xl p-1.5 shadow-sm flex items-center gap-1">
{/* Panel Toggle */} {/* Panel Toggle */}
<Tooltip> <Tooltip>
@ -457,7 +457,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
{/* 4. Floating Sidebar (Right) */} {/* 4. Floating Sidebar (Right) */}
<div className={cn( <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" 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"> <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> </div>
{/* 5. Floating Bottom Toolbar (Left) */} {/* 5. Floating Bottom Toolbar (Left) */}
<div className="absolute bottom-8 left-4 z-20"> <div className="absolute left-4 top-1/2 -translate-y-1/2 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="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 */} {/* Tools: Select, Pan, Add Text, Add Image, Add Video */}
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@ -655,7 +655,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
<MousePointer className="h-5 w-5" /> <MousePointer className="h-5 w-5" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>选择 (V)</TooltipContent> <TooltipContent side="right">选择 (V)</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
@ -669,10 +669,10 @@ export default function CanvasEditorPage({ params }: PageProps) {
<Hand className="h-5 w-5" /> <Hand className="h-5 w-5" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>平移 (H)</TooltipContent> <TooltipContent side="right">平移 (H)</TooltipContent>
</Tooltip> </Tooltip>
<Separator orientation="vertical" className="h-6 mx-1" /> <Separator orientation="horizontal" className="w-6 my-1" />
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@ -680,7 +680,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
<Type className="h-5 w-5" /> <Type className="h-5 w-5" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>添加文本</TooltipContent> <TooltipContent side="right">添加文本</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
@ -689,7 +689,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
<ImagePlus className="h-5 w-5" /> <ImagePlus className="h-5 w-5" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>添加图片</TooltipContent> <TooltipContent side="right">添加图片</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
@ -698,10 +698,10 @@ export default function CanvasEditorPage({ params }: PageProps) {
<Video className="h-5 w-5" /> <Video className="h-5 w-5" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>添加视频</TooltipContent> <TooltipContent side="right">添加视频</TooltipContent>
</Tooltip> </Tooltip>
<Separator orientation="vertical" className="h-6 mx-1" /> <Separator orientation="horizontal" className="w-6 my-1" />
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@ -709,7 +709,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
<Undo2 className="h-5 w-5" /> <Undo2 className="h-5 w-5" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>撤销</TooltipContent> <TooltipContent side="right">撤销</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
@ -718,22 +718,22 @@ export default function CanvasEditorPage({ params }: PageProps) {
<Redo2 className="h-5 w-5" /> <Redo2 className="h-5 w-5" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>重做</TooltipContent> <TooltipContent side="right">重做</TooltipContent>
</Tooltip> </Tooltip>
<Separator orientation="vertical" className="h-6 mx-1" /> <Separator orientation="horizontal" className="w-6 my-1" />
{/* Zoom Controls */} {/* Zoom Controls */}
<div className="flex items-center gap-1"> <div className="flex flex-col 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>
<Button variant="ghost" size="icon" onClick={zoomIn} className="h-8 w-8 rounded-lg"> <Button variant="ghost" size="icon" onClick={zoomIn} className="h-8 w-8 rounded-lg">
<ZoomIn className="h-4 w-4" /> <ZoomIn className="h-4 w-4" />
</Button> </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> </div>
</div> </div>