From 209cf6803d758d4543913472d2ceed95cf9cb732 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 1 Sep 2026 19:03:30 +0800
Subject: [PATCH] feat: workflow

---
 .../admin/system/settings/theme-setting.ts    |   1 -
 .../business/model-select/index.vue           |  14 +-
 .../admin/workspace/modules/application.ts    |   2 +-
 ui/src/styles/element-plus.scss               |   6 +-
 ui/src/styles/tailwind.css                    |   1 +
 ui/src/views/application/ApplicationView.vue  |   5 +-
 .../application-card/ApplicationCard.vue      |   3 +
 .../SettingApplicationAction.vue              |  25 +-
 .../workflow/ApplicationWorkflowView.vue      |   2 +-
 ui/src/workflow-canvas/WORKFLOW_README.md     |   6 +
 .../component/NodeConditionDropdown.vue       |  65 ++++
 .../component/NodeOperateDropdown.vue         | 162 ++++++++++
 ui/src/workflow-canvas/config/node-data.ts    |  69 ++---
 ui/src/workflow-canvas/core/NodeContainer.vue | 278 +++++-------------
 ui/src/workflow-canvas/core/loop-edge.ts      |   1 -
 ui/src/workflow-canvas/core/utils.ts          |  33 ++-
 ui/src/workflow-canvas/core/workflow-node.ts  |  49 ++-
 .../workflow-canvas/icons/base-node-icon.vue  |   4 +-
 ui/src/workflow-canvas/index.vue              |  14 +-
 .../workflow-canvas/nodes/base-node/index.ts  |   2 +-
 ui/src/workflow-canvas/style.scss             |   9 +
 21 files changed, 466 insertions(+), 285 deletions(-)
 create mode 100644 ui/src/workflow-canvas/component/NodeConditionDropdown.vue
 create mode 100644 ui/src/workflow-canvas/component/NodeOperateDropdown.vue
 create mode 100644 ui/src/workflow-canvas/style.scss

diff --git a/ui/src/api/admin/system/settings/theme-setting.ts b/ui/src/api/admin/system/settings/theme-setting.ts
index 5a9b3a9f3b3..b29ce6ef268 100644
--- a/ui/src/api/admin/system/settings/theme-setting.ts
+++ b/ui/src/api/admin/system/settings/theme-setting.ts
@@ -1,5 +1,4 @@
 import { get, put } from '../../core/request'
-import type { ThemeInfo } from '../../auth/types'
 
 /** 保存系统外观主题设置。 */
 const putThemeSetting = (payload: FormData) => {
diff --git a/ui/src/components/business/model-select/index.vue b/ui/src/components/business/model-select/index.vue
index 1b7e2aabd5a..1f6d8c1ac62 100644
--- a/ui/src/components/business/model-select/index.vue
+++ b/ui/src/components/business/model-select/index.vue
@@ -47,13 +47,21 @@ const modelOptionGroups = computed<ModelOptionGroup[]>(() => {
   })
 })
 
-const selectedProviderIcon = computed(() => modelOptionGroups.value.find(({ models }) => models.some(({ id }) => id === selectedModelId.value))?.icon ?? '')
+const selectedProviderIcon = computed(
+  () => modelOptionGroups.value.find(({ models }) => models.some(({ id }) => id === selectedModelId.value))?.icon ?? '',
+)
 </script>
 
 <template>
-  <el-select v-model="selectedModelId" v-bind="$attrs" class="w-full" clearable filterable :loading="loading">
+  <el-select v-model="selectedModelId" v-bind="$attrs" class="w-full" clearable filterable :loading="loading" :teleported="false">
     <el-option-group v-for="group in modelOptionGroups" :key="group.provider" :label="group.name">
-      <el-option v-for="model in group.models" :key="model.id" :disabled="model.status !== MODEL_STATUS.SUCCESS" :label="model.name" :value="model.id">
+      <el-option
+        v-for="model in group.models"
+        :key="model.id"
+        :disabled="model.status !== MODEL_STATUS.SUCCESS"
+        :label="model.name"
+        :value="model.id"
+      >
         <div class="flex h-full items-center gap-2">
           <span class="h-5 w-5 shrink-0" v-html="group.icon" />
           <span class="min-w-0 flex-1 truncate" :title="model.name">{{ model.name }}</span>
