Add branch summary handling to NodeConfigPanel and WorkflowEditor

web/app/dashboard/ai-workflows/_components/node-config-panel.tsx

@@ -11,6 +11,7 @@ import { VariableSelector } from "./variable-selector"
 import type {
   WorkflowNodeSpec,
   WorkflowVariableRef,
+  WorkflowVariableSpec,
   WorkflowVariableSelector,
 } from "./workflow-utils"
 
@@ -21,15 +22,24 @@ type WorkflowNodeData = Record<string, unknown> & {
   inputs?: Record<string, WorkflowVariableSelector>
 }
 
+export type WorkflowBranchSummary = {
+  edgeId: string
+  targetName: string
+  conditionLabel: string
+  isDefault: boolean
+}
+
 export function NodeConfigPanel({
   node,
   nodeSpec,
   availableVariables,
+  branchSummaries = [],
   onChange,
 }: {
   node: Node<WorkflowNodeData> | null
   nodeSpec?: WorkflowNodeSpec
   availableVariables: WorkflowVariableRef[]
+  branchSummaries?: WorkflowBranchSummary[]
   onChange: (nodeId: string, data: WorkflowNodeData) => void
 }) {
   if (!node) {
@@ -46,6 +56,7 @@ export function NodeConfigPanel({
       node={node}
       nodeSpec={nodeSpec}
       availableVariables={availableVariables}
+      branchSummaries={branchSummaries}
       onChange={onChange}
     />
   )
@@ -55,11 +66,13 @@ function NodeConfigForm({
   node,
   nodeSpec,
   availableVariables,
+  branchSummaries,
   onChange,
 }: {
   node: Node<WorkflowNodeData>
   nodeSpec?: WorkflowNodeSpec
   availableVariables: WorkflowVariableRef[]
+  branchSummaries: WorkflowBranchSummary[]
   onChange: (nodeId: string, data: WorkflowNodeData) => void
 }) {
   const [name, setName] = useState(node.data.name ?? "")
@@ -70,6 +83,7 @@ function NodeConfigForm({
   const [error, setError] = useState("")
   const inputSchema = nodeSpec?.inputSchema ?? []
   const outputSchema = nodeSpec?.outputSchema ?? []
+  const isConditionNode = node.data.nodeType === "condition"
 
   const commitChange = (next: Partial<WorkflowNodeData>) => {
     onChange(node.id, {
@@ -106,64 +120,128 @@ function NodeConfigForm({
           onBlur={() => commitChange({ name: name.trim() || node.data.nodeType || node.id })}
         />
       </div>
-      {inputSchema.length > 0 ? (
-        <div className="space-y-3">
-          <div className="text-sm font-medium">输入映射</div>
-          {availableVariables.length === 0 ? (
-            <div className="rounded-md border border-dashed p-2 text-xs text-muted-foreground">
-              当前节点前面还没有可用变量，请先连接上游节点。
-            </div>
-          ) : null}
-          {inputSchema.map((input) => (
-            <div key={input.name} className="space-y-1.5">
-              <div className="flex items-center justify-between gap-2">
-                <Label className="text-xs">
-                  {input.name}
-                  {input.required ? <span className="text-destructive"> *</span> : null}
-                </Label>
-                <span className="text-xs text-muted-foreground">{input.type}</span>
-              </div>
-              <VariableSelector
-                value={inputs[input.name]}
-                variables={availableVariables}
-                onChange={(value) => {
-                  const nextInputs = {
-                    ...inputs,
-                    [input.name]: value,
-                  }
-                  setInputs(nextInputs)
-                  commitChange({
-                    inputs: nextInputs,
-                  })
-                }}
-              />
-              {inputs[input.name] ? (
-                <div className="text-xs text-muted-foreground">
-                  已选择：{inputs[input.name].nodeId}.{inputs[input.name].field}
+      {isConditionNode ? (
+        <ConditionNodePanel branchSummaries={branchSummaries} outputSchema={outputSchema} />
+      ) : (
+        <>
+          {inputSchema.length > 0 ? (
+            <div className="space-y-3">
+              <div className="text-sm font-medium">输入映射</div>
+              {availableVariables.length === 0 ? (
+                <div className="rounded-md border border-dashed p-2 text-xs text-muted-foreground">
+                  当前节点前面还没有可用变量，请先连接上游节点。
                 </div>
               ) : null}
-              {input.description ? (
-                <div className="text-xs text-muted-foreground">{input.description}</div>
-              ) : null}
+              {inputSchema.map((input) => (
+                <div key={input.name} className="space-y-1.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <Label className="text-xs">
+                      {input.name}
+                      {input.required ? <span className="text-destructive"> *</span> : null}
+                    </Label>
+                    <span className="text-xs text-muted-foreground">{input.type}</span>
+                  </div>
+                  <VariableSelector
+                    value={inputs[input.name]}
+                    variables={availableVariables}
+                    onChange={(value) => {
+                      const nextInputs = {
+                        ...inputs,
+                        [input.name]: value,
+                      }
+                      setInputs(nextInputs)
+                      commitChange({
+                        inputs: nextInputs,
+                      })
+                    }}
+                  />
+                  {inputs[input.name] ? (
+                    <div className="text-xs text-muted-foreground">
+                      已选择：{inputs[input.name].nodeId}.{inputs[input.name].field}
+                    </div>
+                  ) : null}
+                  {input.description ? (
+                    <div className="text-xs text-muted-foreground">{input.description}</div>
+                  ) : null}
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-      ) : null}
-      <details className="rounded-md border bg-background p-3">
-        <summary className="cursor-pointer text-sm font-medium">高级配置 JSON</summary>
-        <div className="mt-3 space-y-2">
-          <Textarea
-            id="workflow-node-config"
-            className="h-40 font-mono text-xs"
-            value={configText}
-            onChange={(event) => setConfigText(event.target.value)}
-          />
-          {error ? <div className="text-xs text-destructive">{error}</div> : null}
-          <Button type="button" variant="outline" size="sm" onClick={handleApply}>
-            保存高级配置
-          </Button>
-        </div>
-      </details>
+          ) : null}
+          <details className="rounded-md border bg-background p-3">
+            <summary className="cursor-pointer text-sm font-medium">高级配置 JSON</summary>
+            <div className="mt-3 space-y-2">
+              <Textarea
+                id="workflow-node-config"
+                className="h-40 font-mono text-xs"
+                value={configText}
+                onChange={(event) => setConfigText(event.target.value)}
+              />
+              {error ? <div className="text-xs text-destructive">{error}</div> : null}
+              <Button type="button" variant="outline" size="sm" onClick={handleApply}>
+                保存高级配置
+              </Button>
+            </div>
+          </details>
+          {outputSchema.length > 0 ? (
+            <div className="space-y-2">
+              <div className="text-sm font-medium">输出变量</div>
+              <div className="space-y-1 rounded-md border bg-background p-2">
+                {outputSchema.map((output) => (
+                  <div key={output.name} className="space-y-0.5 rounded-sm px-1 py-0.5">
+                    <div className="flex items-center justify-between gap-2 text-xs">
+                      <span className="truncate font-medium">{output.name}</span>
+                      <span className="shrink-0 text-muted-foreground">{output.type}</span>
+                    </div>
+                    {output.description ? (
+                      <div className="text-xs text-muted-foreground">{output.description}</div>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </>
+      )}
+    </div>
+  )
+}
+
+function ConditionNodePanel({
+  branchSummaries,
+  outputSchema,
+}: {
+  branchSummaries: WorkflowBranchSummary[]
+  outputSchema: WorkflowVariableSpec[]
+}) {
+  return (
+    <>
+      {/* <div className="rounded-md border bg-muted/30 p-3 text-xs text-muted-foreground">
+        条件节点只负责分流；每条出口连线承载自己的判断条件，没有条件的出口会作为默认分支。
+      </div> */}
+      <div className="space-y-2">
+        <div className="text-sm font-medium">出口分支</div>
+        {branchSummaries.length > 0 ? (
+          <div className="space-y-2">
+            {branchSummaries.map((branch) => (
+              <div key={branch.edgeId} className="rounded-md border bg-background p-2">
+                <div className="flex items-center justify-between gap-2 text-xs">
+                  <span className="min-w-0 truncate font-medium">{branch.targetName}</span>
+                  <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-muted-foreground">
+                    {branch.isDefault ? "默认" : "条件"}
+                  </span>
+                </div>
+                <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                  {branch.conditionLabel}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-md border border-dashed p-2 text-xs text-muted-foreground">
+            当前还没有出口连线。
+          </div>
+        )}
+      </div>
       {outputSchema.length > 0 ? (
         <div className="space-y-2">
           <div className="text-sm font-medium">输出变量</div>
@@ -182,6 +260,6 @@ function NodeConfigForm({
           </div>
         </div>
       ) : null}
-    </div>
+    </>
   )
 }

web/app/dashboard/ai-workflows/_components/workflow-editor.tsx

@@ -55,7 +55,7 @@ import {
   type WorkflowEditorEdge,
   type WorkflowEditorNode,
 } from "./workflow-utils"
-import { NodeConfigPanel } from "./node-config-panel"
+import { NodeConfigPanel, type WorkflowBranchSummary } from "./node-config-panel"
 import { VariableSelector } from "./variable-selector"
 
 type WorkflowNodeData = Record<string, unknown> & {
@@ -207,6 +207,10 @@ export function WorkflowEditor({
     () => (propertyPanelNode ? getAvailableVariables(draft, propertyPanelNode.id, nodeSpecs) : []),
     [draft, nodeSpecs, propertyPanelNode]
   )
+  const propertyPanelBranchSummaries = useMemo(
+    () => (propertyPanelNode ? getBranchSummaries(nodes, edges, propertyPanelNode.id) : []),
+    [edges, nodes, propertyPanelNode]
+  )
   const propertyPanelEdgeVariables = useMemo(
     () => (propertyPanelEdge ? getEdgeConditionVariables(draft, propertyPanelEdge.source, nodeSpecs) : []),
     [draft, nodeSpecs, propertyPanelEdge]
@@ -591,6 +595,7 @@ export function WorkflowEditor({
                     node={propertyPanelNode}
                     nodeSpec={propertyPanelNodeSpec}
                     availableVariables={propertyPanelAvailableVariables}
+                    branchSummaries={propertyPanelBranchSummaries}
                     onChange={updateNodeData}
                   />
                 ) : null}
@@ -703,6 +708,50 @@ const conditionOperators = [
   { value: "lte", label: "小于等于" },
 ]
 
+function getBranchSummaries(
+  nodes: WorkflowFlowNode[],
+  edges: WorkflowFlowEdge[],
+  nodeId: string
+): WorkflowBranchSummary[] {
+  return edges
+    .filter((edge) => edge.source === nodeId)
+    .map((edge) => {
+      const target = nodes.find((node) => node.id === edge.target)
+      const condition = (edge.data as WorkflowEditorEdge["data"] | undefined)?.condition
+      return {
+        edgeId: edge.id,
+        targetName: target?.data.name ?? target?.data.title ?? edge.target,
+        conditionLabel: condition ? formatConditionLabel(condition) : "无条件匹配",
+        isDefault: !condition,
+      }
+    })
+}
+
+function formatConditionLabel(condition: NonNullable<WorkflowEdgeCondition>) {
+  const left = condition.left?.nodeId && condition.left.field
+    ? `${condition.left.nodeId}.${condition.left.field}`
+    : "未选择变量"
+  const operator = conditionOperators.find((item) => item.value === condition.operator)?.label
+    ?? condition.operator
+    ?? "未选择判断方式"
+
+  if (["exists", "not_exists", "truthy", "falsy"].includes(condition.operator ?? "")) {
+    return `${left} ${operator}`
+  }
+
+  return `${left} ${operator} ${formatConditionRight(condition.right)}`
+}
+
+function formatConditionRight(value: unknown) {
+  if (value === undefined || value === null || value === "") {
+    return "未填写比较值"
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value)
+  }
+  return String(value)
+}
+
 function EdgeConditionPanel({
   edge,
   variables,