xyflow change to flowgraam

2026-06-27 21:27:57 +08:00
parent 228ad1902f
commit 689acc997c
32 changed files with 3154 additions and 5004 deletions
@@ -0,0 +1,71 @@
+"use client"
+
+import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
+import { cn } from "@/lib/utils"
+
+import { NodeConfigPanel } from "./node-config-panel"
+import {
+  getAvailableVariables,
+  getNodeTitle,
+  type WorkflowNodeData,
+} from "./workflow-utils"
+
+export function WorkflowConfigSidebar({
+  definition,
+  nodeSpecs,
+  selectedNodeId,
+  onSelectNode,
+  onChangeNodeData,
+  onDeleteNode,
+}: {
+  definition: AIWorkflowDefinition
+  nodeSpecs: AIWorkflowNodeSpec[]
+  selectedNodeId: string
+  onSelectNode: (nodeId: string) => void
+  onChangeNodeData: (nodeId: string, data: WorkflowNodeData) => void
+  onDeleteNode: (nodeId: string) => void
+}) {
+  const selectedNode = definition.nodes.find((node) => node.id === selectedNodeId) ?? null
+  const selectedNodeSpec = selectedNode
+    ? nodeSpecs.find((spec) => spec.type === selectedNode.type)
+    : undefined
+  const availableVariables = selectedNode
+    ? getAvailableVariables(definition, selectedNode.id, nodeSpecs)
+    : []
+
+  return (
+    <aside className="flex w-80 shrink-0 flex-col border-l bg-background">
+      <div className="border-b px-3 py-2">
+        <div className="text-sm font-medium">配置</div>
+      </div>
+      <div className="max-h-48 overflow-y-auto border-b p-2">
+        <div className="space-y-1">
+          {definition.nodes.map((node) => (
+            <button
+              key={node.id}
+              type="button"
+              className={cn(
+                "flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted",
+                selectedNodeId === node.id && "bg-muted"
+              )}
+              onClick={() => onSelectNode(node.id)}
+            >
+              <span className="min-w-0 truncate">{getNodeTitle(node, nodeSpecs)}</span>
+              <span className="shrink-0 text-xs text-muted-foreground">{node.type}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="min-h-0 flex-1">
+        <NodeConfigPanel
+          node={selectedNode}
+          nodeSpec={selectedNodeSpec}
+          nodes={definition.nodes}
+          availableVariables={availableVariables}
+          onChange={onChangeNodeData}
+          onDelete={onDeleteNode}
+        />
+      </div>
+    </aside>
+  )
+}