diff --git a/ui/src/router/admin/workspace/modules/application.ts b/ui/src/router/admin/workspace/modules/application.ts
index 386d95efa2a..047a9032d8b 100644
--- a/ui/src/router/admin/workspace/modules/application.ts
+++ b/ui/src/router/admin/workspace/modules/application.ts
@@ -21,7 +21,7 @@ export const applicationRoutes: RouteRecordRaw[] = [
         children: [
           {
             path: 'overview',
-            name: 'workspace-application-detail',
+            name: 'workspace-application-overview',
             component: () => import('@/views/application-detail/overview/OverviewView.vue'),
             meta: { title: '概览', icon: 'icon_screen_outlined', activeIcon: 'icon_screen_filled', order: 10 },
           },
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index a5a87655fcb..0a1f7f9fd61 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -36,6 +36,7 @@
   --el-border-radius-round: 16px;
   --el-border-radius-small: 4px;
   --el-box-shadow-light: 0 4px 8px 0 var(--mk-N900-transparent-10);
+  --el-box-shadow-lighter: 0px 2px 4px 0px rgb(var(--mk-N900-rgb) / 12%);
   --el-menu-icon-width: auto;
   --el-text-color-primary: var(--mk-N900);
   --el-text-color-regular: var(--mk-N600);
@@ -137,7 +138,7 @@
     &:hover,
     &:active,
     &.is-active {
-      box-shadow: 0px 2px 4px 0px rgb(var(--mk-N900-rgb) / 12%);
+      box-shadow: var(--el-box-shadow-lighter);
       color: var(--el-text-color-primary);
       background: white;
       border-color: var(--el-border-color);
@@ -873,7 +874,7 @@
   .el-switch__core {
     min-width: 28px;
     .el-switch__action {
-      box-shadow: 0px 2px 4px 0px rgb(var(--mk-N900-rgb) / 12%);
+      box-shadow: var(--el-box-shadow-lighter);
     }
   }
 }
@@ -1051,6 +1052,7 @@
 
 /* textarea */
 .el-textarea {
+  --el-input-text-color: var(--el-text-color-primary);
   &:has(.el-input__inner[readonly]) {
     --el-input-focus-border-color: var(--el-input-border-color);
     --el-input-hover-border-color: var(--el-input-border-color);
diff --git a/ui/src/styles/tailwind.css b/ui/src/styles/tailwind.css
index 905513c2ce2..95ed1e014f1 100644
--- a/ui/src/styles/tailwind.css
+++ b/ui/src/styles/tailwind.css
@@ -25,6 +25,7 @@
 
   /* shadows */
   --shadow-md: var(--el-box-shadow-light);
+  --shadow-sm: var(--el-box-shadow-lighter);
 
   /* typography */
   --text-xs: 10px;
diff --git a/ui/src/views/application/ApplicationView.vue b/ui/src/views/application/ApplicationView.vue
index 37fb90cf019..068527ee577 100644
--- a/ui/src/views/application/ApplicationView.vue
+++ b/ui/src/views/application/ApplicationView.vue
@@ -87,9 +87,10 @@ function handleDeleteApplication(applicationId: string) {
   if (applicationIndex >= 0) applicationData.value.splice(applicationIndex, 1)
 }
 
+/* card点击去详情 */
 function handleToDetail(application: ApplicationDetail) {
-  void router.push({
-    name: 'workspace-application-detail',
+  router.push({
+    name: 'workspace-application-overview',
     params: { applicationId: application.id, type: application.type, workspaceId: route.params.workspaceId },
   })
 }
diff --git a/ui/src/views/application/application-card/ApplicationCard.vue b/ui/src/views/application/application-card/ApplicationCard.vue
index ca5ed428c35..7d104067d36 100644
--- a/ui/src/views/application/application-card/ApplicationCard.vue
+++ b/ui/src/views/application/application-card/ApplicationCard.vue
@@ -52,6 +52,9 @@ function handleOpen() {
       </template>
 
       <component :is="Action">
+        <el-button text>
+          <MkIcon name="icon_new-chat_outlined" />
+        </el-button>
         <el-divider direction="vertical" />
         <component :is="ActionDropdown">
           <slot name="action-dropdown" />
diff --git a/ui/src/views/application/application-card/action-dropdown/SettingApplicationAction.vue b/ui/src/views/application/application-card/action-dropdown/SettingApplicationAction.vue
index 542295e47af..d5c449c0905 100644
--- a/ui/src/views/application/application-card/action-dropdown/SettingApplicationAction.vue
+++ b/ui/src/views/application/application-card/action-dropdown/SettingApplicationAction.vue
@@ -12,7 +12,18 @@ const route = useRoute()
 
 function handleSettingApplication(event: MouseEvent) {
   event.stopPropagation()
-  if (!isWorkFlow(props.application.type)) {
+  if (isWorkFlow(props.application.type)) {
+    const workflowRoute = {
+      name: 'workflow-application',
+      params: { workspaceId: route.params.workspaceId, applicationId: props.application.id },
+    } as const
+
+    if (event.ctrlKey || event.metaKey) {
+      window.open(router.resolve(workflowRoute).href)
+      return
+    }
+    router.push(workflowRoute)
+  } else {
     void router.push({
       name: 'workspace-application-simple-setting',
       params: {
@@ -21,19 +32,7 @@ function handleSettingApplication(event: MouseEvent) {
         workspaceId: route.params.workspaceId,
       },
     })
-    return
-  }
-
-  const workflowRoute = {
-    name: 'workflow-application',
-    params: { workspaceId: route.params.workspaceId, applicationId: props.application.id },
-  } as const
-
-  if (event.ctrlKey || event.metaKey) {
-    window.open(router.resolve(workflowRoute).href)
-    return
   }
-  router.push(workflowRoute)
 }
 </script>
 
diff --git a/ui/src/views/workflow/ApplicationWorkflowView.vue b/ui/src/views/workflow/ApplicationWorkflowView.vue
index b3d9656f063..c2c9c26d1ad 100644
--- a/ui/src/views/workflow/ApplicationWorkflowView.vue
+++ b/ui/src/views/workflow/ApplicationWorkflowView.vue
@@ -268,7 +268,7 @@ onMounted(() => {
 
       <div class="flex shrink-0 items-center gap-3">
         <WorkflowComponentMenu @select="handleAddNode" />
-        <el-button :loading="saving && !publishing" :disabled="loading || saving || publishing" @click="handleSave"> 保存 </el-button>
+        <el-button plain :loading="saving && !publishing" :disabled="loading || saving || publishing" @click="handleSave"> 保存 </el-button>
         <el-button type="primary" plain :disabled="loading || saving" @click="handleDebug"> 调试 </el-button>
         <!-- <el-button
           v-if="canPublish"
diff --git a/ui/src/workflow-canvas/WORKFLOW_README.md b/ui/src/workflow-canvas/WORKFLOW_README.md
index 3113cd013e6..7c05f07803b 100644
--- a/ui/src/workflow-canvas/WORKFLOW_README.md
+++ b/ui/src/workflow-canvas/WORKFLOW_README.md
@@ -27,6 +27,7 @@ src/workflow-canvas/
 ├── nodes/              # 已迁入节点的注册文件和 Vue 实现
 ├── plugins/            # 仅供画布使用的 LogicFlow 插件
 ├── index.vue           # 画布入口组件 WorkflowCanvas
+├── style.scss          # 画布内 LogicFlow 全局样式覆盖
 ├── types.ts            # 画布协议类型和枚举
 └── README.md           # 本文档
 ```
@@ -38,6 +39,11 @@ src/workflow-canvas/
 这里。只有某项行为是全部或大多数节点都必须遵守的画布规则时，才修改 `core`。新增普通节点
 不应要求调整核心层。
 
+节点内需要跟随画布缩放的浮层应保留 `teleported="false"`。如果浮层可能与后绘制的 SVG 锚点
+重叠，使用 `core/utils.ts` 的 `createAnchorGuard()`，通过唯一 key 同步各浮层的
+`visible-change` 状态，并在节点组件卸载时调用 `reset()`；不要通过 Teleport 到 `body` 或增加
+`z-index` 绕过画布的缩放和 SVG 绘制顺序。
+
 ### `config/`
 
 `config` 是随业务持续维护的配置层，增加、删除或调整节点时通常会更新：
diff --git a/ui/src/workflow-canvas/component/NodeConditionDropdown.vue b/ui/src/workflow-canvas/component/NodeConditionDropdown.vue
new file mode 100644
index 00000000000..73f965cbf8c
--- /dev/null
+++ b/ui/src/workflow-canvas/component/NodeConditionDropdown.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { BaseNodeModel } from '@logicflow/core'
+import { computed } from 'vue'
+import { set } from 'lodash'
+
+import { WorkflowKind, WorkflowNodeType } from '@/workflow-canvas/types'
+
+defineOptions({ name: 'NodeConditionDropdown' })
+
+const props = defineProps<{ model: BaseNodeModel }>()
+const emit = defineEmits<{
+  'visible-change': [visible: boolean]
+}>()
+
+type NodeConditionProperties = {
+  condition?: boolean | 'AND' | 'OR'
+  kind?: WorkflowKind
+}
+
+const nodeProperties = computed(() => props.model.properties as unknown as NodeConditionProperties)
+const visible = computed(() => {
+  return (
+    ![
+      WorkflowNodeType.Start,
+      WorkflowNodeType.Base,
+      WorkflowNodeType.ToolBaseNode,
+      WorkflowNodeType.ToolStartNode,
+      WorkflowNodeType.KnowledgeBase,
+      WorkflowNodeType.LoopStartNode.toString(),
+      WorkflowNodeType.DataSourceLocalNode,
+      WorkflowNodeType.DataSourceWebNode,
+    ].includes(String(props.model.type)) && nodeProperties.value.kind !== WorkflowKind.DataSource
+  )
+})
+const condition = computed({
+  get: () => {
+    if (nodeProperties.value.condition) return nodeProperties.value.condition
+
+    set(props.model.properties, 'condition', 'AND')
+    return true
+  },
+  set: (value: boolean | 'AND' | 'OR') => {
+    set(props.model.properties, 'condition', value)
+  },
+})
+</script>
+
+<template>
+  <MkDropdown v-if="visible" :teleported="false" trigger="click" placement="bottom-start" @visible-change="emit('visible-change', $event)">
+    <el-button text>条件</el-button>
+    <template #dropdown>
+      <div class="w-[280px] px-4 py-3">
+        <h5>执行条件</h5>
+        <p class="mt-2 text-N600">
+          <span>前置</span>
+          <el-select v-model="condition" class="mx-2 w-[60px]" size="small">
+            <el-option label="所有" value="AND" />
+            <el-option label="任一" value="OR" />
+          </el-select>
+          <span>连线节点执行完，执行当前节点</span>
+        </p>
+      </div>
+    </template>
+  </MkDropdown>
+</template>
diff --git a/ui/src/workflow-canvas/component/NodeOperateDropdown.vue b/ui/src/workflow-canvas/component/NodeOperateDropdown.vue
new file mode 100644
index 00000000000..ff12f3681dd
--- /dev/null
+++ b/ui/src/workflow-canvas/component/NodeOperateDropdown.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { BaseNodeModel } from '@logicflow/core'
+import { CircleCheck } from '@element-plus/icons-vue'
+import type { FormInstance } from 'element-plus'
+import { computed, ref, useTemplateRef } from 'vue'
+import { set } from 'lodash'
+
+import { WorkflowKind, WorkflowNodeType } from '@/workflow-canvas/types'
+import { MsgConfirm, MsgError } from '@/utils/message'
+
+defineOptions({ name: 'NodeOperateDropdown' })
+
+const props = defineProps<{ model: BaseNodeModel }>()
+const emit = defineEmits<{
+  'visible-change': [visible: boolean]
+}>()
+
+interface NodeNameForm {
+  title: string
+}
+
+type NodeOperateProperties = {
+  disabled?: boolean
+  kind?: WorkflowKind
+  node_data?: { name?: string }
+  stepName?: string
+}
+
+const nodeProperties = computed(() => props.model.properties as unknown as NodeOperateProperties)
+const visible = computed(() => {
+  return ![
+    WorkflowNodeType.Start,
+    WorkflowNodeType.Base,
+    WorkflowNodeType.KnowledgeBase,
+    WorkflowNodeType.LoopStartNode.toString(),
+    WorkflowNodeType.ToolBaseNode,
+    WorkflowNodeType.ToolStartNode,
+  ].includes(String(props.model.type))
+})
+const canChangeEnabled = computed(() => {
+  return !(
+    (String(props.model.type) === WorkflowNodeType.ToolLib && nodeProperties.value.kind === WorkflowKind.DataSource) ||
+    String(props.model.type) === WorkflowNodeType.DataSourceLocalNode ||
+    String(props.model.type) === WorkflowNodeType.DataSourceWebNode
+  )
+})
+const nodeEnabled = computed({
+  get: () => !nodeProperties.value.disabled,
+  set: (value: boolean) => {
+    set(props.model.properties, 'disabled', !value)
+  },
+})
+const sourceName = computed(() => {
+  if ([WorkflowNodeType.Application, WorkflowNodeType.ToolLib].includes(String(props.model.type) as WorkflowNodeType)) {
+    return nodeProperties.value.node_data?.name ?? ''
+  }
+  return ''
+})
+
+const titleFormRef = useTemplateRef<FormInstance>('titleFormRef')
+const nodeNameDialogVisible = ref(false)
+const nodeNameForm = ref<NodeNameForm>({ title: '' })
+
+function renameNode() {
+  nodeNameForm.value.title = String(nodeProperties.value.stepName ?? '')
+  nodeNameDialogVisible.value = true
+}
+
+async function saveNodeName(formInstance: FormInstance | null | undefined) {
+  if (!formInstance) return
+
+  await formInstance.validate((valid) => {
+    if (!valid) return
+
+    const nameExists = props.model.graphModel.nodes
+      .filter((node) => node.id !== props.model.id)
+      .some((node) => node.properties.stepName === nodeNameForm.value.title)
+    if (nameExists) {
+      MsgError('节点名称已存在！')
+      return
+    }
+
+    set(props.model.properties, 'stepName', nodeNameForm.value.title)
+    props.model.clearNextNodeField(true)
+    nodeNameDialogVisible.value = false
+    formInstance.resetFields()
+  })
+}
+
+function copyNode() {
+  props.model.graphModel.clearSelectElements()
+  const cloneNode = props.model.graphModel.cloneNode(props.model.id)
+  if (!cloneNode) return
+
+  set(cloneNode, 'isSelected', true)
+  set(cloneNode, 'isHovered', true)
+  props.model.graphModel.toFront(cloneNode.id)
+}
+
+function deleteNode() {
+  MsgConfirm('提示', '确定删除当前节点吗？', {
+    confirmButtonText: '确定',
+    confirmButtonClass: 'danger',
+  }).then(() => {
+    if (String(props.model.type) === WorkflowNodeType.LoopNode) {
+      const outgoingNodes = props.model.graphModel.getNodeOutgoingNode(props.model.id)
+      outgoingNodes.forEach((outgoingNode) => {
+        if (String(outgoingNode.type) === WorkflowNodeType.LoopBodyNode) {
+          props.model.graphModel.deleteNode(outgoingNode.id)
+        }
+      })
+    }
+    props.model.graphModel.deleteNode(props.model.id)
+  })
+  props.model.graphModel.eventCenter.emit('delete_node', undefined)
+}
+</script>
+
+<template>
+  <MkDropdown v-if="visible" :teleported="false" trigger="click" @visible-change="emit('visible-change', $event)">
+    <el-button text>
+      <MkIcon name="icon_more_outlined" class="text-N600" />
+    </el-button>
+    <template #dropdown>
+      <MkDropdownMenu class="min-w-36">
+        <MkDropdownItem class="p-2" @click="renameNode">
+          <template #icon><MkIcon name="icon_edit_outlined" /></template>
+          重命名
+        </MkDropdownItem>
+        <MkDropdownItem class="p-2" @click="copyNode">
+          <template #icon><MkIcon name="icon_copy_outlined" /></template>
+          复制
+        </MkDropdownItem>
+        <div v-if="canChangeEnabled" class="flex-between p-2" @click.stop>
+          <MkIcon :icon="CircleCheck" class="text-N600" />
+          <span class="mr-4">启用状态</span>
+          <el-switch v-model="nodeEnabled" size="small" />
+        </div>
+        <MkDropdownItem class="border-t border-N300 p-2" @click="deleteNode">
+          <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>
+          删除
+        </MkDropdownItem>
+        <div v-if="sourceName" class="border-t border-N300 p-2" @click.stop>
+          <div class="text-sm text-N600">来源</div>
+          <div class="mt-1 break-all text-N600">{{ sourceName }}</div>
+        </div>
+      </MkDropdownMenu>
+    </template>
+  </MkDropdown>
+
+  <MkDialog v-model="nodeNameDialogVisible" title="节点名称" append-to-body @submit.prevent>
+    <el-form ref="titleFormRef" :model="nodeNameForm" label-position="top">
+      <el-form-item prop="title" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
+        <el-input v-model="nodeNameForm.title" @blur="nodeNameForm.title = nodeNameForm.title.trim()" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click.prevent="nodeNameDialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="saveNodeName(titleFormRef)">保存</el-button>
+    </template>
+  </MkDialog>
+</template>
diff --git a/ui/src/workflow-canvas/config/node-data.ts b/ui/src/workflow-canvas/config/node-data.ts
index e828656c358..033dd0f11af 100644
--- a/ui/src/workflow-canvas/config/node-data.ts
+++ b/ui/src/workflow-canvas/config/node-data.ts
@@ -3,10 +3,9 @@ import { WorkflowKind, WorkflowNodeType } from '@/workflow-canvas/types'
 export const startNode = {
   id: WorkflowNodeType.Start,
   type: WorkflowNodeType.Start,
-  x: 480,
-  y: 3340,
+  x: 846,
+  y: 2600,
   properties: {
-    height: 364,
     stepName: '开始',
     config: {
       fields: [{ label: '用户问题', value: 'question' }],
@@ -26,10 +25,9 @@ export const baseNode = {
   id: WorkflowNodeType.Base,
   type: WorkflowNodeType.Base,
   x: 360,
-  y: 2761.3875,
+  y: 2600,
   text: '',
   properties: {
-    height: 728.375,
     stepName: '基本信息',
     input_field_list: [],
     node_data: {
@@ -49,10 +47,9 @@ export const knowledgeBaseNode = {
   id: WorkflowNodeType.KnowledgeBase,
   type: WorkflowNodeType.KnowledgeBase,
   x: 360,
-  y: 2761.3875,
+  y: 2600,
   text: '',
   properties: {
-    height: 728.375,
     stepName: '基本信息',
     input_field_list: [],
     node_data: {
@@ -72,11 +69,9 @@ export const toolBaseNode = {
   id: WorkflowNodeType.ToolBaseNode,
   type: WorkflowNodeType.ToolBaseNode,
   x: 360,
-  y: 2761.3875,
+  y: 2600,
   text: '',
   properties: {
-    width: 500,
-    height: 728.375,
     stepName: '基本信息',
     input_field_list: [],
     node_data: {},
@@ -90,11 +85,10 @@ export const toolBaseNode = {
 export const toolStartNode = {
   id: WorkflowNodeType.ToolStartNode,
   type: WorkflowNodeType.ToolStartNode,
-  x: 280,
-  y: 3301,
+  x: 946,
+  y: 2600,
   text: '',
   properties: {
-    height: 728.375,
     stepName: '开始',
     input_field_list: [],
     node_data: {},
@@ -105,6 +99,28 @@ export const toolStartNode = {
   },
 }
 
+// 以上是默认基础节点
+
+/**
+ * ai对话节点配置数据
+ */
+export const aiChatNode = {
+  type: WorkflowNodeType.AiChat,
+  text: '与 AI 大模型进行对话',
+  label: 'AI 对话',
+  height: 340,
+  properties: {
+    stepName: 'AI 对话',
+    config: {
+      fields: [
+        { label: 'AI 回答内容', value: 'answer' },
+        { label: '思考过程', value: 'reasoning_content' },
+        { label: '历史聊天记录', value: 'history_message' },
+      ],
+    },
+  },
+}
+
 export const dataSourceLocalNode = {
   type: WorkflowNodeType.DataSourceLocalNode,
   x: 360,
@@ -130,7 +146,12 @@ export const dataSourceWebNode = {
   y: 2761.3875,
   text: '输入根地址自动抓取 Web 数据（单链接对应单文档），输出含内容的文档列表',
   label: 'Web 站点',
-  properties: { kind: WorkflowKind.DataSource, height: 180, stepName: 'Web 站点', config: { fields: [{ label: '文档列表', value: 'document_list' }] } },
+  properties: {
+    kind: WorkflowKind.DataSource,
+    height: 180,
+    stepName: 'Web 站点',
+    config: { fields: [{ label: '文档列表', value: 'document_list' }] },
+  },
 }
 
 export const knowledgeWriteNode = {
@@ -141,26 +162,6 @@ export const knowledgeWriteNode = {
   properties: { stepName: '知识库写入', config: { fields: [] } },
 }
 
-/**
- * ai对话节点配置数据
- */
-export const aiChatNode = {
-  type: WorkflowNodeType.AiChat,
-  text: '与 AI 大模型进行对话',
-  label: 'AI 对话',
-  height: 340,
-  properties: {
-    stepName: 'AI 对话',
-    config: {
-      fields: [
-        { label: 'AI 回答内容', value: 'answer' },
-        { label: '思考过程', value: 'reasoning_content' },
-        { label: '历史聊天记录', value: 'history_message' },
-      ],
-    },
-  },
-}
-
 /**
  * 知识库检索配置数据
  */
diff --git a/ui/src/workflow-canvas/core/NodeContainer.vue b/ui/src/workflow-canvas/core/NodeContainer.vue
index 5fec99a053d..11deebd4875 100644
--- a/ui/src/workflow-canvas/core/NodeContainer.vue
+++ b/ui/src/workflow-canvas/core/NodeContainer.vue
@@ -1,39 +1,35 @@
 <script setup lang="ts">
 import type { BaseNodeModel, Model } from '@logicflow/core'
-import { ArrowDownBold, CircleCheck } from '@element-plus/icons-vue'
-import type { FormInstance } from 'element-plus'
-import { computed, inject, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { set } from 'lodash'
 import { iconComponent } from '../icons/utils'
 import { copyText } from '@/utils/clipboard'
-import { WorkflowNodeType, WorkflowKind, type WorkflowNodeField } from '@/workflow-canvas/types'
-import { MsgError, MsgConfirm } from '@/utils/message'
+import { WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types'
 import { BasicComponentsNode } from '@/workflow-canvas/config/node-mapping'
 import NodeMenu from '@/workflow-canvas/component/NodeMenu.vue'
-import { handleNodeWheel } from '@/workflow-canvas/core/utils'
-
-interface NodeNameForm {
-  title: string
-}
+import NodeConditionDropdown from '@/workflow-canvas/component/NodeConditionDropdown.vue'
+import NodeOperateDropdown from '@/workflow-canvas/component/NodeOperateDropdown.vue'
+import { createAnchorGuard, handleNodeWheel } from '@/workflow-canvas/core/utils'
 
 interface ResizeSize {
   height: number
 }
 
 type NodeContainerProperties = {
-  condition?: boolean | 'AND' | 'OR'
   config?: { fields?: WorkflowNodeField[]; output_title?: string }
   disabled?: boolean
   enableException?: boolean
-  kind?: WorkflowKind
-  node_data?: { name?: string }
   showNode?: boolean
   status?: number
-  stepName?: string
 }
 
-const props = withDefaults(defineProps<{ exceptionNodeList?: string[] }>(), {
-  exceptionNodeList: () => [WorkflowNodeType.AiChat, WorkflowNodeType.VideoUnderstandNode, WorkflowNodeType.ImageGenerateNode, WorkflowNodeType.ImageUnderstandNode],
+withDefaults(defineProps<{ exceptionNodeList?: string[] }>(), {
+  exceptionNodeList: () => [
+    WorkflowNodeType.AiChat,
+    WorkflowNodeType.VideoUnderstandNode,
+    WorkflowNodeType.ImageGenerateNode,
+    WorkflowNodeType.ImageUnderstandNode,
+  ],
 })
 const getModel = inject('getModel') as () => BaseNodeModel
 const model = getModel()
@@ -57,28 +53,8 @@ const nodeDisabled = computed({
     set(model.properties, 'disabled', v)
   },
 })
-const nodeEnabled = computed({
-  get: () => !nodeDisabled.value,
-  set: (v: boolean) => {
-    nodeDisabled.value = !v
-  },
-})
-const titleFormRef = useTemplateRef<FormInstance>('titleFormRef')
-const nodeNameDialogVisible = ref(false)
-const form = ref<NodeNameForm>({ title: '' })
+const anchorGuard = createAnchorGuard(model)
 
-const condition = computed({
-  set: (v) => {
-    set(model.properties, 'condition', v)
-  },
-  get: () => {
-    if (model.properties.condition) {
-      return model.properties.condition
-    }
-    set(model.properties, 'condition', 'AND')
-    return true
-  },
-})
 const showNode = computed({
   set: (v) => {
     set(model.properties, 'showNode', v)
@@ -99,34 +75,7 @@ const node_status = computed(() => {
   return 200
 })
 
-const sourceName = computed(() => {
-  if ([WorkflowNodeType.Application, WorkflowNodeType.ToolLib].includes(String(model.type) as WorkflowNodeType)) {
-    return nodeProperties.value.node_data?.name || ''
-  }
-  return ''
-})
-
-function renameNode() {
-  form.value.title = String(model.properties.stepName ?? '')
-  nodeNameDialogVisible.value = true
-}
-const editName = async (formEl: FormInstance | null | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid) => {
-    if (valid) {
-      if (!model.graphModel.nodes.filter((node) => node.id !== model.id).some((node) => node.properties.stepName === form.value.title)) {
-        set(model.properties, 'stepName', form.value.title)
-        model.clearNextNodeField(true)
-        nodeNameDialogVisible.value = false
-        formEl.resetFields()
-      } else {
-        MsgError('节点名称已存在！')
-      }
-    }
-  })
-}
-
-const mousedown = (event?: MouseEvent) => {
+const handleNodeMousedown = (event?: MouseEvent) => {
   if (!event?.shiftKey) {
     model.graphModel.clearSelectElements()
   }
@@ -135,28 +84,6 @@ const mousedown = (event?: MouseEvent) => {
   model.graphModel.toFront(model.id)
 }
 const showicon = ref<number | string | null>(null)
-const copyNode = () => {
-  model.graphModel.clearSelectElements()
-  const cloneNode = model.graphModel.cloneNode(model.id)
-  if (!cloneNode) return
-  set(cloneNode, 'isSelected', true)
-  set(cloneNode, 'isHovered', true)
-  model.graphModel.toFront(cloneNode.id)
-}
-const deleteNode = () => {
-  MsgConfirm('提示', '确定删除当前节点吗？', { confirmButtonText: '确定', confirmButtonClass: 'danger' }).then(() => {
-    if (String(model.type) === WorkflowNodeType.LoopNode) {
-      const next = model.graphModel.getNodeOutgoingNode(model.id)
-      next.forEach((nextNode) => {
-        if (String(nextNode.type) === WorkflowNodeType.LoopBodyNode) {
-          model.graphModel.deleteNode(nextNode.id)
-        }
-      })
-    }
-    model.graphModel.deleteNode(model.id)
-  })
-  model.graphModel.eventCenter.emit('delete_node', undefined)
-}
 const resizeStepContainer = (wh: ResizeSize) => {
   if (wh.height) {
     if (!model.virtual) {
@@ -172,8 +99,19 @@ function clickNodes(nodeType: WorkflowNodeType) {
   if (!item || !anchor) return
 
   const width = Number((item.properties as { width?: number }).width ?? 214)
-  const newModel = model.graphModel.addNode({ type: item.type, properties: item.properties, x: anchor.x + width / 2 + 200, y: anchor.y - item.height })
-  newModel.graphModel.addEdge({ type: 'app-edge', sourceNodeId: model.id, sourceAnchorId: anchor.id, targetNodeId: model.id, targetAnchorId: model.id + '_left' })
+  const newModel = model.graphModel.addNode({
+    type: item.type,
+    properties: item.properties,
+    x: anchor.x + width / 2 + 200,
+    y: anchor.y - item.height,
+  })
+  newModel.graphModel.addEdge({
+    type: 'app-edge',
+    sourceNodeId: model.id,
+    sourceAnchorId: anchor.id,
+    targetNodeId: model.id,
+    targetAnchorId: model.id + '_left',
+  })
 
   closeNodeMenu()
 }
@@ -192,7 +130,12 @@ const enable_exception = computed({
 const nodeFields = computed(() => {
   if (nodeProperties.value.config?.fields) {
     const fields = nodeProperties.value.config.fields.map((field) => {
-      return { label: field.label, value: field.value, globeLabel: `{{${model.properties.stepName}.${field.value}}}`, globeValue: `{{context['${model.id}'].${field.value}}}` }
+      return {
+        label: field.label,
+        value: field.value,
+        globeLabel: `{{${model.properties.stepName}.${field.value}}}`,
+        globeValue: `{{context['${model.id}'].${field.value}}}`,
+      }
     })
     return fields
   }
@@ -205,7 +148,12 @@ const output_title = computed(() => {
 
 const abnormalNodeFields = computed(() => {
   return [
-    { label: '异常信息', value: 'exception_message', globeLabel: `{{${model.properties.stepName}.exception_message}}`, globeValue: `{{context['${model.id}'].exception_message}}` },
+    {
+      label: '异常信息',
+      value: 'exception_message',
+      globeLabel: `{{${model.properties.stepName}.exception_message}}`,
+      globeValue: `{{context['${model.id}'].exception_message}}`,
+    },
   ]
 })
 watch(enable_exception, () => {
@@ -215,31 +163,6 @@ watch(enable_exception, () => {
   )
 })
 
-function showOperate(type: string) {
-  return ![
-    WorkflowNodeType.Start,
-    WorkflowNodeType.Base,
-    WorkflowNodeType.KnowledgeBase,
-    WorkflowNodeType.LoopStartNode.toString(),
-    WorkflowNodeType.ToolBaseNode,
-    WorkflowNodeType.ToolStartNode,
-  ].includes(type)
-}
-
-function showConditionOperate(type: string) {
-  return (
-    ![
-      WorkflowNodeType.Start,
-      WorkflowNodeType.Base,
-      WorkflowNodeType.ToolBaseNode,
-      WorkflowNodeType.ToolStartNode,
-      WorkflowNodeType.KnowledgeBase,
-      WorkflowNodeType.LoopStartNode.toString(),
-      WorkflowNodeType.DataSourceLocalNode,
-      WorkflowNodeType.DataSourceWebNode,
-    ].includes(type) && nodeProperties.value.kind != WorkflowKind.DataSource
-  )
-}
 const openNodeMenu = (anchorValue: Model.AnchorConfig) => {
   showAnchor.value = true
   anchorData.value = anchorValue
@@ -287,7 +210,9 @@ const highlightedStepName = (contentText: string) => {
     for (let i = 0; i < wordsArray.length; i++) {
       const word = wordsArray[i]
       if (word && keyWord.value.includes(word)) {
-        wordsArray[i] = currentKeyWord.value ? `<span style='background: #FF8800;'>${word}</span>` : `<span style='background: #FFC60A;'>${word}</span>`
+        wordsArray[i] = currentKeyWord.value
+          ? `<span style='background: #FF8800;'>${word}</span>`
+          : `<span style='background: #FFC60A;'>${word}</span>`
       }
     }
     res = wordsArray.join('')
@@ -321,94 +246,47 @@ const containerRef = ref<HTMLElement>()
 onBeforeUnmount(() => {
   resizeObserver?.disconnect()
   resizeObserver = null
+  anchorGuard.reset()
 })
 </script>
 <template>
-  <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: model.isSelected, error: node_status !== 200 }">
+  <div class="workflow-node-container relative overflow-visible" @mousedown="handleNodeMousedown">
+    <div
+      class="step-container shadow-sm overflow-visible rounded-xl border-2 border-white bg-white p-4"
+      :class="{ isSelected: model.isSelected, error: node_status !== 200 }"
+    >
       <div ref="containerRef">
         <div class="flex-between">
-          <div class="flex w-[69%] items-center" @dragstart.prevent @drag.prevent @dragover.prevent @dragend.prevent>
-            <component :is="iconComponent(`${model.type}-icon`)" class="mr-2" :size="24" :item="model?.properties.node_data" style="--el-avatar-border-radius: 6px" />
-            <h4 class="truncate break-all" :title="String(model.properties.stepName ?? '')" v-html="highlightedStepName(String(model.properties.stepName ?? ''))"></h4>
+          <div class="flex items-center" @dragstart.prevent @drag.prevent @dragover.prevent @dragend.prevent>
+            <component :is="iconComponent(`${model.type}-icon`)" class="mr-2" :size="24" :item="model?.properties.node_data" />
+            <h4
+              class="truncate break-all"
+              :title="String(model.properties.stepName ?? '')"
+              v-html="highlightedStepName(String(model.properties.stepName ?? ''))"
+            ></h4>
           </div>
 
           <div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
             <el-button text @click="showNode = !showNode">
-              <MkIcon :icon="ArrowDownBold" class="text-N600 transition-transform" :class="showNode ? 'rotate-180' : ''" />
+              <MkIcon name="icon_down_outlined" />
             </el-button>
-            <MkDropdown v-if="showConditionOperate(String(model.type))" :teleported="false" trigger="click" placement="bottom-start">
-              <el-button text>
-                <span>条件</span>
-              </el-button>
-              <template #dropdown>
-                <div class="w-[280px] px-4 py-3">
-                  <h5>执行条件</h5>
-                  <p class="mt-2 text-N600">
-                    <span>前置</span>
-                    <el-select v-model="condition" class="mx-2 w-[60px]" size="small">
-                      <el-option label="所有" value="AND" />
-                      <el-option label="任一" value="OR" />
-                    </el-select>
-                    <span>连线节点执行完，执行当前节点</span>
-                  </p>
-                </div>
-              </template>
-            </MkDropdown>
-            <MkDropdown v-if="showOperate(String(model.type))" :teleported="false" trigger="click">
-              <el-button text>
-                <MkIcon name="icon_more_outlined" class="text-N600" />
-              </el-button>
-              <template #dropdown>
-                <MkDropdownMenu class="min-w-36">
-                  <MkDropdownItem class="p-2" @click="renameNode">
-                    <template #icon><MkIcon name="icon_edit_outlined" /></template>
-                    重命名
-                  </MkDropdownItem>
-                  <MkDropdownItem class="p-2" @click="copyNode">
-                    <template #icon><MkIcon name="icon_copy_outlined" /></template>
-                    复制
-                  </MkDropdownItem>
-                  <template
-                    v-if="
-                      !(
-                        (String(model.type) == WorkflowNodeType.ToolLib && nodeProperties.kind == WorkflowKind.DataSource) ||
-                        String(model.type) == WorkflowNodeType.DataSourceLocalNode ||
-                        String(model.type) == WorkflowNodeType.DataSourceWebNode
-                      )
-                    "
-                  >
-                    <div class="flex-between p-2" @click.stop>
-                      <MkIcon :icon="CircleCheck" class="text-N600" />
-                      <span class="mr-4">启用状态</span>
-                      <el-switch v-model="nodeEnabled" size="small" />
-                    </div>
-                  </template>
-
-                  <MkDropdownItem class="border-t border-N300 p-2" @click="deleteNode">
-                    <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>
-                    删除
-                  </MkDropdownItem>
-                  <div v-if="sourceName" class="border-t border-N300 p-2" @click.stop>
-                    <div class="text-sm text-N600">来源</div>
-                    <div class="mt-1 break-all text-N600">{{ sourceName }}</div>
-                  </div>
-                </MkDropdownMenu>
-              </template>
-            </MkDropdown>
+            <NodeConditionDropdown :model="model" @visible-change="anchorGuard.setOverlayVisible('condition', $event)" />
+            <NodeOperateDropdown :model="model" @visible-change="anchorGuard.setOverlayVisible('operate', $event)" />
           </div>
         </div>
+
+        <el-alert v-if="nodeDisabled" class="mt-4!" title="该节点已禁用" type="error" show-icon :closable="false" />
+        <el-alert
+          v-if="node_status != 200"
+          class="mt-4!"
+          :title="String(model.type) === WorkflowNodeType.Application ? '该智能体不可用' : '该工具不可用'"
+          type="error"
+          show-icon
+          :closable="false"
+        />
+
         <el-collapse-transition>
           <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" title="该节点已被禁用" type="error" show-icon :closable="false" />
-            <el-alert
-              v-if="node_status != 200"
-              class="mb-4"
-              :title="String(model.type) === WorkflowNodeType.Application ? '该智能体不可用' : '该工具不可用'"
-              type="error"
-              show-icon
-              :closable="false"
-            />
             <slot />
             <template v-if="nodeFields.length > 0">
               <div class="flex-between">
@@ -459,33 +337,19 @@ onBeforeUnmount(() => {
         @mousedown.stop
         @click.stop
         @wheel="handleNodeWheel"
-        style="left: 100%; transform: translate(0, -50%)"
+        style="left: 105%; transform: translate(0, -50%)"
         :style="dropdownMenuStyle"
         @select="clickNodes"
       />
     </el-collapse-transition>
-
-    <MkDialog v-model="nodeNameDialogVisible" title="节点名称" append-to-body @submit.prevent>
-      <el-form ref="titleFormRef" :model="form" label-position="top">
-        <el-form-item prop="title" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
-          <el-input v-model="form.title" @blur="form.title = form.title.trim()" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click.prevent="nodeNameDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="editName(titleFormRef)">保存</el-button>
-      </template>
-    </MkDialog>
   </div>
 </template>
 <style lang="scss" scoped>
 .workflow-node-container {
   .step-container {
     box-sizing: border-box;
-    box-shadow: 0 2px 4px 0 rgb(var(--mk-N900-rgb) / 12%);
-
     &:hover {
-      box-shadow: 0 6px 24px 0 rgb(var(--mk-N900-rgb) / 8%);
+      box-shadow: 0px 6px 24px 0px rgb(var(--mk-N900-rgb) / 8%);
     }
 
     &.isSelected {
diff --git a/ui/src/workflow-canvas/core/loop-edge.ts b/ui/src/workflow-canvas/core/loop-edge.ts
index 1a962d33392..e22c9e87439 100644
--- a/ui/src/workflow-canvas/core/loop-edge.ts
+++ b/ui/src/workflow-canvas/core/loop-edge.ts
@@ -31,7 +31,6 @@ class CustomEdgeModel2 extends BezierEdgeModel {
    * 给边自定义方案，使其支持基于锚点的位置更新边的路径
    */
   updatePathByAnchor() {
-    // TODO
     const sourceNodeModel = this.graphModel.getNodeModelById(this.sourceNodeId)
     const sourceAnchor = sourceNodeModel?.getDefaultAnchor().find((anchor) => anchor.id === this.sourceAnchorId)
 
diff --git a/ui/src/workflow-canvas/core/utils.ts b/ui/src/workflow-canvas/core/utils.ts
index 3585e3191d2..b1c174880ee 100644
--- a/ui/src/workflow-canvas/core/utils.ts
+++ b/ui/src/workflow-canvas/core/utils.ts
@@ -1,3 +1,5 @@
+import type { BaseNodeModel } from '@logicflow/core'
+
 export function handleNodeWheel(event: WheelEvent) {
   if (event.ctrlKey) {
     event.preventDefault()
@@ -17,4 +19,33 @@ export function isLastNode(nodeModel: BaseNodeModel) {
     return false
   }
 }
-import type { BaseNodeModel } from '@logicflow/core'
+
+/**
+ * 协调节点内多个非 Teleport 浮层与 SVG 锚点的显隐，避免后绘制的锚点覆盖浮层。
+ * 浮层关闭或组件卸载时会恢复节点原本的 hittable 状态。
+ */
+export function createAnchorGuard(nodeModel: BaseNodeModel) {
+  const visibleOverlays = new Set<string>()
+  let nodeHittableBeforeOverlay = nodeModel.isHittable
+
+  function setOverlayVisible(overlayKey: string, visible: boolean) {
+    if (visible) {
+      if (visibleOverlays.has(overlayKey)) return
+      if (visibleOverlays.size === 0) nodeHittableBeforeOverlay = nodeModel.isHittable
+      visibleOverlays.add(overlayKey)
+      nodeModel.setHittable(false)
+      return
+    }
+
+    if (!visibleOverlays.delete(overlayKey)) return
+    if (visibleOverlays.size === 0) nodeModel.setHittable(nodeHittableBeforeOverlay)
+  }
+
+  function reset() {
+    if (visibleOverlays.size === 0) return
+    visibleOverlays.clear()
+    nodeModel.setHittable(nodeHittableBeforeOverlay)
+  }
+
+  return { reset, setOverlayVisible }
+}
diff --git a/ui/src/workflow-canvas/core/workflow-node.ts b/ui/src/workflow-canvas/core/workflow-node.ts
index f327e46ab30..8dcd320dcee 100644
--- a/ui/src/workflow-canvas/core/workflow-node.ts
+++ b/ui/src/workflow-canvas/core/workflow-node.ts
@@ -34,7 +34,11 @@ export class WorkflowNodeView extends HtmlNode {
     if (definition && !nodeModel.properties.config) {
       nodeModel.properties.config = cloneDeep(definition.properties.config ?? {})
     }
-    nodeModel.properties.stepName = this.getUniqueNodeName(props.graphModel, String(nodeModel.properties.stepName ?? definition?.label ?? nodeModel.type), nodeModel.id)
+    nodeModel.properties.stepName = this.getUniqueNodeName(
+      props.graphModel,
+      String(nodeModel.properties.stepName ?? definition?.label ?? nodeModel.type),
+      nodeModel.id,
+    )
   }
 
   private getUniqueNodeName(graphModel: GraphModel, baseName: string, nodeId: string) {
@@ -45,22 +49,39 @@ export class WorkflowNodeView extends HtmlNode {
     return nodeName
   }
 
+  getAnchors() {
+    if (!this.props.model.isHittable) return []
+    return super.getAnchors()
+  }
+
   getAnchorShape(anchorData?: Model.AnchorConfig) {
     if (!anchorData) return null
     const { x, y, type } = anchorData
-    const connected = this.props.graphModel.edges.some((edge) => (type === 'left' ? edge.targetAnchorId === anchorData.id : edge.sourceAnchorId === anchorData.id))
-
-    return createLogicFlowElement('foreignObject', { ...anchorData, x: x - 10, y: y - 10, width: 20, height: 20 }, [
-      createLogicFlowElement('div', {
-        className: 'h-5 w-5 cursor-pointer rounded-full border-2 border-primary bg-white',
-        style: connected ? { background: 'var(--el-color-primary)' } : {},
-        onClick: () => {
-          if (type === 'right') {
-            const nodeModel = this.props.model as unknown as WorkflowNodeModel
-            nodeModel.openNodeMenu?.(anchorData)
-          }
+    const connected = this.props.graphModel.edges.some((edge) =>
+      type === 'left' ? edge.targetAnchorId === anchorData.id : edge.sourceAnchorId === anchorData.id,
+    )
+
+    return createLogicFlowElement('foreignObject', { ...anchorData, x: x - 14, y: y - 14, width: 28, height: 28 }, [
+      createLogicFlowElement(
+        'div',
+        {
+          className: 'flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border-2 border-primary bg-white text-white',
+          style: connected ? {} : { background: 'var(--el-color-primary)' },
+          onClick: () => {
+            if (type === 'right') {
+              const nodeModel = this.props.model as unknown as WorkflowNodeModel
+              nodeModel.openNodeMenu?.(anchorData)
+            }
+          },
         },
-      }),
+        connected
+          ? []
+          : [
+              createLogicFlowElement('svg', { 'aria-hidden': 'true', className: 'h-4 w-4', fill: 'currentColor', focusable: 'false' }, [
+                createLogicFlowElement('use', { href: '#icon_add_outlined' }),
+              ]),
+            ],
+      ),
     ])
   }
 
@@ -74,7 +95,7 @@ export class WorkflowNodeView extends HtmlNode {
       this.renderVueComponent(node)
     }
   }
-  protected renderVueComponent(root: any) {
+  protected renderVueComponent(root: HTMLDivElement) {
     const { model, graphModel } = this.props
     if (root) {
       connect(this.targetId(), this.vueComponent, root, () => this.props.graphModel.get_provide(reactive(model), reactive(graphModel)))
diff --git a/ui/src/workflow-canvas/icons/base-node-icon.vue b/ui/src/workflow-canvas/icons/base-node-icon.vue
index fc526666e04..6433d0e5394 100644
--- a/ui/src/workflow-canvas/icons/base-node-icon.vue
+++ b/ui/src/workflow-canvas/icons/base-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-avatar shape="square" class="avatar-orange">
-    <img src="@/assets/workflow/icon_hi.svg" style="width: 70%" alt="" />
+  <el-avatar shape="square" class="bg-warning!">
+    <img src="@/assets/workflow/icon_hi.svg" style="width: 65%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/index.vue b/ui/src/workflow-canvas/index.vue
index f11d53d3a44..0711bac0801 100644
--- a/ui/src/workflow-canvas/index.vue
+++ b/ui/src/workflow-canvas/index.vue
@@ -92,7 +92,10 @@ function getGraphData(): LogicFlow.GraphData | undefined {
   })
 
   const normalizedGraphData = lf.value.getGraphData() as LogicFlow.GraphData
-  return { nodes: normalizedGraphData.nodes.filter((node) => node.type !== WorkflowNodeType.LoopBodyNode), edges: graphData.edges.filter((edge) => edge.type !== 'loop-edge') }
+  return {
+    nodes: normalizedGraphData.nodes.filter((node) => node.type !== WorkflowNodeType.LoopBodyNode),
+    edges: graphData.edges.filter((edge) => edge.type !== 'loop-edge'),
+  }
 }
 
 function render(data: LogicFlow.GraphConfigData) {
@@ -117,7 +120,10 @@ function addNode(shapeItem: ShapeItem) {
   if (!lf.value) return
   lf.value.clearSelectElements()
   const containerRect = lf.value.container.getBoundingClientRect()
-  const { canvasOverlayPosition } = lf.value.getPointByClient(containerRect.left + containerRect.width / 2, containerRect.top + containerRect.height / 2)
+  const { canvasOverlayPosition } = lf.value.getPointByClient(
+    containerRect.left + containerRect.width / 2,
+    containerRect.top + containerRect.height / 2,
+  )
   const newNode = lf.value.graphModel.addNode({
     type: shapeItem.type as string,
     properties: cloneDeep(shapeItem.properties ?? {}),
@@ -157,3 +163,7 @@ defineExpose({ onmousedown, validate, getGraphData, addNode, clearGraphData, ren
     <!-- <NodeSearch :lf="lf" ref="nodeSearchRef"></NodeSearch> -->
   </div>
 </template>
+
+<style lang="scss">
+@use './style.scss';
+</style>
diff --git a/ui/src/workflow-canvas/nodes/base-node/index.ts b/ui/src/workflow-canvas/nodes/base-node/index.ts
index 7793fe7bcad..aada180d049 100644
--- a/ui/src/workflow-canvas/nodes/base-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/base-node/index.ts
@@ -11,7 +11,7 @@ class BaseNodeView extends WorkflowNodeView {
 class BaseNodeModel extends WorkflowNodeModel {
   setAttributes() {
     super.setAttributes()
-    this.width = 600
+    this.width = 340
   }
 }
 
diff --git a/ui/src/workflow-canvas/style.scss b/ui/src/workflow-canvas/style.scss
new file mode 100644
index 00000000000..29d847741f9
--- /dev/null
+++ b/ui/src/workflow-canvas/style.scss
@@ -0,0 +1,9 @@
+.lf-node {
+  foreignObject {
+    overflow: visible;
+  }
+}
+
+.lf-drag-able {
+  cursor: pointer;
+}