From c93b4eb5c2269160695bb17ab80fe3f3697156d0 Mon Sep 17 00:00:00 2001
From: panxinying <xinying.pan@fit2cloud.com>
Date: Tue, 1 Sep 2026 14:37:39 +0800
Subject: [PATCH] feat: condition node

---
 ui/src/workflow-canvas/component/NodeMenu.vue | 120 +++-----
 .../icons/condition-node-icon.vue             |   6 +
 .../nodes/condition-node/index.ts             |  69 +++++
 .../nodes/condition-node/index.vue            | 280 ++++++++++++++++++
 4 files changed, 391 insertions(+), 84 deletions(-)
 create mode 100644 ui/src/workflow-canvas/icons/condition-node-icon.vue
 create mode 100644 ui/src/workflow-canvas/nodes/condition-node/index.ts
 create mode 100644 ui/src/workflow-canvas/nodes/condition-node/index.vue

diff --git a/ui/src/workflow-canvas/component/NodeMenu.vue b/ui/src/workflow-canvas/component/NodeMenu.vue
index 4be12bcbb38..3ff818f6a9a 100644
--- a/ui/src/workflow-canvas/component/NodeMenu.vue
+++ b/ui/src/workflow-canvas/component/NodeMenu.vue
@@ -22,81 +22,37 @@ const workflowComponentTabs: Array<{ label: string; value: WorkflowComponentTab
   { label: '智能体', value: 'application' },
 ]
 
-const workflowComponentOptions = [
+const workflowComponentGroups = [
   {
-    icon: aiChatIcon,
-    iconClass: 'bg-primary-gradient',
-    label: 'AI 对话',
-    value: WorkflowNodeType.AiChat,
+    label: 'AI 能力',
+    list: [
+      { icon: aiChatIcon, iconClass: 'bg-primary-gradient', label: 'AI 对话', value: WorkflowNodeType.AiChat },
+      { icon: aiChatIcon, iconClass: 'bg-primary-gradient', label: '意图识别', value: WorkflowNodeType.IntentNode },
+    ],
   },
   {
-    icon: aiChatIcon,
-    iconClass: 'bg-primary-gradient',
-    label: '意图识别',
-    value: WorkflowNodeType.IntentNode,
+    label: '业务逻辑',
+    list: [
+      { icon: aiChatIcon, iconClass: 'bg-purple', label: '判断器', value: WorkflowNodeType.Condition },
+      { icon: replyIcon, iconClass: 'bg-warning', label: '指定回复', value: WorkflowNodeType.Reply },
+    ],
   },
-  // {
-  //   icon: aiChatIcon,
-  //   iconClass: 'bg-primary-gradient',
-  //   label: '文本转语音',
-  //   value: WorkflowNodeType.TextToSpeechNode,
-  // },
-  // {
-  //   icon: aiChatIcon,
-  //   iconClass: 'bg-primary-gradient',
-  //   label: '语音转文本',
-  //   value: WorkflowNodeType.SpeechToTextNode,
-  // },
-  // {
-  //   icon: aiChatIcon,
-  //   iconClass: 'bg-primary-gradient',
-  //   label: '图片生成',
-  //   value: WorkflowNodeType.ImageGenerateNode,
-  // },
-  // {
-  //   icon: aiChatIcon,
-  //   iconClass: 'bg-primary-gradient',
-  //   label: '图片理解',
-  //   value: WorkflowNodeType.ImageUnderstandNode,
-  // },
-  // {
-  //   icon: aiChatIcon,
-  //   iconClass: 'bg-primary-gradient',
-  //   label: '问题优化',
-  //   value: WorkflowNodeType.Question,
-  // },
-  {
-    icon: replyIcon,
-    iconClass: 'bg-warning',
-    label: '指定回复',
-    value: WorkflowNodeType.Reply,
-  },
-] satisfies Array<{
-  icon: string
-  iconClass: string
-  label: string
-  value: WorkflowNodeType
-}>
+]
 
