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}

web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx

@@ -16,7 +16,7 @@ export function WorkflowEditorStatus({
   edgeCount: number
 }) {
   return (
-    <div className="pointer-events-none inline-flex min-h-8 w-fit max-w-full items-center gap-2 rounded-md border border-slate-200/80 bg-white/90 px-2.5 py-1 text-xs text-slate-500 shadow-sm backdrop-blur">
+    <div className="pointer-events-none inline-flex w-fit max-w-full items-center gap-2 px-1 text-xs text-slate-500">
       <span
         className={cn(
           "inline-flex shrink-0 items-center gap-1",
@@ -24,14 +24,15 @@ export function WorkflowEditorStatus({
         )}
       >
         {validation.valid ? (
-          <CheckCircle2Icon className="size-3.5" />
+          <CheckCircle2Icon className="size-3" />
         ) : (
-          <AlertTriangleIcon className="size-3.5" />
+          <AlertTriangleIcon className="size-3" />
         )}
         {validation.valid ? "检查通过" : `${validation.errors.length} 个问题`}
       </span>
-      <span className="h-3 w-px shrink-0 bg-slate-200" />
+      <span className="shrink-0 text-slate-300">/</span>
       <span className="shrink-0">{nodeCount} 节点</span>
+      <span className="shrink-0 text-slate-300">·</span>
       <span className="shrink-0">{edgeCount} 连线</span>
     </div>
   )

web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react"
 import {
+  CheckIcon,
   Redo2Icon,
   RotateCcwIcon,
   SaveIcon,
@@ -41,29 +42,31 @@ export function WorkflowEditorToolbar({
   publishDisabled?: boolean
 }) {
   return (
-    <div className="inline-flex min-h-10 w-fit max-w-full items-center rounded-md bg-background/95 px-2 py-1 shadow-sm backdrop-blur">
+    <div className="inline-flex min-h-9 w-fit max-w-full items-center rounded-md bg-white/95 px-1.5 py-1 shadow-sm backdrop-blur">
-      <div className="flex min-w-0 items-center gap-1 overflow-x-auto">
+      <div className="flex min-w-0 items-center gap-0.5 overflow-x-auto">
         {toolbarExtra}
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs" disabled={undoDisabled} onClick={onUndo}>
+        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={undoDisabled} onClick={onUndo}>
           <Undo2Icon className="size-3.5" />
           撤销
         </Button>
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs" disabled={redoDisabled} onClick={onRedo}>
+        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={redoDisabled} onClick={onRedo}>
           <Redo2Icon className="size-3.5" />
           重做
         </Button>
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs" disabled={restoreDefaultDisabled} onClick={onRestoreDefault}>
+        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={restoreDefaultDisabled} onClick={onRestoreDefault}>
           <RotateCcwIcon className="size-3.5" />
           恢复默认
         </Button>
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs" disabled={validateDisabled} onClick={onValidate}>
+        <span className="mx-1 h-4 w-px shrink-0 bg-slate-200" />
+        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={validateDisabled} onClick={onValidate}>
+          <CheckIcon className="size-3.5" />
           检查
         </Button>
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs" disabled={saveDraftDisabled} onClick={onSaveDraft}>
+        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={saveDraftDisabled} onClick={onSaveDraft}>
           <SaveIcon className="size-3.5" />
           保存
         </Button>
-        <Button type="button" size="sm" className="h-7 shrink-0 px-2 text-xs" disabled={publishDisabled} onClick={onPublish}>
+        <Button type="button" size="sm" className="h-7 shrink-0 bg-[#2575FC] px-2 text-xs hover:bg-[#1b63d8]" disabled={publishDisabled} onClick={onPublish}>
           <SendIcon className="size-3.5" />
           发布
         </Button>

web/app/dashboard/ai-workflows/_components/workflow-editor.tsx

@@ -330,7 +330,7 @@ function WorkflowEditorInner({
     >
       <div
         className={cn(
-          "absolute left-3 top-3 z-50 flex max-w-[calc(100%-1.5rem)] flex-col items-start gap-2",
+          "absolute left-3 top-3 z-50 flex max-w-[calc(100%-1.5rem)] flex-col items-start gap-1.5",
           selectedNodeId && "max-w-[calc(100%-25rem)]"
         )}
       >
@@ -356,7 +356,7 @@ function WorkflowEditorInner({
         />
       </div>
 
-      <div className="absolute bottom-3 left-3 z-50">
+      <div className="absolute bottom-4 left-4 z-50">
         <WorkflowCanvasControls
           zoomPercent={zoomPercent}
           onZoomIn={() => playgroundTools.zoomin(true)}