From 52d7ccdc0198451b94bae0e4c3c1208a04575b80 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Thu, 20 Aug 2026 16:01:45 +0800
Subject: [PATCH] fix: Canvas node rendering

---
 ui/src/workflow-canvas/core/NodeCascader.vue  |   3 +-
 ui/src/workflow-canvas/core/NodeContainer.vue | 174 +++++++++---------
 ui/src/workflow-canvas/core/teleport.ts       |  30 +--
 ui/src/workflow-canvas/core/workflow-node.ts  |  37 ++--
 ui/src/workflow-canvas/index.vue              |   8 +-
 .../nodes/ai-chat-node/index.vue              |  24 +--
 .../workflow-canvas/nodes/base-node/index.vue |  20 +-
 .../nodes/reply-node/index.vue                |  25 +--
 .../nodes/start-node/index.vue                |  19 +-
 9 files changed, 163 insertions(+), 177 deletions(-)

diff --git a/ui/src/workflow-canvas/core/NodeCascader.vue b/ui/src/workflow-canvas/core/NodeCascader.vue
index 1e5d2ee893c..7143b28da8f 100644
--- a/ui/src/workflow-canvas/core/NodeCascader.vue
+++ b/ui/src/workflow-canvas/core/NodeCascader.vue
@@ -4,6 +4,7 @@ import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import type { WorkflowNodeField } from '@/workflow-canvas/types'
 import { WorkflowMode } from '@/workflow-canvas/types'
 import { iconComponent } from '../icons/utils'
+import type { BaseNodeModel } from '@logicflow/core'
 
 defineOptions({ name: 'WorkflowNodeCascader', inheritAttrs: false })
 
@@ -15,7 +16,7 @@ const props = withDefaults(
   defineProps<{
     global?: boolean
     modelValue: string[]
-    nodeModel: WorkflowNodeModel
+    nodeModel: BaseNodeModel
   }>(),
   { global: false },
 )
diff --git a/ui/src/workflow-canvas/core/NodeContainer.vue b/ui/src/workflow-canvas/core/NodeContainer.vue
index ad985578e65..c1d0277c6a1 100644
--- a/ui/src/workflow-canvas/core/NodeContainer.vue
+++ b/ui/src/workflow-canvas/core/NodeContainer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Model } from '@logicflow/core'
+import type { BaseNodeModel, Model } from '@logicflow/core'
 import { ArrowDownBold, CircleCheck } from '@element-plus/icons-vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted, watch } from 'vue'
@@ -10,7 +10,6 @@ import { WorkflowNodeType, WorkflowKind, type WorkflowNodeField } from '@/workfl
 import { MsgError, MsgConfirm } from '@/utils/message'
 import { BasicComponentsNode } from '@/workflow-canvas/config/node-mapping'
 import NodeMenu from '@/workflow-canvas/component/NodeMenu.vue'
