From e7e0bbf170abfb0bd4346a703b642fd024807f47 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sun, 28 Jun 2026 22:40:07 +0800
Subject: [PATCH] feat: enhance styling and layout of workflow components for
 improved usability

---
 .../_components/workflow-canvas-controls.tsx  |  7 ++++---
 .../_components/workflow-editor-status.tsx    |  9 +++++----
 .../_components/workflow-editor-toolbar.tsx   | 19 +++++++++++--------
 .../_components/workflow-editor.tsx           |  4 ++--
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/web/app/dashboard/ai-workflows/_components/workflow-canvas-controls.tsx b/web/app/dashboard/ai-workflows/_components/workflow-canvas-controls.tsx
index fac5225..073eddb 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-canvas-controls.tsx
+++ b/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}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx
index 49d6bf1..45493f6 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx
+++ b/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>
   )
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx
index 7336673..cc2ef22 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx
+++ b/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="flex min-w-0 items-center gap-1 overflow-x-auto">
+    <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-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>
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
index 8ef4a5a..a9de71c 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
+++ b/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)}