feat: add WorkflowCanvasControls component for enhanced zoom and layout functionality

2026-06-28 22:27:17 +08:00
parent 79b8c93bc9
commit 4a1595ae73
3 changed files with 107 additions and 91 deletions
@@ -0,0 +1,93 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Maximize2Icon, MinusIcon, PlusIcon, SparklesIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+
+export function WorkflowCanvasControls({
+  zoomPercent,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onFitView,
+  onAutoLayout,
+  autoLayoutDisabled = false,
+}: {
+  zoomPercent?: string
+  onZoomIn?: () => void
+  onZoomOut?: () => void
+  onResetZoom?: () => void
+  onFitView?: () => void
+  onAutoLayout?: () => void
+  autoLayoutDisabled?: boolean
+}) {
+  return (
+    <div className="inline-flex h-9 items-center gap-1 rounded-md bg-background/95 p-1 shadow-sm backdrop-blur">
+      <CanvasControlButton label="缩小" onClick={onZoomOut}>
+        <MinusIcon className="size-3.5" />
+      </CanvasControlButton>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 w-12 px-1 text-xs tabular-nums"
+              aria-label="重置为 100%"
+              disabled={!onResetZoom}
+              onClick={onResetZoom}
+            />
+          }
+        >
+          {zoomPercent ?? "100%"}
+        </TooltipTrigger>
+        <TooltipContent>重置为 100%</TooltipContent>
+      </Tooltip>
+      <CanvasControlButton label="放大" onClick={onZoomIn}>
+        <PlusIcon className="size-3.5" />
+      </CanvasControlButton>
+      <CanvasControlButton label="适配画布" onClick={onFitView}>
+        <Maximize2Icon className="size-3.5" />
+      </CanvasControlButton>
+      <CanvasControlButton label="自动布局" onClick={onAutoLayout} disabled={autoLayoutDisabled}>
+        <SparklesIcon className="size-3.5" />
+      </CanvasControlButton>
+    </div>
+  )
+}
+
+function CanvasControlButton({
+  label,
+  onClick,
+  disabled = false,
+  children,
+}: {
+  label: string
+  onClick?: () => void
+  disabled?: boolean
+  children: ReactNode
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            className="size-7"
+            aria-label={label}
+            disabled={disabled || !onClick}
+            onClick={onClick}
+          />
+        }
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  )
+}