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_INSET = 16;
const FLOATING_UI_GAP = 16;
const FLOATING_BOTTOM_INSET = 20;
export default function CanvasEditorPage({ params }: PageProps) {
// 使用 useParams 确保客户端导航时能正确获取更新的 id
@ -155,7 +156,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
: FLOATING_PANEL_WIDTH;
const panelOcclusionRight = isPanelOpen ? resolvedPanelWidth + FLOATING_PANEL_INSET : 0;
const floatingToolbarOffset = isPanelOpen ? -(panelOcclusionRight / 2) : 0;
const compactControlsRight = isPanelOpen ? panelOcclusionRight + FLOATING_UI_GAP : FLOATING_UI_GAP;
const compactControlsLeft = FLOATING_UI_GAP;
// 加载画布数据
useEffect(() => {
@ -710,7 +711,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div>
{/* 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
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` }}
@ -818,16 +819,16 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div>
</div>
{/* 6. Bottom Right Compact Controls */}
{/* 6. Bottom Left Compact Controls */}
<div
className="absolute bottom-5 z-20"
style={{ right: `${compactControlsRight}px` }}
className="absolute z-20"
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>
<TooltipTrigger asChild>
<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 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 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">撤销</TooltipContent>
@ -835,22 +836,22 @@ export default function CanvasEditorPage({ params }: PageProps) {
<Tooltip>
<TooltipTrigger asChild>
<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 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 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">重做</TooltipContent>
</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" />
</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)}%
</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" />
</Button>
</div>