feat: enhance flowgram editor with condition node handling, port normalization, and UI improvements

web/app/dashboard/ai-workflows/_components/flowgram-node-registries.tsx

@@ -1,6 +1,13 @@
 import { Field, type WorkflowNodeRegistry } from "@flowgram.ai/free-layout-editor"
+import { PlusIcon } from "lucide-react"
 
+import { Button } from "@/components/ui/button"
 import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
+import {
+  createConditionBranchID,
+  normalizeNodeConfig,
+  type WorkflowConditionBranch,
+} from "./workflow-utils"
 
 export function buildFlowgramNodeRegistries(nodeSpecs: AIWorkflowNodeSpec[]): WorkflowNodeRegistry[] {
   const seen = new Set<string>()
@@ -41,16 +48,20 @@ function FlowgramNodeForm({
   nodeType: string
   fallbackTitle: string
 }) {
+  if (nodeType === "condition") {
+    return <ConditionNodeForm fallbackTitle={fallbackTitle} />
+  }
+
   return (
-    <div className="min-w-0 flex-1">
+    <div className="flex w-full flex-col">
       <Field<string> name="title">
         {({ field }) => (
-          <div className="truncate text-sm font-medium leading-5">
+          <div className="border-b px-4 py-3 text-sm font-medium leading-5">
             {field.value || fallbackTitle}
           </div>
         )}
       </Field>
-      <div className="mt-1 truncate text-xs text-muted-foreground">{nodeType}</div>
+      <div className="px-4 py-3 text-xs text-muted-foreground">{nodeType}</div>
     </div>
   )
 }
@@ -62,5 +73,94 @@ function defaultPortsForNodeType(type: string) {
   if (type === "end") {
     return [{ type: "input" as const }]
   }
+  if (type === "condition") {
+    return [{ type: "input" as const }]
+  }
   return [{ type: "input" as const }, { type: "output" as const }]
 }
+
+function ConditionNodeForm({ fallbackTitle }: { fallbackTitle: string }) {
+  return (
+    <div className="flex w-full flex-col">
+      <Field<string> name="title">
+        {({ field }) => (
+          <div className="border-b px-4 py-3 text-sm font-medium leading-5">
+            {field.value || fallbackTitle}
+          </div>
+        )}
+      </Field>
+      <Field<Record<string, unknown>> name="config">
+        {({ field }) => {
+          const config = normalizeNodeConfig(field.value)
+          const branches = ensureConditionBranches(config.branches ?? [])
+          const updateBranches = (nextBranches: WorkflowConditionBranch[]) => {
+            field.onChange({
+              ...config,
+              branches: ensureConditionBranches(nextBranches),
+            })
+          }
+
+          return (
+            <div className="px-4 py-3">
+              <div className="space-y-2">
+                {branches.map((branch) => (
+                  <div
+                    key={branch.id}
+                    className="flex min-h-9 items-center gap-2 rounded-md bg-muted/40 px-3 text-xs hover:bg-muted/70"
+                  >
+                    <span className="min-w-0 flex-1 truncate">
+                      {branch.name || (branch.default ? "默认分支" : branch.id)}
+                    </span>
+                    {branch.default ? (
+                      <span className="shrink-0 rounded bg-background px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                        else
+                      </span>
+                    ) : null}
+                    <span
+                      data-port-id={branch.id}
+                      data-port-type="output"
+                      className="flex size-4 shrink-0 items-center justify-center rounded-full border border-[#4e40e5]/70 bg-background"
+                    >
+                      <span className="size-2 rounded-full bg-[#4e40e5]" />
+                    </span>
+                  </div>
+                ))}
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="mt-2 h-7 px-2 text-xs text-muted-foreground"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  updateBranches([
+                    ...branches,
+                    {
+                      id: createConditionBranchID(branches),
+                      name: "新条件",
+                      targetNodeId: "",
+                      condition: { operator: "eq" },
+                    },
+                  ])
+                }}
+              >
+                <PlusIcon className="size-3.5" />
+                添加条件
+              </Button>
+            </div>
+          )
+        }}
+      </Field>
+    </div>
+  )
+}
+
+function ensureConditionBranches(branches: WorkflowConditionBranch[]) {
+  const normalized = branches.some((branch) => branch.default)
+    ? branches
+    : [...branches, { id: "default", name: "默认分支", targetNodeId: "", default: true }]
+  return [
+    ...normalized.filter((branch) => !branch.default),
+    ...normalized.filter((branch) => branch.default).slice(0, 1),
+  ]
+}