Skip to content

feat: condition node #6839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
peslyn merged 1 commit into from
Sep 1, 2026
+391 −84
Merged

feat: condition node #6839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 36 additions & 84 deletions ui/src/workflow-canvas/component/NodeMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down
6 changes: 6 additions & 0 deletions ui/src/workflow-canvas/icons/condition-node-icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
69 changes: 69 additions & 0 deletions ui/src/workflow-canvas/nodes/condition-node/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }
Loading
Loading