-import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import { handleNodeWheel } from '@/workflow-canvas/core/utils'
 
 interface NodeNameForm {
@@ -40,7 +39,6 @@ type NodeContainerProperties = {
 
 const props = withDefaults(
   defineProps<{
-    nodeModel: WorkflowNodeModel
     exceptionNodeList?: string[]
   }>(),
   {
@@ -52,9 +50,9 @@ const props = withDefaults(
     ],
   },
 )
-const nodeProperties = computed(
-  () => props.nodeModel.properties as unknown as NodeContainerProperties,
-)
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
+const nodeProperties = computed(() => model.properties as unknown as NodeContainerProperties)
 
 const height = ref<{
   stepContainerHeight: number
@@ -69,17 +67,15 @@ const showAnchor = ref(false)
 const anchorData = ref<Model.AnchorConfig>()
 const dropdownMenuStyle = computed(() => {
   return {
-    top: anchorData.value
-      ? anchorData.value.y - props.nodeModel.y + props.nodeModel.height / 2 + 'px'
-      : '0px',
+    top: anchorData.value ? anchorData.value.y - model.y + model.height / 2 + 'px' : '0px',
   }
 })
 const nodeDisabled = computed({
   get: () => {
-    return props.nodeModel.properties.disabled || false
+    return model.properties.disabled || false
   },
   set: (v: boolean) => {
-    set(props.nodeModel.properties, 'disabled', v)
+    set(model.properties, 'disabled', v)
   },
 })
 const nodeEnabled = computed({
@@ -96,32 +92,32 @@ const form = ref<NodeNameForm>({
 
 const condition = computed({
   set: (v) => {
-    set(props.nodeModel.properties, 'condition', v)
+    set(model.properties, 'condition', v)
   },
   get: () => {
-    if (props.nodeModel.properties.condition) {
-      return props.nodeModel.properties.condition
+    if (model.properties.condition) {
+      return model.properties.condition
     }
-    set(props.nodeModel.properties, 'condition', 'AND')
+    set(model.properties, 'condition', 'AND')
     return true
   },
 })
 const showNode = computed({
   set: (v) => {
-    set(props.nodeModel.properties, 'showNode', v)
+    set(model.properties, 'showNode', v)
   },
   get: () => {
-    if (props.nodeModel.properties.showNode !== undefined) {
-      return props.nodeModel.properties.showNode
+    if (model.properties.showNode !== undefined) {
+      return model.properties.showNode
     }
-    set(props.nodeModel.properties, 'showNode', true)
+    set(model.properties, 'showNode', true)
     return true
   },
 })
 
 const node_status = computed(() => {
-  if (props.nodeModel.properties.status) {
-    return props.nodeModel.properties.status
+  if (model.properties.status) {
+    return model.properties.status
   }
   return 200
 })
@@ -129,7 +125,7 @@ const node_status = computed(() => {
 const sourceName = computed(() => {
   if (
     [WorkflowNodeType.Application, WorkflowNodeType.ToolLib].includes(
-      String(props.nodeModel.type) as WorkflowNodeType,
+      String(model.type) as WorkflowNodeType,
     )
   ) {
     return nodeProperties.value.node_data?.name || ''
@@ -138,7 +134,7 @@ const sourceName = computed(() => {
 })
 
 function renameNode() {
-  form.value.title = String(props.nodeModel.properties.stepName ?? '')
+  form.value.title = String(model.properties.stepName ?? '')
   nodeNameDialogVisible.value = true
 }
 const editName = async (formEl: FormInstance | null | undefined) => {
@@ -146,12 +142,12 @@ const editName = async (formEl: FormInstance | null | undefined) => {
   await formEl.validate((valid) => {
     if (valid) {
       if (
-        !props.nodeModel.graphModel.nodes
-          .filter((node) => node.id !== props.nodeModel.id)
+        !model.graphModel.nodes
+          .filter((node) => node.id !== model.id)
           .some((node) => node.properties.stepName === form.value.title)
       ) {
-        set(props.nodeModel.properties, 'stepName', form.value.title)
-        props.nodeModel.clearNextNodeField(true)
+        set(model.properties, 'stepName', form.value.title)
+        model.clearNextNodeField(true)
         nodeNameDialogVisible.value = false
         formEl.resetFields()
       } else {
@@ -163,43 +159,43 @@ const editName = async (formEl: FormInstance | null | undefined) => {
 
 const mousedown = (event?: MouseEvent) => {
   if (!event?.shiftKey) {
-    props.nodeModel.graphModel.clearSelectElements()
+    model.graphModel.clearSelectElements()
   }
-  set(props.nodeModel, 'isSelected', !props.nodeModel.isSelected)
-  set(props.nodeModel, 'isHovered', !props.nodeModel.isSelected)
-  props.nodeModel.graphModel.toFront(props.nodeModel.id)
+  set(model, 'isSelected', !model.isSelected)
+  set(model, 'isHovered', !model.isSelected)
+  model.graphModel.toFront(model.id)
 }
 const showicon = ref<number | string | null>(null)
 const copyNode = () => {
-  props.nodeModel.graphModel.clearSelectElements()
-  const cloneNode = props.nodeModel.graphModel.cloneNode(props.nodeModel.id)
+  model.graphModel.clearSelectElements()
+  const cloneNode = model.graphModel.cloneNode(model.id)
   if (!cloneNode) return
   set(cloneNode, 'isSelected', true)
   set(cloneNode, 'isHovered', true)
-  props.nodeModel.graphModel.toFront(cloneNode.id)
+  model.graphModel.toFront(cloneNode.id)
 }
 const deleteNode = () => {
   MsgConfirm('提示', '确定删除当前节点吗？', {
     confirmButtonText: '确定',
     confirmButtonClass: 'danger',
   }).then(() => {
-    if (String(props.nodeModel.type) === WorkflowNodeType.LoopNode) {
-      const next = props.nodeModel.graphModel.getNodeOutgoingNode(props.nodeModel.id)
+    if (String(model.type) === WorkflowNodeType.LoopNode) {
+      const next = model.graphModel.getNodeOutgoingNode(model.id)
       next.forEach((nextNode) => {
         if (String(nextNode.type) === WorkflowNodeType.LoopBodyNode) {
-          props.nodeModel.graphModel.deleteNode(nextNode.id)
+          model.graphModel.deleteNode(nextNode.id)
         }
       })
     }
-    props.nodeModel.graphModel.deleteNode(props.nodeModel.id)
+    model.graphModel.deleteNode(model.id)
   })
-  props.nodeModel.graphModel.eventCenter.emit('delete_node', undefined)
+  model.graphModel.eventCenter.emit('delete_node', undefined)
 }
 const resizeStepContainer = (wh: ResizeSize) => {
   if (wh.height) {
-    if (!props.nodeModel.virtual) {
+    if (!model.virtual) {
       height.value.stepContainerHeight = wh.height
-      props.nodeModel.setHeight(height.value.stepContainerHeight)
+      model.setHeight(height.value.stepContainerHeight)
     }
   }
 }
@@ -210,31 +206,31 @@ function clickNodes(nodeType: WorkflowNodeType) {
   if (!item || !anchor) return
 
   const width = Number((item.properties as { width?: number }).width ?? 214)
-  const nodeModel = props.nodeModel.graphModel.addNode({
+  const newModel = model.graphModel.addNode({
     type: item.type,
     properties: item.properties,
     x: anchor.x + width / 2 + 200,
     y: anchor.y - item.height,
   })
-  props.nodeModel.graphModel.addEdge({
+  newModel.graphModel.addEdge({
     type: 'app-edge',
-    sourceNodeId: props.nodeModel.id,
+    sourceNodeId: model.id,
     sourceAnchorId: anchor.id,
-    targetNodeId: nodeModel.id,
-    targetAnchorId: nodeModel.id + '_left',
+    targetNodeId: model.id,
+    targetAnchorId: model.id + '_left',
   })
 
   closeNodeMenu()
 }
 const enable_exception = computed({
   set: (v) => {
-    set(props.nodeModel.properties, 'enableException', v)
+    set(model.properties, 'enableException', v)
   },
   get: () => {
-    if (props.nodeModel.properties.enableException !== undefined) {
-      return props.nodeModel.properties.enableException
+    if (model.properties.enableException !== undefined) {
+      return model.properties.enableException
     }
-    set(props.nodeModel.properties, 'enableException', false)
+    set(model.properties, 'enableException', false)
     return false
   },
 })
@@ -244,8 +240,8 @@ const nodeFields = computed(() => {
       return {
         label: field.label,
         value: field.value,
-        globeLabel: `{{${props.nodeModel.properties.stepName}.${field.value}}}`,
-        globeValue: `{{context['${props.nodeModel.id}'].${field.value}}}`,
+        globeLabel: `{{${model.properties.stepName}.${field.value}}}`,
+        globeValue: `{{context['${model.id}'].${field.value}}}`,
       }
     })
     return fields
@@ -262,16 +258,16 @@ const abnormalNodeFields = computed(() => {
     {
       label: '异常信息',
       value: 'exception_message',
-      globeLabel: `{{${props.nodeModel.properties.stepName}.exception_message}}`,
-      globeValue: `{{context['${props.nodeModel.id}'].exception_message}}`,
+      globeLabel: `{{${model.properties.stepName}.exception_message}}`,
+      globeValue: `{{context['${model.id}'].exception_message}}`,
     },
   ]
 })
 watch(enable_exception, () => {
-  props.nodeModel.graphModel.eventCenter.emit(
+  model.graphModel.eventCenter.emit(
     'delete_edge',
-    props.nodeModel.outgoing.edges
-      .filter((item) => item.sourceAnchorId === `${props.nodeModel.id}_exception_right`)
+    model.outgoing.edges
+      .filter((item) => item.sourceAnchorId === `${model.id}_exception_right`)
       .map((item) => item.id),
   )
 })
@@ -318,7 +314,7 @@ const keyWord = ref('')
 const currentKeyWord = ref(false)
 const selectOn = (kw: string) => {
   keyWord.value = kw
-  props.nodeModel.setSelected(false)
+  model.setSelected(false)
   currentKeyWord.value = false
 }
 /**
@@ -326,7 +322,7 @@ const selectOn = (kw: string) => {
  * @param kw
  */
 const focusOn = () => {
-  props.nodeModel.setSelected(true)
+  model.setSelected(true)
   currentKeyWord.value = true
 }
 /**
@@ -358,26 +354,26 @@ const highlightedStepName = (contentText: string) => {
   }
 }
 onMounted(() => {
-  set(props.nodeModel, 'openNodeMenu', (anchor: Model.AnchorConfig) => {
+  set(model, 'openNodeMenu', (anchor: Model.AnchorConfig) => {
     showAnchor.value ? closeNodeMenu() : openNodeMenu(anchor)
   })
-  set(props.nodeModel, 'selectOn', selectOn)
-  set(props.nodeModel, 'focusOn', focusOn)
-  set(props.nodeModel, 'clearSelectOn', clearSelectOn)
+  set(model, 'selectOn', selectOn)
+  set(model, 'focusOn', focusOn)
+  set(model, 'clearSelectOn', clearSelectOn)
   initResizeObserver()
 })
 let resizeObserver: ResizeObserver | null = null
-const initResizeObserver=()=>{
-   if (!containerRef.value) return
-  
+const initResizeObserver = () => {
+  if (!containerRef.value) return
+
   resizeObserver = new ResizeObserver((entries) => {
     for (const entry of entries) {
-      const {  height } = entry.contentRect
+      const { height } = entry.contentRect
       // 在这里处理尺寸变化
-      resizeStepContainer({  height:height+32 })
+      resizeStepContainer({ height: height + 32 })
     }
   })
-  
+
   resizeObserver.observe(containerRef.value)
 }
 const containerRef = ref<HTMLElement>()
@@ -390,9 +386,9 @@ onBeforeUnmount(() => {
   <div class="workflow-node-container relative overflow-visible p-4" @mousedown="mousedown">
     <div
       class="step-container overflow-visible rounded-lg border-2 border-white bg-white p-4"
-      :class="{ isSelected: props.nodeModel.isSelected, error: node_status !== 200 }"
+      :class="{ isSelected: model.isSelected, error: node_status !== 200 }"
     >
-      <div ref="containerRef" >
+      <div ref="containerRef">
         <div class="flex-between">
           <div
             class="flex w-[69%] items-center"
@@ -402,16 +398,16 @@ onBeforeUnmount(() => {
             @dragend.prevent
           >
             <component
-              :is="iconComponent(`${nodeModel.type}-icon`)"
+              :is="iconComponent(`${model.type}-icon`)"
               class="mr-2"
               :size="24"
-              :item="nodeModel?.properties.node_data"
+              :item="model?.properties.node_data"
               style="--el-avatar-border-radius: 6px"
             />
             <h4
               class="truncate break-all"
-              :title="String(nodeModel.properties.stepName ?? '')"
-              v-html="highlightedStepName(String(nodeModel.properties.stepName ?? ''))"
+              :title="String(model.properties.stepName ?? '')"
+              v-html="highlightedStepName(String(model.properties.stepName ?? ''))"
             ></h4>
           </div>
 
@@ -424,7 +420,7 @@ onBeforeUnmount(() => {
               />
             </el-button>
             <MkDropdown
-              v-if="showConditionOperate(String(nodeModel.type))"
+              v-if="showConditionOperate(String(model.type))"
               :teleported="false"
               trigger="click"
               placement="bottom-start"
@@ -446,11 +442,7 @@ onBeforeUnmount(() => {
                 </div>
               </template>
             </MkDropdown>
-            <MkDropdown
-              v-if="showOperate(String(nodeModel.type))"
-              :teleported="false"
-              trigger="click"
-            >
+            <MkDropdown v-if="showOperate(String(model.type))" :teleported="false" trigger="click">
               <el-button text>
                 <MkIcon name="icon_more_outlined" class="text-N600" />
               </el-button>
@@ -467,10 +459,10 @@ onBeforeUnmount(() => {
                   <template
                     v-if="
                       !(
-                        (String(nodeModel.type) == WorkflowNodeType.ToolLib &&
+                        (String(model.type) == WorkflowNodeType.ToolLib &&
                           nodeProperties.kind == WorkflowKind.DataSource) ||
-                        String(nodeModel.type) == WorkflowNodeType.DataSourceLocalNode ||
-                        String(nodeModel.type) == WorkflowNodeType.DataSourceWebNode
+                        String(model.type) == WorkflowNodeType.DataSourceLocalNode ||
+                        String(model.type) == WorkflowNodeType.DataSourceWebNode
                       )
                     "
                   >
@@ -495,7 +487,15 @@ onBeforeUnmount(() => {
           </div>
         </div>
         <el-collapse-transition>
-          <div v-show="showNode" class="mt-4" @mousedown.stop @keydown.stop @click.stop>
+          <div
+            v-show="showNode"
+            class="mt-4"
+            @pointermove.stop
+            @pointerenter.stop
+            @mousedown.stop
+            @keydown.stop
+            @click.stop
+          >
             <el-alert
               v-if="nodeDisabled"
               class="mb-4"
@@ -508,7 +508,7 @@ onBeforeUnmount(() => {
               v-if="node_status != 200"
               class="mb-4"
               :title="
-                String(props.nodeModel.type) === WorkflowNodeType.Application
+                String(model.type) === WorkflowNodeType.Application
                   ? '该智能体不可用'
                   : '该工具不可用'
               "
@@ -522,7 +522,7 @@ onBeforeUnmount(() => {
                 <h5 class="my-2">
                   {{ output_title }}
                 </h5>
-                <div v-if="exceptionNodeList.includes(String(nodeModel.type))" class="text-right">
+                <div v-if="exceptionNodeList.includes(String(model.type))" class="text-right">
                   <span class="mr-2 mt-2 text-N600">异常捕获</span>
                   <el-switch v-model="enable_exception" size="small" />
                 </div>
diff --git a/ui/src/workflow-canvas/core/teleport.ts b/ui/src/workflow-canvas/core/teleport.ts
index 5d58b5e7c5b..65d32907305 100644
--- a/ui/src/workflow-canvas/core/teleport.ts
+++ b/ui/src/workflow-canvas/core/teleport.ts
@@ -3,16 +3,8 @@ import type { Component } from 'vue'
 import { defineComponent, h, reactive, isVue3, Teleport, markRaw, Fragment } from 'vue-demi'
 
 type TeleportNodeModel = BaseNodeModel | BaseEdgeModel
-type TeleportProps = Record<string, unknown>
 type TeleportProvide = Record<string | symbol, unknown>
-type PropsFactory<NodeModel extends TeleportNodeModel> = (
-  node: NodeModel,
-  graph: GraphModel,
-) => TeleportProps
-type ProvideFactory<NodeModel extends TeleportNodeModel> = (
-  node: NodeModel,
-  graph: GraphModel,
-) => TeleportProvide
+type ProvideFactory<NodeModel extends TeleportNodeModel> = () => TeleportProvide
 
 let active = false
 const teleportItems = reactive<Record<string, Component>>({})
@@ -21,27 +13,13 @@ export function connect<NodeModel extends TeleportNodeModel>(
   id: string,
   component: Component,
   container: HTMLDivElement,
-  node: NodeModel,
-  graph: GraphModel,
-  get_props?: PropsFactory<NodeModel>,
-  get_provide?: ProvideFactory<NodeModel>,
+  get_provide: ProvideFactory<NodeModel>,
 ) {
-  if (!get_props) {
-    get_props = (node: BaseNodeModel | BaseEdgeModel, graph: GraphModel) => {
-      return { nodeModel: node, graph }
-    }
-  }
-  if (!get_provide) {
-    get_provide = (node: BaseNodeModel | BaseEdgeModel, graph: GraphModel) => ({
-      getNode: () => node,
-      getGraph: () => graph,
-    })
-  }
   if (active) {
     teleportItems[id] = markRaw(
       defineComponent({
-        render: () => h(Teleport, { to: container }, [h(component, get_props(node, graph))]),
-        provide: () => get_provide(node, graph),
+        render: () => h(Teleport, { to: container }, [h(component)]),
+        provide: () => get_provide(),
       }),
     )
   }
diff --git a/ui/src/workflow-canvas/core/workflow-node.ts b/ui/src/workflow-canvas/core/workflow-node.ts
index 917cd0ac076..56d4362faae 100644
--- a/ui/src/workflow-canvas/core/workflow-node.ts
+++ b/ui/src/workflow-canvas/core/workflow-node.ts
@@ -1,7 +1,5 @@
 import type { Component } from 'vue'
-import { createApp, h as createVNode } from 'vue'
-import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { createApp } from 'vue'
 import {
   h as createLogicFlowElement,
   HtmlNode,
@@ -12,6 +10,7 @@ import {
 } from '@logicflow/core'
 import { BasicComponentsNode } from '@/workflow-canvas/config/node-mapping'
 import { WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types'
+import { connect, disconnect } from './teleport'
 
 type NodeViewProps = ConstructorParameters<typeof HtmlNode>[0]
 type NodeFieldGroup = Record<string, WorkflowNodeField[]>
@@ -92,23 +91,31 @@ export class WorkflowNodeView extends HtmlNode {
     )
   }
 
-  setHtml(rootElement: SVGForeignObjectElement) {
+  setHtml(rootEl: SVGForeignObjectElement) {
     if (this.nodeApp) return
-    const mountElement = document.createElement('div')
-    rootElement.replaceChildren(mountElement)
-    const nodeModel = this.props.model
-
-    this.nodeApp = createApp({
-      render: () => createVNode(this.vueComponent, { nodeModel }),
-    })
-    this.nodeApp.use(ElementPlus, { locale: zhCn })
-    this.nodeApp.mount(mountElement)
+    if (!rootEl.innerHTML) {
+      const node = document.createElement('div')
+      node.setAttribute('data-node-id', this.props.model.id)
+      node.setAttribute('data-node-type', this.props.model.type)
+      rootEl.appendChild(node)
+      this.renderVueComponent(node)
+    }
+  }
+  protected renderVueComponent(root: any) {
+    const { model, graphModel } = this.props
+    if (root) {
+      connect(this.targetId(), this.vueComponent, root, () =>
+        this.props.graphModel.get_provide(reactive(model), reactive(graphModel)),
+      )
+    }
+  }
+  protected targetId() {
+    return `${this.props.graphModel.flowId}:${this.props.model.id}`
   }
 
   componentWillUnmount() {
     super.componentWillUnmount()
-    this.nodeApp?.unmount()
-    this.nodeApp = undefined
+    disconnect(this.targetId())
   }
 }
 
diff --git a/ui/src/workflow-canvas/index.vue b/ui/src/workflow-canvas/index.vue
index 6010c2be4e3..4f03f0d2b06 100644
--- a/ui/src/workflow-canvas/index.vue
+++ b/ui/src/workflow-canvas/index.vue
@@ -9,15 +9,13 @@ import { disconnectAll, getTeleport } from '@/workflow-canvas/core/teleport'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import Dagre from '@/workflow-canvas/plugins/dagre'
 import { WorkflowMode, WorkflowNodeType } from '@/workflow-canvas/types'
-import {type ShapeItem} from "@/workflow-canvas/types"
+import { type ShapeItem } from '@/workflow-canvas/types'
 defineOptions({ name: 'MkWorkflow' })
 
 type CanvasWorkflowNodeModel = WorkflowNodeModel & {
   set_loop_body?: () => void
 }
 
-
-
 const props = withDefaults(
   defineProps<{
     data?: LogicFlow.GraphConfigData | null
@@ -75,10 +73,10 @@ function renderGraphData(data: LogicFlow.GraphConfigData = props.data ?? {}) {
   lf.value.render(data ? data : {})
 
   lf.value.graphModel.get_provide = (
-    node: LogicFlow.NodeData | null,
+    model: LogicFlow.NodeData | null,
     graph: GraphModel | null,
   ) => ({
-    getNode: () => node,
+    getModel: () => model,
     getGraph: () => graph,
     workflowMode: workflow_mode,
     loopWorkflowMode: loop_workflow_mode,
diff --git a/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue b/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue
index 2939692eb17..38e1c403bca 100644
--- a/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { set } from 'lodash'
 import type { FormInstance } from 'element-plus'
-import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
 import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import type { BaseNodeModel } from '@logicflow/core'
 
 defineOptions({ name: 'WorkflowAiChatNode' })
-
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
 interface AiChatNodeForm {
   model_id: string
   model_id_reference: string[]
@@ -16,25 +17,24 @@ interface AiChatNodeForm {
   system: string
 }
 
-const props = defineProps<{ nodeModel: WorkflowNodeModel }>()
 const formRef = useTemplateRef<FormInstance>('formRef')
 const nodeCascaderRef = useTemplateRef<InstanceType<typeof NodeCascader>>('nodeCascaderRef')
 
 const formData = computed<AiChatNodeForm>({
   get: () => {
-    if (!props.nodeModel.properties.node_data) {
-      set(props.nodeModel.properties, 'node_data', {
+    if (!model.properties.node_data) {
+      model.properties.node_data = {
         model_id: '',
         model_id_reference: [],
         model_id_type: 'custom',
         model_setting: { reasoning_content_enable: false },
         prompt: '{{开始.question}}',
         system: '',
-      })
+      }
     }
-    return props.nodeModel.properties.node_data as AiChatNodeForm
+    return model.properties.node_data as AiChatNodeForm
   },
-  set: (value) => set(props.nodeModel.properties, 'node_data', value),
+  set: (value) => (model.properties.node_data = value),
 })
 
 function validate() {
@@ -43,14 +43,14 @@ function validate() {
       ? nodeCascaderRef.value?.validate()
       : Promise.resolve(),
     formRef.value?.validate(),
-  ]).catch((error) => Promise.reject({ node: props.nodeModel, errMessage: error }))
+  ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
-onMounted(() => set(props.nodeModel, 'validate', validate))
+onMounted(() => set(model, 'validate', validate))
 </script>
 
 <template>
-  <NodeContainer :node-model="props.nodeModel">
+  <NodeContainer :node-model="model">
     <h6 class="mb-3">节点设置</h6>
     <el-form
       ref="formRef"
@@ -82,7 +82,7 @@ onMounted(() => set(props.nodeModel, 'validate', validate))
           v-if="formData.model_id_type === 'reference'"
           ref="nodeCascaderRef"
           v-model="formData.model_id_reference"
-          :node-model="props.nodeModel"
+          :node-model="model"
           class="w-full"
           placeholder="请选择变量"
         />
diff --git a/ui/src/workflow-canvas/nodes/base-node/index.vue b/ui/src/workflow-canvas/nodes/base-node/index.vue
index eb5200d6031..3f2f3d80af4 100644
--- a/ui/src/workflow-canvas/nodes/base-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/base-node/index.vue
@@ -1,41 +1,41 @@
 <script setup lang="ts">
 import { set } from 'lodash'
 import type { FormInstance } from 'element-plus'
-import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import type { BaseNodeModel } from '@logicflow/core'
 
 defineOptions({ name: 'WorkflowBaseNode' })
-
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
 interface BaseNodeForm {
   desc: string
   name: string
   prologue: string
 }
 
-const props = defineProps<{ nodeModel: WorkflowNodeModel }>()
 const formRef = useTemplateRef<FormInstance>('formRef')
 
 const formData = computed<BaseNodeForm>({
   get: () => {
-    if (!props.nodeModel.properties.node_data) {
-      set(props.nodeModel.properties, 'node_data', { name: '', desc: '', prologue: '' })
+    if (!model.properties.node_data) {
+      set(model.properties, 'node_data', { name: '', desc: '', prologue: '' })
     }
-    return props.nodeModel.properties.node_data as BaseNodeForm
+    return model.properties.node_data as BaseNodeForm
   },
-  set: (value) => set(props.nodeModel.properties, 'node_data', value),
+  set: (value) => set(model.properties, 'node_data', value),
 })
 
 function validate() {
   return formRef.value
     ?.validate()
-    .catch((error) => Promise.reject({ node: props.nodeModel, errMessage: error }))
+    .catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
-onMounted(() => set(props.nodeModel, 'validate', validate))
+onMounted(() => set(model, 'validate', validate))
 </script>
 
 <template>
-  <NodeContainer :node-model="props.nodeModel">
+  <NodeContainer :node-model="model">
     <el-form
       ref="formRef"
       :model="formData"
diff --git a/ui/src/workflow-canvas/nodes/reply-node/index.vue b/ui/src/workflow-canvas/nodes/reply-node/index.vue
index 0dce3782123..94441b2af93 100644
--- a/ui/src/workflow-canvas/nodes/reply-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/reply-node/index.vue
@@ -5,9 +5,11 @@ import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
 import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
 import { isLastNode } from '@/workflow-canvas/core/utils'
+import type { BaseNodeModel } from '@logicflow/core'
 
 defineOptions({ name: 'WorkflowReplyNode' })
-
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
 interface ReplyNodeForm {
   content: string
   fields: string[]
@@ -15,23 +17,22 @@ interface ReplyNodeForm {
   reply_type: 'content' | 'referencing'
 }
 
-const props = defineProps<{ nodeModel: WorkflowNodeModel }>()
 const formRef = useTemplateRef<FormInstance>('formRef')
 const nodeCascaderRef = useTemplateRef<InstanceType<typeof NodeCascader>>('nodeCascaderRef')
 
 const formData = computed<ReplyNodeForm>({
   get: () => {
-    if (!props.nodeModel.properties.node_data) {
-      set(props.nodeModel.properties, 'node_data', {
+    if (!model.properties.node_data) {
+      model.properties.node_data = {
         content: '',
         fields: [],
         is_result: true,
         reply_type: 'content',
-      })
+      }
     }
-    return props.nodeModel.properties.node_data as ReplyNodeForm
+    return model.properties.node_data as ReplyNodeForm
   },
-  set: (value) => set(props.nodeModel.properties, 'node_data', value),
+  set: (value) => (model.properties.node_data = value),
 })
 
 function validate() {
@@ -40,19 +41,19 @@ function validate() {
       ? nodeCascaderRef.value?.validate()
       : Promise.resolve(),
     formRef.value?.validate(),
-  ]).catch((error) => Promise.reject({ node: props.nodeModel, errMessage: error }))
+  ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
-  if (formData.value.is_result === undefined && isLastNode(props.nodeModel)) {
+  if (formData.value.is_result === undefined && isLastNode(model)) {
     formData.value.is_result = true
   }
-  set(props.nodeModel, 'validate', validate)
+  model.validate = validate
 })
 </script>
 
 <template>
-  <NodeContainer :node-model="props.nodeModel">
+  <NodeContainer :node-model="model">
     <el-form ref="formRef" :model="formData" label-position="top" @submit.prevent>
       <el-form-item label="回复内容">
         <template #label>
@@ -69,7 +70,7 @@ onMounted(() => {
           v-if="formData.reply_type === 'referencing'"
           ref="nodeCascaderRef"
           v-model="formData.fields"
-          :node-model="props.nodeModel"
+          :node-model="model"
           class="w-full"
           placeholder="请选择变量"
         />
diff --git a/ui/src/workflow-canvas/nodes/start-node/index.vue b/ui/src/workflow-canvas/nodes/start-node/index.vue
index 429988c8eb1..6012e9be13a 100644
--- a/ui/src/workflow-canvas/nodes/start-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/start-node/index.vue
@@ -5,6 +5,7 @@ import type { WorkflowNodeField, WorkflowNodeModel } from '@/workflow-canvas/cor
 import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 import { copyText } from '@/utils/clipboard'
+import type { BaseEdgeModel, BaseNodeModel, GraphModel } from '@logicflow/core'
 
 defineOptions({ name: 'WorkflowStartNode' })
 
@@ -15,9 +16,9 @@ interface SourceField {
   variable?: string
 }
 
-const props = defineProps<{ nodeModel: WorkflowNodeModel }>()
-const nodeModel = props.nodeModel
-const nodeConfig = nodeModel.properties.config ?? (nodeModel.properties.config = {})
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
+const nodeConfig = model.properties.config ?? (model.properties.config = {})
 
 const globalFields = computed(() => (nodeConfig.globalFields ?? []) as WorkflowNodeField[])
 const chatFields = computed(() => (nodeConfig.chatFields ?? []) as WorkflowNodeField[])
@@ -31,7 +32,7 @@ function formatFieldReference(fieldValue: string) {
 }
 
 function refreshFields() {
-  const baseNode = props.nodeModel.graphModel.getNodeModelById(WorkflowNodeType.Base)
+  const baseNode = model.graphModel.getNodeModelById(WorkflowNodeType.Base)
   const userFields = (
     cloneDeep(baseNode?.properties.user_input_field_list ?? []) as SourceField[]
   ).map((field: SourceField) => ({
@@ -65,18 +66,18 @@ function refreshFields() {
 
 onMounted(() => {
   refreshFields()
-  props.nodeModel.graphModel.eventCenter.on('refreshFieldList', refreshFields)
-  props.nodeModel.graphModel.eventCenter.on('chatFieldList', refreshFields)
+  model.graphModel.eventCenter.on('refreshFieldList', refreshFields)
+  model.graphModel.eventCenter.on('chatFieldList', refreshFields)
 })
 
 onBeforeUnmount(() => {
-  props.nodeModel.graphModel.eventCenter.off('refreshFieldList', refreshFields)
-  props.nodeModel.graphModel.eventCenter.off('chatFieldList', refreshFields)
+  model.graphModel.eventCenter.off('refreshFieldList', refreshFields)
+  model.graphModel.eventCenter.off('chatFieldList', refreshFields)
 })
 </script>
 
 <template>
-  <NodeContainer :node-model="props.nodeModel">
+  <NodeContainer :node-model="model">
     <h6 class="mb-2">全局变量</h6>
     <div class="rounded-md bg-N100 px-3 py-1 text-N600">
       <div