From bcaa6225d430ec835c46f7bf6403c1a72b267cf2 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sun, 28 Jun 2026 22:32:43 +0800
Subject: [PATCH] feat: add WorkflowEditorStatus component for displaying
 validation and node counts

---
 docs                                          |  2 +-
 .../_components/workflow-editor-status.tsx    | 38 +++++++++++++++++++
 .../_components/workflow-editor-toolbar.tsx   | 26 +------------
 .../_components/workflow-editor.tsx           | 11 ++++--
 4 files changed, 47 insertions(+), 30 deletions(-)
 create mode 100644 web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx

diff --git a/docs b/docs
index b6d08c0..5b69ec7 160000
--- a/docs
+++ b/docs
@@ -1 +1 @@
-Subproject commit b6d08c0964853a795979c2a2be941254ac4ab39d
+Subproject commit 5b69ec75398e40a5b186f6b66efb652229b7053f
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx
new file mode 100644
index 0000000..49d6bf1
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { AlertTriangleIcon, CheckCircle2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+import type { WorkflowDraftValidation } from "./workflow-utils"
+
+export function WorkflowEditorStatus({
+  validation,
+  nodeCount,
+  edgeCount,
+}: {
+  validation: WorkflowDraftValidation
+  nodeCount: number
+  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">
+      <span
+        className={cn(
+          "inline-flex shrink-0 items-center gap-1",
+          validation.valid ? "text-emerald-600" : "text-amber-700"
+        )}
+      >
+        {validation.valid ? (
+          <CheckCircle2Icon className="size-3.5" />
+        ) : (
+          <AlertTriangleIcon className="size-3.5" />
+        )}
+        {validation.valid ? "检查通过" : `${validation.errors.length} 个问题`}
+      </span>
+      <span className="h-3 w-px shrink-0 bg-slate-200" />
+      <span className="shrink-0">{nodeCount} 节点</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 bfb05ad..722be5d 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx
@@ -2,7 +2,6 @@
 
 import type { ReactNode } from "react"
 import {
-  CheckCircle2Icon,
   RotateCcwIcon,
   SaveIcon,
   SendIcon,
@@ -10,14 +9,8 @@ import {
 } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-import type { WorkflowDraftValidation } from "./workflow-utils"
 
 export function WorkflowEditorToolbar({
-  validation,
-  nodeCount,
-  edgeCount,
   toolbarExtra,
   onUndo,
   undoDisabled = false,
@@ -32,9 +25,6 @@ export function WorkflowEditorToolbar({
   onPublish,
   publishDisabled = false,
 }: {
-  validation: WorkflowDraftValidation
-  nodeCount: number
-  edgeCount: number
   toolbarExtra?: ReactNode
   onUndo?: () => void
   undoDisabled?: boolean
@@ -50,21 +40,7 @@ export function WorkflowEditorToolbar({
   publishDisabled?: boolean
 }) {
   return (
-    <div className="inline-flex min-h-10 w-fit max-w-full items-center gap-3 rounded-md bg-background/95 px-2 py-1 shadow-sm backdrop-blur">
-      <div className="flex min-w-0 shrink items-center gap-2">
-        <span
-          className={cn(
-            "inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs",
-            validation.valid ? "bg-muted text-muted-foreground" : "bg-amber-50 text-amber-700"
-          )}
-        >
-          <CheckCircle2Icon className="size-3" />
-          {validation.valid ? "本地检查通过" : `${validation.errors.length} 个本地问题`}
-        </span>
-        <span className="truncate text-xs text-muted-foreground">
-          {nodeCount} 个节点 / {edgeCount} 条连线
-        </span>
-      </div>
+    <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">
         {toolbarExtra}
         <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs" disabled={undoDisabled} onClick={onUndo}>
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
index 05ba25e..8ef4a5a 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
@@ -27,6 +27,7 @@ import {
 } from "./workflow-branch-selection"
 import { WorkflowCanvasControls } from "./workflow-canvas-controls"
 import { WorkflowConfigPanel } from "./workflow-config-sidebar"
+import { WorkflowEditorStatus } from "./workflow-editor-status"
 import { WorkflowEditorToolbar } from "./workflow-editor-toolbar"
 import {
   WorkflowPortAddProvider,
@@ -329,14 +330,11 @@ function WorkflowEditorInner({
     >
       <div
         className={cn(
-          "absolute left-3 top-3 z-50 max-w-[calc(100%-1.5rem)]",
+          "absolute left-3 top-3 z-50 flex max-w-[calc(100%-1.5rem)] flex-col items-start gap-2",
           selectedNodeId && "max-w-[calc(100%-25rem)]"
         )}
       >
         <WorkflowEditorToolbar
-          validation={validation}
-          nodeCount={definition.nodes.length}
-          edgeCount={definition.edges.length}
           toolbarExtra={toolbarExtra}
           onUndo={onUndo}
           undoDisabled={undoDisabled}
@@ -351,6 +349,11 @@ function WorkflowEditorInner({
           onPublish={onPublish}
           publishDisabled={publishDisabled}
         />
+        <WorkflowEditorStatus
+          validation={validation}
+          nodeCount={definition.nodes.length}
+          edgeCount={definition.edges.length}
+        />
       </div>
 
       <div className="absolute bottom-3 left-3 z-50">