feat: enhance styling and layout of workflow components for improved usability

web/app/dashboard/ai-workflows/_components/workflow-canvas-controls.tsx

@@ -24,7 +24,7 @@ export function WorkflowCanvasControls({
   autoLayoutDisabled?: boolean
 }) {
   return (
-    <div className="inline-flex h-9 items-center gap-1 rounded-md bg-background/95 p-1 shadow-sm backdrop-blur">
+    <div className="inline-flex h-9 items-center gap-0.5 rounded-md border border-slate-200/80 bg-white/95 p-1 shadow-sm backdrop-blur">
       <CanvasControlButton label="缩小" onClick={onZoomOut}>
         <MinusIcon className="size-3.5" />
       </CanvasControlButton>
@@ -35,7 +35,7 @@ export function WorkflowCanvasControls({
               type="button"
               variant="ghost"
               size="sm"
-              className="h-7 w-12 px-1 text-xs tabular-nums"
+              className="h-7 w-12 px-1 text-xs tabular-nums text-slate-700 hover:bg-slate-100 hover:text-slate-950"
               aria-label="重置为 100%"
               disabled={!onResetZoom}
               onClick={onResetZoom}
@@ -49,6 +49,7 @@ export function WorkflowCanvasControls({
       <CanvasControlButton label="放大" onClick={onZoomIn}>
         <PlusIcon className="size-3.5" />
       </CanvasControlButton>
+      <span className="mx-1 h-4 w-px shrink-0 bg-slate-200" />
       <CanvasControlButton label="适配画布" onClick={onFitView}>
         <Maximize2Icon className="size-3.5" />
       </CanvasControlButton>
@@ -78,7 +79,7 @@ function CanvasControlButton({
             type="button"
             variant="ghost"
             size="icon-xs"
-            className="size-7"
+            className="size-7 text-slate-700 hover:bg-slate-100 hover:text-slate-950"
             aria-label={label}
             disabled={disabled || !onClick}
             onClick={onClick}