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

style(canvas): move compact zoom rail to bottom-left

Browse Source
This commit is contained in:
Your Name 2026-03-04 00:11:21 +08:00
parent f2b752dd7d
commit d641e893ba
1 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,6 +82,7 @@ const SIZE_PRESETS = [
const FLOATING_PANEL_WIDTH = 460; const FLOATING_PANEL_WIDTH = 460;
const FLOATING_PANEL_INSET = 16; const FLOATING_PANEL_INSET = 16;
const FLOATING_UI_GAP = 16; const FLOATING_UI_GAP = 16;
const FLOATING_BOTTOM_INSET = 20;
export default function CanvasEditorPage({ params }: PageProps) { export default function CanvasEditorPage({ params }: PageProps) {
// 使用 useParams 确保客户端导航时能正确获取更新的 id // 使用 useParams 确保客户端导航时能正确获取更新的 id
@ -155,7 +156,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
: FLOATING_PANEL_WIDTH; : FLOATING_PANEL_WIDTH;
const panelOcclusionRight = isPanelOpen ? resolvedPanelWidth + FLOATING_PANEL_INSET : 0; const panelOcclusionRight = isPanelOpen ? resolvedPanelWidth + FLOATING_PANEL_INSET : 0;
const floatingToolbarOffset = isPanelOpen ? -(panelOcclusionRight / 2) : 0; const floatingToolbarOffset = isPanelOpen ? -(panelOcclusionRight / 2) : 0;
const compactControlsRight = isPanelOpen ? panelOcclusionRight + FLOATING_UI_GAP : FLOATING_UI_GAP; const compactControlsLeft = FLOATING_UI_GAP;
// 加载画布数据 // 加载画布数据
useEffect(() => { useEffect(() => {
@ -710,7 +711,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div> </div>
{/* 5. Floating Toolbar (Bottom) */} {/* 5. Floating Toolbar (Bottom) */}
<div className="absolute bottom-5 left-1/2 z-20 -translate-x-1/2"> <div className="absolute left-1/2 z-20 -translate-x-1/2" style={{ bottom: `${FLOATING_BOTTOM_INSET}px` }}>
<div <div
className="flex items-center gap-1 rounded-[24px] border bg-background/88 px-2.5 py-1.5 shadow-2xl backdrop-blur-md" 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: `${floatingToolbarOffset}px` }} style={{ marginLeft: `${floatingToolbarOffset}px` }}
@ -818,16 +819,16 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div> </div>
</div> </div>
{/* 6. Bottom Right Compact Controls */} {/* 6. Bottom Left Compact Controls */}
<div <div
className="absolute bottom-5 z-20" className="absolute z-20"
style={{ right: `${compactControlsRight}px` }} style={{ bottom: `${FLOATING_BOTTOM_INSET}px`, left: `${compactControlsLeft}px` }}
> >
<div className="flex items-center gap-1 rounded-2xl border bg-background/88 px-2 py-1.5 shadow-xl backdrop-blur-md"> <div className="flex items-center gap-0.5 rounded-xl border border-border/60 bg-background/82 px-1.5 py-1 shadow-lg backdrop-blur-sm">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={undo} disabled={!canUndo} className="h-8 w-8 rounded-lg"> <Button variant="ghost" size="icon" onClick={undo} disabled={!canUndo} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
<Undo2 className="h-3.5 w-3.5" /> <Undo2 className="h-3 w-3" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top">撤销</TooltipContent> <TooltipContent side="top">撤销</TooltipContent>
@ -835,22 +836,22 @@ export default function CanvasEditorPage({ params }: PageProps) {
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={redo} disabled={!canRedo} className="h-8 w-8 rounded-lg"> <Button variant="ghost" size="icon" onClick={redo} disabled={!canRedo} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
<Redo2 className="h-3.5 w-3.5" /> <Redo2 className="h-3 w-3" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top">重做</TooltipContent> <TooltipContent side="top">重做</TooltipContent>
</Tooltip> </Tooltip>
<Separator orientation="vertical" className="mx-0.5 h-5" /> <Separator orientation="vertical" className="mx-1 h-4" />
<Button variant="ghost" size="icon" onClick={zoomOut} className="h-8 w-8 rounded-lg"> <Button variant="ghost" size="icon" onClick={zoomOut} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
<ZoomOut className="h-3.5 w-3.5" /> <ZoomOut className="h-3.5 w-3.5" />
</Button> </Button>
<span className="w-12 text-center text-xs tabular-nums font-medium text-muted-foreground"> <span className="w-11 text-center text-[11px] tabular-nums font-medium text-muted-foreground">
{Math.round(viewport.zoom * 100)}% {Math.round(viewport.zoom * 100)}%
</span> </span>
<Button variant="ghost" size="icon" onClick={zoomIn} className="h-8 w-8 rounded-lg"> <Button variant="ghost" size="icon" onClick={zoomIn} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
<ZoomIn className="h-3.5 w-3.5" /> <ZoomIn className="h-3.5 w-3.5" />
</Button> </Button>
</div> </div>