lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(canvas): compact bottom toolbar and move zoom undo controls to corner
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-04 00:01:39 +08:00
parent dba2460c43
commit efa7cff431
1 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>