-const filteredComponentOptions = computed(() => {
+const filteredComponentGroups = computed(() => {
   if (activeTab.value !== 'basic') return []
 
   const keyword = searchKeyword.value.trim().toLocaleLowerCase()
-  if (!keyword) return workflowComponentOptions
+  if (!keyword) return workflowComponentGroups
 
-  return workflowComponentOptions.filter((componentOption) =>
-    componentOption.label.toLocaleLowerCase().includes(keyword),
-  )
+  return workflowComponentGroups
+    .map((group) => ({ ...group, list: group.list.filter((option) => option.label.toLocaleLowerCase().includes(keyword)) }))
+    .filter((group) => group.list.length > 0)
 })
 </script>
 
 <template>
-  <div
-    class="w-[402px] overflow-hidden rounded-md border border-N300 bg-white shadow-lg"
-    @click.stop
-    @mousedown.stop
-    @mousemove.stop
-  >
+  <div class="w-[402px] overflow-hidden rounded-md border border-N300 bg-white shadow-lg" @click.stop @mousedown.stop @mousemove.stop>
     <div class="flex h-11 items-stretch gap-7 border-b border-N300 px-4" role="tablist">
       <button
         v-for="componentTab in workflowComponentTabs"
@@ -109,35 +65,31 @@ const filteredComponentOptions = computed(() => {
         @click="activeTab = componentTab.value"
       >
         {{ componentTab.label }}
-        <span
-          v-if="activeTab === componentTab.value"
-          class="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-primary"
-        />
+        <span v-if="activeTab === componentTab.value" class="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-primary" />
       </button>
     </div>
 
     <div class="p-3">
       <MkSearchInput v-model="searchKeyword" placeholder="按名称搜索" />
 
-      <template v-if="filteredComponentOptions.length">
-        <p class="mb-3 mt-3 text-N600">AI 能力</p>
-        <div class="grid grid-cols-2 gap-3">
-          <button
-            v-for="componentOption in filteredComponentOptions"
-            :key="componentOption.value"
-            type="button"
-            class="flex h-10 items-center gap-3 rounded-md border border-N300 px-3 text-left text-N900 hover:border-primary hover:text-primary"
-            @click="emit('select', componentOption.value)"
-          >
-            <span
-              class="flex size-6 shrink-0 items-center justify-center rounded-md"
-              :class="componentOption.iconClass"
+      <template v-if="filteredComponentGroups.length">
+        <template v-for="group in filteredComponentGroups" :key="group.label">
+          <p class="mb-3 mt-3 text-N600">{{ group.label }}</p>
+          <div class="grid grid-cols-2 gap-3">
+            <button
+              v-for="componentOption in group.list"
+              :key="componentOption.value"
+              type="button"
+              class="flex h-10 items-center gap-3 rounded-md border border-N300 px-3 text-left text-N900 hover:border-primary hover:text-primary"
+              @click="emit('select', componentOption.value)"
             >
-              <img :src="componentOption.icon" alt="" class="size-4" />
-            </span>
-            <span>{{ componentOption.label }}</span>
-          </button>
-        </div>
+              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="componentOption.iconClass">
+                <img :src="componentOption.icon" alt="" class="size-4" />
+              </span>
+              <span>{{ componentOption.label }}</span>
+            </button>
+          </div>
+        </template>
       </template>
       <MkEmpty v-else :type="searchKeyword ? 'search' : 'default'" :image-size="72" />
     </div>
diff --git a/ui/src/workflow-canvas/icons/condition-node-icon.vue b/ui/src/workflow-canvas/icons/condition-node-icon.vue
new file mode 100644
index 00000000000..7a220814144
--- /dev/null
+++ b/ui/src/workflow-canvas/icons/condition-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <el-avatar class="avatar-gradient" shape="square">
+    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 75%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/nodes/condition-node/index.ts b/ui/src/workflow-canvas/nodes/condition-node/index.ts
new file mode 100644
index 00000000000..27d4287b4f7
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/condition-node/index.ts
@@ -0,0 +1,69 @@
+import ConditionNodeVue from './index.vue'
+import { type BaseEdgeModel, type Model } from '@logicflow/core'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+class ConditionNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, ConditionNodeVue)
+  }
+}
+
+interface BranchConditionListItem {
+  height: number
+  id: string
+  index: number
+}
+
+interface RefreshableEdgeModel extends BaseEdgeModel {
+  updatePathByAnchor(): void
+}
+
+const getUpIndexHeight = (conditionList: Array<{ height: number }>, index: number) => {
+  return conditionList
+    .filter((item, i) => i < index)
+    .map((item) => item.height + 8)
+    .reduce((x, y) => x + y, 0)
+}
+
+class ConditionModel extends WorkflowNodeModel {
+  refreshBranch() {
+    this.incoming.edges.forEach((edge) => {
+      ;(edge as RefreshableEdgeModel).updatePathByAnchor()
+    })
+    this.outgoing.edges.forEach((edge) => {
+      ;(edge as RefreshableEdgeModel).updatePathByAnchor()
+    })
+  }
+
+  override getDefaultAnchor(): Model.AnchorConfig[] {
+    const { id, x, y, width, height, properties } = this
+    const branchConditionList = (properties as { branch_condition_list?: BranchConditionListItem[] }).branch_condition_list
+    const branchList = branchConditionList ?? []
+    const currentHeight = height || 200
+    const showNode = properties.showNode === undefined ? true : properties.showNode
+    const anchors: Model.AnchorConfig[] = []
+    anchors.push({
+      x: x - width / 2,
+      y: showNode ? y : y - 15,
+      id: `${id}_left`,
+      edgeAddable: false,
+      type: 'left',
+    })
+
+    for (let index = 0; index < branchList.length; index++) {
+      const element = branchList[index]!
+      const h = getUpIndexHeight(branchList, index)
+      anchors.push({
+        x: x + width / 2,
+        y: showNode ? y - currentHeight / 2 + 75 + h + element.height / 2 : y - 15,
+        id: `${id}_${element.id}_right`,
+        type: 'right',
+      })
+    }
+
+    return anchors
+  }
+}
+
+export default { type: WorkflowNodeType.Condition, model: ConditionModel, view: ConditionNodeView }
diff --git a/ui/src/workflow-canvas/nodes/condition-node/index.vue b/ui/src/workflow-canvas/nodes/condition-node/index.vue
new file mode 100644
index 00000000000..d9fa7d40c48
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/condition-node/index.vue
@@ -0,0 +1,280 @@
+<template>
+  <NodeContainer :node-model="model">
+    <el-form ref="conditionNodeFormRef" :model="form_data" label-position="top" require-asterisk-position="right" label-width="auto" @submit.prevent>
+      <template v-for="(item, index) in form_data.branch" :key="item.id">
+        <div v-branch-resize="{ item, index }">
+          <el-card shadow="never" class="card-never drag-card mb-2" :class="{ 'drag-card-empty': index === form_data.branch.length - 1 }">
+            <template #header>
+              <div class="flex items-center justify-between">
+                <span>{{ item.type }}</span>
+                <div v-if="item.conditions.length > 1" class="flex items-center">
+                  <span class="text-N600">满足</span>
+                  <el-select :teleported="false" v-model="item.condition" size="small" style="width: 60px; margin: 0 8px">
+                    <el-option label="且" value="and" />
+                    <el-option label="或" value="or" />
+                  </el-select>
+                  <span class="text-N600">条件</span>
+                </div>
+              </div>
+            </template>
+
+            <div v-if="index !== form_data.branch.length - 1">
+              <template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
+                <el-row :gutter="8">
+                  <el-col :span="11">
+                    <el-form-item
+                      :prop="`branch.${index}.conditions.${cIndex}.field`"
+                      :rules="{ type: 'array', required: true, message: '请选择变量', trigger: 'change' }"
+                    >
+                      <NodeCascader :ref="setCascaderRef" :node-model="model" class="w-full" placeholder="请选择变量" v-model="condition.field" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="`branch.${index}.conditions.${cIndex}.compare`"
+                      :rules="{ required: true, message: '请选择比较符', trigger: 'change' }"
+                    >
+                      <el-select
+                        :teleported="false"
+                        v-model="condition.compare"
+                        placeholder="请选择比较符"
+                        clearable
+                        @change="changeCondition($event, index, cIndex)"
+                        @wheel="handleNodeWheel"
+                      >
+                        <template v-for="(item, index) in compareList" :key="index">
+                          <el-option :label="item.label" :value="item.value" />
+                        </template>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      v-if="!['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(condition.compare)"
+                      :prop="`branch.${index}.conditions.${cIndex}.value`"
+                      :rules="{ required: true, message: '请输入比较值', trigger: 'blur' }"
+                    >
+                      <el-input v-model="condition.value" placeholder="请输入比较值" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="1">
+                    <el-button
+                      :disabled="form_data.branch.length === 2 && item.conditions.length === 1"
+                      link
+                      type="info"
+                      class="mt-2"
+                      @click="deleteCondition(index, cIndex)"
+                    >
+                      <MkIcon name="icon_delete-trash_outlined" />
+                    </el-button>
+                  </el-col>
+                </el-row>
+              </template>
+            </div>
+
+            <el-button v-if="index !== form_data.branch.length - 1" link type="primary" @click="addCondition(index)">
+              <MkIcon name="icon_add_outlined" class="mr-1" />
+              添加条件
+            </el-button>
+          </el-card>
+        </div>
+      </template>
+      <el-button link type="primary" @click="addBranch">
+        <MkIcon name="icon_add_outlined" class="mr-1" />
+        添加分支
+      </el-button>
+    </el-form>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import { inject, onBeforeUnmount, onMounted, ref, type Directive, type DirectiveBinding, type Ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import type { BaseNodeModel } from '@logicflow/core'
+
+import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
+import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import { handleNodeWheel } from '@/workflow-canvas/core/utils'
+import { compareList } from '@/workflow-canvas/config/constants'
+import { randomId } from '@/utils/common'
+
+defineOptions({ name: 'WorkflowConditionNode' })
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel() as BaseNodeModel & { refreshBranch: () => void }
+
+interface ConditionItem {
+  field: Array<string>
+  compare: string
+  value: string
+}
+interface BranchItem {
+  conditions: ConditionItem[]
+  id: string
+  type: string
+  condition: string
+}
+interface BranchConditionListItem {
+  height: number
+  id: string
+  index: number
+}
+
+const defaultForm = () => ({
+  branch: [
+    {
+      conditions: [{ field: [], compare: '', value: '' }],
+      id: randomId(),
+      type: 'IF',
+      condition: 'and',
+    },
+    {
+      conditions: [],
+      id: randomId(),
+      type: 'ELSE',
+      condition: 'and',
+    },
+  ],
+})
+
+if (!model.properties.node_data) {
+  set(model.properties, 'node_data', defaultForm())
+}
+const form_data = model.properties.node_data as { branch: BranchItem[] }
+
+const conditionNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef: Ref<Array<{ validate: () => Promise<unknown> }>> = ref([])
+
+function setCascaderRef(el: unknown) {
+  if (el && !nodeCascaderRef.value.includes(el as { validate: () => Promise<unknown> })) {
+    nodeCascaderRef.value.push(el as { validate: () => Promise<unknown> })
+  }
+}
+
+const validate = () => {
+  const vList = [conditionNodeFormRef.value?.validate(), ...nodeCascaderRef.value.map((item) => item.validate())]
+  return Promise.all(vList).catch((err) => {
+    return Promise.reject({ node: model, errMessage: err })
+  })
+}
+
+function addBranch() {
+  const list: BranchItem[] = cloneDeep(model.properties.node_data.branch)
+  const obj: BranchItem = {
+    conditions: [{ field: [], compare: '', value: '' }],
+    type: 'ELSE IF ' + (list.length - 1),
+    id: randomId(),
+    condition: 'and',
+  }
+  list.splice(list.length - 1, 0, obj)
+  refreshBranchAnchor(list, true)
+  set(model.properties.node_data, 'branch', list)
+}
+
+function refreshBranchAnchor(list: BranchItem[], isAdd: boolean) {
+  const branchConditionList = cloneDeep<BranchConditionListItem[]>((model.properties.branch_condition_list as BranchConditionListItem[]) ?? [])
+  const newBranchConditionList = list
+    .map((item, index) => {
+      const find = branchConditionList.find((b) => b.id === item.id)
+      if (find) {
+        return { index, height: find.height, id: item.id }
+      } else {
+        if (isAdd) {
+          return { index, height: 12, id: item.id }
+        }
+      }
+    })
+    .filter((item) => item)
+  set(model.properties, 'branch_condition_list', newBranchConditionList)
+  model.refreshBranch()
+}
+
+function addCondition(index: number) {
+  const list = cloneDeep(model.properties.node_data.branch)
+  list[index].conditions.push({ field: [], compare: '', value: '' })
+  set(model.properties.node_data, 'branch', list)
+}
+
+function deleteCondition(index: number, cIndex: number) {
+  const list: BranchItem[] = cloneDeep(model.properties.node_data.branch)
+  const branch = list[index]
+  if (!branch) return
+  branch.conditions.splice(cIndex, 1)
+  if (branch.conditions.length === 0) {
+    const deleteEdge = list.splice(index, 1)
+    const deleteTargetAnchorIdList = deleteEdge.map((item) => model.id + '_' + item.id + '_right')
+    model.graphModel.eventCenter.emit(
+      'delete_edge',
+      model.outgoing.edges.filter((item) => item.sourceAnchorId && deleteTargetAnchorIdList.includes(item.sourceAnchorId)).map((item) => item.id),
+    )
+    refreshBranchAnchor(list, false)
+    list.forEach((item, i) => {
+      if (item.type === 'ELSE IF ' + (i + 1)) {
+        item.type = 'ELSE IF ' + i
+      }
+    })
+  }
+  set(model.properties.node_data, 'branch', list)
+}
+
+function changeCondition(val: string, index: number, cIndex: number) {
+  if (['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(val)) {
+    const list = cloneDeep(model.properties.node_data.branch)
+    list[index].conditions[cIndex].value = 1
+    set(model.properties.node_data, 'branch', list)
+  }
+}
+
+const branchCardRefs = new Map<HTMLElement, ResizeObserver>()
+
+const vBranchResize: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<{ item: BranchItem; index: number }>) {
+    const { item, index } = binding.value
+    const observer = new ResizeObserver(() => {
+      resizeCondition(el, item, index)
+    })
+    branchCardRefs.set(el, observer)
+    observer.observe(el)
+  },
+  unmounted(el: HTMLElement) {
+    branchCardRefs.get(el)?.disconnect()
+    branchCardRefs.delete(el)
+  },
+}
+
+function resizeCondition(container: HTMLElement, row: BranchItem, index: number) {
+  const branchConditionList = cloneDeep<BranchConditionListItem[]>((model.properties.branch_condition_list as BranchConditionListItem[]) ?? [])
+  const newBranchConditionList = branchConditionList.map((item) => {
+    if (item.id === row.id) {
+      return { ...item, height: container.offsetHeight, index }
+    }
+    return item
+  })
+  set(model.properties, 'branch_condition_list', newBranchConditionList)
+  refreshBranchAnchor(model.properties.node_data.branch, true)
+}
+
+onMounted(() => {
+  set(model, 'validate', validate)
+  if (!model.properties.branch_condition_list) {
+    refreshBranchAnchor(form_data.branch, true)
+  }
+})
+
+onBeforeUnmount(() => {
+  Array.from(branchCardRefs.values()).forEach((observer: ResizeObserver) => observer.disconnect())
+  branchCardRefs.clear()
+})
+</script>
+<style lang="scss" scoped>
+.drag-card {
+  :deep(.el-card__body) {
+    padding: 12px;
+  }
+
+  &.drag-card-empty {
+    :deep(.el-card__body) {
+      display: none;
+    }
+  }
+}
+</style>