feat: enhance workflow node components with new condition handling and UI improvements

2026-06-28 11:52:32 +08:00
parent 5160499fbf
commit f809b5e526
8 changed files with 432 additions and 169 deletions
@@ -0,0 +1,66 @@
+import type { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
+import { getWorkflowNodeAccentClass, getWorkflowNodeMeta } from "./workflow-node-meta"
+import { WorkflowNodeIcon } from "./workflow-node-icon"
+
+export function WorkflowNodeCard({
+  nodeType,
+  title,
+  spec,
+  selected,
+  width = "normal",
+  children,
+}: {
+  nodeType: string
+  title: string
+  spec?: AIWorkflowNodeSpec
+  selected: boolean
+  width?: "normal" | "wide"
+  children: ReactNode
+}) {
+  const meta = getWorkflowNodeMeta(nodeType)
+
+  return (
+    <div
+      className={cn(
+        "group relative rounded-2xl border bg-background p-0.5 transition-all",
+        width === "wide" ? "w-[320px]" : "w-[280px]",
+        selected
+          ? "border-[var(--g-selection-background)] shadow-[0_8px_24px_rgba(20,24,38,0.14)]"
+          : "border-border/80 shadow-sm hover:border-border hover:shadow-md"
+      )}
+    >
+      <div className="overflow-hidden rounded-[15px] border border-transparent bg-background">
+        <div className="flex items-center gap-2 px-3 pb-2 pt-3">
+          <WorkflowNodeIcon type={nodeType} tone={meta.tone} />
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-sm font-semibold leading-5 text-foreground">
+              {title}
+            </div>
+            <div className="mt-0.5 flex items-center gap-1.5">
+              <span
+                className={cn(
+                  "inline-flex h-4 shrink-0 items-center rounded-md border px-1.5 text-[10px] font-medium leading-none",
+                  getWorkflowNodeAccentClass(meta.tone)
+                )}
+              >
+                {meta.label}
+              </span>
+              <span className="min-w-0 truncate text-[11px] leading-4 text-muted-foreground">
+                {nodeType}
+              </span>
+            </div>
+          </div>
+        </div>
+        {spec?.description ? (
+          <div className="mx-3 mb-2 line-clamp-2 rounded-lg bg-muted/45 px-2 py-1.5 text-xs leading-4 text-muted-foreground">
+            {spec.description}
+          </div>
+        ) : null}
+        <div className="border-t bg-muted/20 px-3 py-2.5">{children}</div>
+      </div>
+    </div>
+  )
+}