From 3826fddb22d325843884da908d3e5e870dd84047 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 4 Sep 2026 12:13:06 +0800
Subject: [PATCH] feat: markdown editor

---
 ui/src/components/COMPONENT_README.md         |  22 ++-
 ui/src/components/codemirror-editor/Json.vue  |  12 +-
 .../components/codemirror-editor/python.vue   |  12 +-
 .../components/codemirror-editor/style.scss   |  53 ++++++
 .../global/markdown-editor/MdEditor.vue       |   2 +-
 .../markdown-editor/MdEditorMagnify.vue       |  13 +-
 .../global/markdown-editor/MdPreview.vue      |   2 +-
 .../global/markdown-editor/config.ts          |   2 +-
 .../global/markdown-editor/md-editor.scss     | 168 +++++++++++++++++
 .../global/markdown-editor/sup-popover.scss   |  23 ---
 ui/src/styles/app.scss                        | 170 +++++++-----------
 ui/src/styles/element-plus.scss               |   6 +
 ui/src/styles/variables.scss                  |   1 +
 .../tool/tool-store/ToolStoreDetailDrawer.vue |   4 +-
 ui/src/workflow-canvas/WORKFLOW_README.md     |   4 +
 .../node-container/NodeConditionDropdown.vue  |   5 +-
 .../node-container/NodeOperateDropdown.vue    |   9 +-
 .../core/node-container/index.vue             | 108 +++++++----
 ui/src/workflow-canvas/core/shortcut.ts       |   6 +-
 ui/src/workflow-canvas/core/workflow-node.ts  |  43 +++--
 .../nodes/ai-chat-node/index.vue              |  14 +-
 .../workflow-canvas/nodes/base-node/index.vue |  19 +-
 .../nodes/condition-node/index.vue            |  18 +-
 .../workflow-canvas/nodes/form-node/index.vue |  18 +-
 .../nodes/image-generate-node/index.vue       |  22 ++-
 .../nodes/image-understand-node/index.vue     |  28 ++-
 .../nodes/intent-node/index.vue               |  34 ++--
 .../component/ParametersFieldTable.vue        |  12 +-
 .../nodes/parameter-extraction-node/index.vue |  18 +-
 .../nodes/question-node/index.vue             |  26 ++-
 .../nodes/reply-node/index.vue                |   8 +-
 .../nodes/speech-to-text-node/index.vue       |  20 +--
 .../nodes/text-to-speech-node/index.vue       |  14 +-
 .../nodes/text-to-video-node/index.vue        |  22 ++-
 .../nodes/variable-assign-node/index.vue      |  12 +-
 ui/src/workflow-canvas/style.scss             |  15 +-
 36 files changed, 595 insertions(+), 370 deletions(-)
 create mode 100644 ui/src/components/codemirror-editor/style.scss
 create mode 100644 ui/src/components/global/markdown-editor/md-editor.scss
 delete mode 100644 ui/src/components/global/markdown-editor/sup-popover.scss

diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index ba9e2e9ce6b..54190b48b46 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -52,7 +52,7 @@ src/components/
 │   │   ├── MdEditor.vue          # 支持多语言和自定义页脚的 Markdown 编辑器
 │   │   ├── MdEditorMagnify.vue   # 支持弹窗放大编辑的 Markdown 编辑器
 │   │   ├── MdPreview.vue         # 禁用代码折叠的 Markdown 预览器
-│   │   ├── sup-popover.scss      # Markdown 上标说明悬浮层样式
+│   │   ├── md-editor.scss        # Markdown 编辑器、预览区和上标说明浮层的共享样式
 │   │   └── sup-popover.ts        # Markdown 上标说明悬浮层交互
 │   ├── mk-complex-search/
 │   │   └── index.vue             # 字段选择与输入或枚举条件组合搜索框
@@ -115,7 +115,8 @@ src/components/
 │   └── LogoIcon.vue              # 不带产品名称的图形 Logo，手动导入
 ├── codemirror-editor/
 │   ├── python.vue                # 内置 pylint 诊断和全屏编辑的 Python 编辑器
-│   └── Json.vue                  # 支持格式化、语法诊断和全屏编辑的 JSON 输入框
+│   ├── Json.vue                  # 支持格式化、语法诊断和全屏编辑的 JSON 输入框
+│   └── style.scss                # Python 与 JSON 编辑器共享的 scoped 样式
 └── mk-source-card/
 │   ├── index.vue                 # 来源资源的统一卡片结构，手动导入
 │   ├── mk-source-card-action.vue # 卡片悬浮操作容器
@@ -198,6 +199,18 @@ Element Plus 使用 `ElOnlyChild` 处理浮层触发器。`el-tooltip`、`el-pop
 配置为本地实例，避免运行时加载 CDN 资源；`md-editor-v3` v6 的图标已随依赖打包，不再维护或加载
 旧版 `markdown-iconfont.js`。
 
+编辑器、预览区和上标说明浮层的共享样式统一放在组件目录的 `md-editor.scss`，由 `config.ts`
+引入。`MdEditor` 与 `MdPreview` 在底层组件根节点添加 `mk-markdown-editor`，编辑器内部样式
+仅在该范围生效；`MdEditorMagnify` 通过复用 `MdEditor` 继承样式。上标浮层由 `sup-popover.ts`
+挂载到 `body`，使用独立的 `markdown-sup-popover` 类名，不依赖编辑器祖先或 Vue scoped 属性。
+组件专属样式不放入全局 `src/styles`；第三方基础 CSS 仍由全局 Sass 入口加载。
+
+可编辑的 Markdown 输入框悬浮边框使用 `--el-input-hover-border-color`，编辑区获得焦点时
+使用 `--el-input-focus-border-color`，未提供这两个变量时分别回退到 Element Plus 的悬浮边框色
+和主题色。只读、禁用和独立预览不触发编辑边框状态。编辑器自带的滚动条统一使用
+`el-scrollbar` 的颜色变量、6px 宽度和 0.3/0.5 透明度，内容溢出时由编辑器控制显示，悬浮
+滑块时加深颜色；不再额外通过轨道透明度隐藏滚动条，保留原有滚动节点和拖动逻辑。
+
 ```vue
 <MdEditor v-model="markdownContent">
   <template #defFooters>自定义页脚</template>
@@ -700,6 +713,11 @@ import MkDragUpload from '@/components/mk-drag-upload/index.vue'
 
 ### PythonCodeEditor
 
+Python 与 JSON 编辑器通过 `<style lang="scss" scoped src="./style.scss">` 共享组件目录内的
+样式，使用 `mk-codemirror` 容器和 `:deep()` 限定 CodeMirror 内部节点的覆盖范围。普通编辑器
+与全屏弹窗内容分别提供该容器，默认高度为 `210px`，调用方可通过透传的 `style` 覆盖；全屏
+编辑器单独设置高度。不在全局 `app.scss` 中覆盖 `.cm-editor`。
+
 基于 CodeMirror 6 的 Python 代码编辑器，通过 `v-model` 管理代码，并在组件内部调用工具 pylint
 接口生成诊断。组件最多展示 50 条诊断，并在代码停止输入 500ms 后检查。编辑器提供内置全屏
 入口；全屏确认时更新 `v-model` 并触发 `submit-dialog`，`header-extra` 插槽用于添加全屏标题栏操作。
diff --git a/ui/src/components/codemirror-editor/Json.vue b/ui/src/components/codemirror-editor/Json.vue
index 75f97f0c326..ce27c56dc2b 100644
--- a/ui/src/components/codemirror-editor/Json.vue
+++ b/ui/src/components/codemirror-editor/Json.vue
@@ -91,13 +91,13 @@ defineExpose({ format, validateRules })
 </script>
 
 <template>
-  <div class="relative w-full">
+  <div class="mk-codemirror relative w-full">
     <Codemirror
       :model-value="editorContent"
       :extensions="extensions"
       :tab-size="4"
       autofocus
-      style="height: 210px; width: 100%"
+      :style="{ height: '210px' }"
       v-bind="$attrs"
       @update:model-value="handleContentChange"
     />
@@ -110,7 +110,9 @@ defineExpose({ format, validateRules })
   </div>
 
   <MkDialog v-model="dialogVisible" :title="props.title" append-to-body fullscreen>
-    <Codemirror v-model="dialogContent" :extensions="extensions" :tab-size="4" autofocus style="height: calc(100vh - 160px)" />
+    <div class="mk-codemirror">
+      <Codemirror v-model="dialogContent" :extensions="extensions" :tab-size="4" autofocus :style="{ height: 'calc(100dvh - 160px)' }" />
+    </div>
 
     <template #footer>
       <el-button @click="closeEditorDialog">取消</el-button>
@@ -118,3 +120,7 @@ defineExpose({ format, validateRules })
     </template>
   </MkDialog>
 </template>
+
+<style lang="scss" scoped>
+@use './style.scss';
+</style>
diff --git a/ui/src/components/codemirror-editor/python.vue b/ui/src/components/codemirror-editor/python.vue
index 7d674cf60a3..78db0c6c7eb 100644
--- a/ui/src/components/codemirror-editor/python.vue
+++ b/ui/src/components/codemirror-editor/python.vue
@@ -68,8 +68,8 @@ function submitEditorDialog() {
 </script>
 
 <template>
-  <div class="codemirror-editor w-full relative">
-    <Codemirror v-model="code" :extensions="extensions" :tab-size="4" autofocus v-bind="$attrs" />
+  <div class="mk-codemirror w-full relative">
+    <Codemirror v-model="code" :extensions="extensions" :tab-size="4" autofocus v-bind="$attrs" :style="{ height: '210px' }" />
     <el-button class="absolute right-2 bottom-2" text type="info" @click="openEditorDialog">
       <MkIcon name="icon_magnify_outlined" />
     </el-button>
@@ -83,7 +83,9 @@ function submitEditorDialog() {
       </div>
     </template>
 
-    <Codemirror v-model="dialogCode" autofocus :extensions="extensions" style="height: calc(100vh - 160px) !important" :tab-size="4" />
+    <div class="mk-codemirror">
+      <Codemirror v-model="dialogCode" autofocus :extensions="extensions" :tab-size="4" :style="{ height: 'calc(100dvh - 160px)' }" />
+    </div>
 
     <template #footer>
       <el-button type="primary" @click="submitEditorDialog">确定</el-button>
@@ -91,4 +93,6 @@ function submitEditorDialog() {
   </MkDialog>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@use './style.scss';
+</style>
diff --git a/ui/src/components/codemirror-editor/style.scss b/ui/src/components/codemirror-editor/style.scss
new file mode 100644
index 00000000000..adeaa6141cd
--- /dev/null
+++ b/ui/src/components/codemirror-editor/style.scss
@@ -0,0 +1,53 @@
+/* CodeMirror 编辑器 */
+.mk-codemirror {
+  :deep(.cm-editor) {
+    --el-scrollbar-bg-color: var(--el-text-color-secondary);
+    --el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
+    --el-scrollbar-hover-opacity: 0.5;
+    --el-scrollbar-opacity: 0.3;
+    border: var(--el-border);
+    border-radius: var(--el-border-radius-base);
+    overflow: hidden;
+    scrollbar-color: transparent transparent;
+    scrollbar-width: thin;
+  }
+
+  :deep(.cm-editor .cm-gutters.cm-gutters-before) {
+    border: none;
+  }
+
+  :deep(.cm-editor.cm-focused) {
+    outline: none !important;
+  }
+
+  :deep(.cm-editor::-webkit-scrollbar) {
+    background-color: transparent;
+    height: 6px;
+    width: 6px;
+  }
+
+  :deep(.cm-editor::-webkit-scrollbar-corner) {
+    background-color: transparent;
+  }
+
+  :deep(.cm-editor::-webkit-scrollbar-thumb) {
+    background-color: transparent;
+    border-radius: var(--el-border-radius-base);
+    transition: background-color var(--el-transition-duration);
+  }
+
+  :deep(.cm-editor:hover) {
+    scrollbar-color: color-mix(in srgb, var(--el-scrollbar-bg-color) calc(var(--el-scrollbar-opacity) * 100%), transparent) transparent;
+  }
+
+  :deep(.cm-editor:hover::-webkit-scrollbar-thumb) {
+    background-color: var(--el-scrollbar-bg-color);
+    opacity: var(--el-scrollbar-opacity);
+  }
+
+  // 滑块悬浮状态覆盖编辑器悬浮状态。
+  :deep(.cm-editor::-webkit-scrollbar-thumb:hover) {
+    background-color: var(--el-scrollbar-hover-bg-color);
+    opacity: var(--el-scrollbar-hover-opacity);
+  }
+}
diff --git a/ui/src/components/global/markdown-editor/MdEditor.vue b/ui/src/components/global/markdown-editor/MdEditor.vue
index 57d88c7fb35..6f9c06ccf77 100644
--- a/ui/src/components/global/markdown-editor/MdEditor.vue
+++ b/ui/src/components/global/markdown-editor/MdEditor.vue
@@ -18,7 +18,7 @@ const language = computed(() => {
 </script>
 
 <template>
-  <MdEditorV3 :language="language" no-prettier v-bind="$attrs">
+  <MdEditorV3 class="mk-markdown-editor" :language="language" no-prettier v-bind="$attrs">
     <template #defFooters>
       <slot name="defFooters" />
     </template>
diff --git a/ui/src/components/global/markdown-editor/MdEditorMagnify.vue b/ui/src/components/global/markdown-editor/MdEditorMagnify.vue
index 14d6f784fa7..1aba3f5878b 100644
--- a/ui/src/components/global/markdown-editor/MdEditorMagnify.vue
+++ b/ui/src/components/global/markdown-editor/MdEditorMagnify.vue
@@ -32,7 +32,7 @@ function submitEditorDialog() {
 <template>
   <MdEditor v-model="modelValue" :preview="false" :toolbars="[]" :footers="footers" class="magnify-md-editor" v-bind="$attrs">
     <template #defFooters>
-      <el-button text @click="openEditorDialog">
+      <el-button text @click="openEditorDialog" class="mr-1 mb-1">
         <MkIcon name="icon_magnify_outlined" />
       </el-button>
     </template>
@@ -42,18 +42,9 @@ function submitEditorDialog() {
     <MdEditor v-model="dialogContent" :preview="false" :toolbars="[]" :footers="[]" class="magnify-dialog-editor" />
 
     <template #footer>
-      <el-button @click="closeEditorDialog">取消</el-button>
       <el-button type="primary" @click="submitEditorDialog">确定</el-button>
     </template>
   </MkDialog>
 </template>
 
-<style scoped>
-.magnify-md-editor :deep(.md-editor-footer) {
-  border: 0;
-}
-
-.magnify-dialog-editor {
-  height: min(60vh, 600px);
-}
-</style>
+<style scoped></style>
diff --git a/ui/src/components/global/markdown-editor/MdPreview.vue b/ui/src/components/global/markdown-editor/MdPreview.vue
index 9dc997ca190..0a2451cb145 100644
--- a/ui/src/components/global/markdown-editor/MdPreview.vue
+++ b/ui/src/components/global/markdown-editor/MdPreview.vue
@@ -14,7 +14,7 @@ const language = computed(() => {
 </script>
 
 <template>
-  <MdPreviewV3 :language="language" :code-foldable="false" v-bind="$attrs" />
+  <MdPreviewV3 class="mk-markdown-editor" :language="language" :code-foldable="false" v-bind="$attrs" />
 </template>
 
 <style scoped>
diff --git a/ui/src/components/global/markdown-editor/config.ts b/ui/src/components/global/markdown-editor/config.ts
index 5af098baadb..6cdd85b51d0 100644
--- a/ui/src/components/global/markdown-editor/config.ts
+++ b/ui/src/components/global/markdown-editor/config.ts
@@ -14,7 +14,7 @@ import { supPopover } from './sup-popover'
 import 'cropperjs/dist/cropper.css'
 import 'highlight.js/styles/atom-one-dark.css'
 import 'katex/dist/katex.min.css'
-import './sup-popover.scss'
+import './md-editor.scss'
 
 let configured = false
 
diff --git a/ui/src/components/global/markdown-editor/md-editor.scss b/ui/src/components/global/markdown-editor/md-editor.scss
new file mode 100644
index 00000000000..4b7f1c9c421
--- /dev/null
+++ b/ui/src/components/global/markdown-editor/md-editor.scss
@@ -0,0 +1,168 @@
+/* Markdown 编辑器 */
+.mk-markdown-editor.md-editor {
+  --md-color: var(--mk-N900);
+  --md-scrollbar-bg-color: transparent;
+  --md-scrollbar-thumb-active-color: var(--el-scrollbar-hover-bg-color, var(--el-text-color-secondary));
+  --md-scrollbar-thumb-color: var(--el-scrollbar-bg-color, var(--el-text-color-secondary));
+  --md-scrollbar-thumb-hover-color: var(--el-scrollbar-hover-bg-color, var(--el-text-color-secondary));
+  border-radius: var(--el-border-radius-base);
+  font-weight: 400;
+  line-height: 22px;
+  font-family: var(--mk-font-family) !important;
+
+  .cm-content {
+    color: var(--mk-N900);
+    font-weight: 400;
+    margin-block: 0 !important;
+    margin-inline: 11px !important;
+    padding: 5px 0 !important;
+  }
+  .cm-line {
+    padding: 0 !important;
+  }
+
+  .cm-placeholder {
+    color: var(--mk-N500);
+    font-size: var(--mk-font-size-base);
+    font-weight: 400;
+  }
+
+  .md-editor-footer {
+    height: auto !important;
+    border: none !important;
+  }
+  /* Markdown 输入框边框 */
+  &:not(.md-editor-previewOnly) {
+    border-color: var(--el-input-border-color, var(--el-border-color));
+    transition: border-color var(--el-transition-duration);
+
+    &:not(.md-editor-disabled):has(.cm-content[contenteditable='true']:not([aria-readonly='true'])) {
+      &:hover {
+        border-color: var(--el-input-hover-border-color, var(--el-border-color-hover));
+      }
+
+      // 编辑焦点优先于鼠标悬浮状态。
+      &:has(.cm-focused) {
+        border-color: var(--el-input-focus-border-color, var(--el-color-primary));
+      }
+    }
+  }
+}
+
+/* Markdown 自带滚动条沿用 el-scrollbar 的颜色、尺寸和悬浮透明度。 */
+.mk-markdown-editor {
+  .md-editor-custom-scrollbar__thumb {
+    border-radius: inherit;
+    opacity: var(--el-scrollbar-opacity, 0.3);
+    transition: background-color var(--el-transition-duration);
+    width: 100%;
+
+    &:active,
+    &:hover {
+      opacity: var(--el-scrollbar-hover-opacity, 0.5);
+    }
+  }
+
+  .md-editor-custom-scrollbar__track {
+    border-radius: 4px;
+    inset-inline-end: 2px;
+    width: 6px;
+    z-index: 1;
+  }
+}
+
+/* Markdown 预览 */
+.mk-markdown-editor {
+  .md-editor-preview {
+    font-size: inherit;
+    margin: 0;
+    padding: 0;
+    word-break: break-word;
+
+    .md-editor-admonition {
+      margin: 0;
+      padding: 0;
+    }
+
+    .md-editor-code .md-editor-code-head {
+      z-index: inherit !important;
+    }
+
+    img {
+      border: 0 !important;
+      max-width: calc(var(--spacing) * 90) !important;
+    }
+
+    p {
+      padding: 0 !important;
+    }
+
+    sup[data-title] {
+      align-items: center;
+      background-color: var(--el-color-primary-light-9);
+      border: 1px solid var(--el-color-primary-light-7);
+      border-radius: 4px;
+      color: var(--mk-primary);
+      cursor: pointer;
+      display: inline-flex;
+      font-size: 10px;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      line-height: 1;
+      padding: 2px var(--spacing);
+      transition:
+        background-color 0.15s,
+        color 0.15s;
+      vertical-align: super;
+      white-space: nowrap;
+    }
+
+    table {
+      display: block;
+    }
+
+    ul {
+      list-style: circle;
+    }
+
+    video {
+      max-width: calc(var(--spacing) * 90) !important;
+      width: 100%;
+    }
+  }
+
+  .md-editor-preview-wrapper {
+    padding: 0;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .mk-markdown-editor .md-editor-preview img {
+    max-width: 100% !important;
+  }
+}
+
+/* 上标说明浮层由 sup-popover.ts 挂载到 body，使用独立类名限定范围。 */
+.markdown-sup-popover {
+  background: var(--el-bg-color-overlay);
+  border-radius: 4px;
+  box-shadow: var(--el-box-shadow-light);
+  color: var(--mk-N900);
+  display: none;
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 10px calc(var(--spacing) * 3);
+  position: absolute;
+  width: calc(var(--spacing) * 60);
+  word-break: break-word;
+  z-index: 20001;
+}
+
+.markdown-sup-popover__arrow {
+  background: var(--el-bg-color-overlay);
+  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
+  height: calc(var(--spacing) * 2);
+  position: absolute;
+  transform: rotate(45deg);
+  width: calc(var(--spacing) * 2);
+}
diff --git a/ui/src/components/global/markdown-editor/sup-popover.scss b/ui/src/components/global/markdown-editor/sup-popover.scss
deleted file mode 100644
index a82134327c2..00000000000
--- a/ui/src/components/global/markdown-editor/sup-popover.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.markdown-sup-popover {
-  background: var(--el-bg-color-overlay);
-  border-radius: 4px;
-  box-shadow: var(--el-box-shadow-light);
-  color: var(--mk-N900);
-  display: none;
-  font-size: 13px;
-  line-height: 1.5;
-  padding: 10px 12px;
-  position: absolute;
-  width: 240px;
-  word-break: break-word;
-  z-index: 20001;
-}
-
-.markdown-sup-popover__arrow {
-  background: var(--el-bg-color-overlay);
-  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
-  height: 8px;
-  position: absolute;
-  transform: rotate(45deg);
-  width: 8px;
-}
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 2b2ecf1c4d7..76d25fb50a4 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -24,7 +24,7 @@ body {
   -webkit-font-smoothing: antialiased;
   background: var(--mk-N100);
   color: var(--el-text-color-primary);
-  font-family: 'PingFang SC', AlibabaPuHuiTi !important;
+  font-family: var(--mk-font-family);
   font-size: var(--mk-font-size-base);
   font-weight: 400;
   line-height: var(--mk-line-height-base);
@@ -67,6 +67,8 @@ h6 {
   line-height: var(--mk-line-height-base);
 }
 
+/* dot */
+
 // 状态圆点
 .mk-dot-danger {
   border-radius: 50%;
@@ -110,101 +112,7 @@ h6 {
   }
 }
 
-// Codemirror 编辑器
-.cm-editor {
-  --el-scrollbar-bg-color: var(--el-text-color-secondary);
-  --el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
-  --el-scrollbar-hover-opacity: 0.5;
-  --el-scrollbar-opacity: 0.3;
-  height: 210px;
-  border: var(--el-border);
-  border-radius: var(--el-border-radius-base);
-  overflow: hidden;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    background-color: transparent;
-    height: 6px;
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: var(--el-border-radius-base);
-    transition: background-color var(--el-transition-duration);
-  }
-
-  &:hover {
-    scrollbar-color: color-mix(in srgb, var(--el-scrollbar-bg-color) calc(var(--el-scrollbar-opacity) * 100%), transparent) transparent;
-  }
-
-  &:hover::-webkit-scrollbar-thumb {
-    background-color: var(--el-scrollbar-bg-color);
-    opacity: var(--el-scrollbar-opacity);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--el-scrollbar-hover-bg-color);
-    opacity: var(--el-scrollbar-hover-opacity);
-  }
-  .cm-gutters.cm-gutters-before {
-    border: none;
-  }
-  &.cm-focused {
-    outline: none !important;
-  }
-}
-
-// 资源菜单的导入按钮
-.mk-import-button {
-  width: 100%;
-  .el-upload {
-    width: 100%;
-  }
-}
-
-/*
-  标题前带竖线样式
-*/
-.mk-title-decoration {
-  position: relative;
-  padding-left: 10px;
-  &:before {
-    position: absolute;
-    left: 2px;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 2px;
-    height: 67%;
-    content: '';
-    background: var(--el-color-primary);
-  }
-}
-
-/*
-  必填文字的星号
-*/
-.mk-required {
-  &:after {
-    content: '*';
-    color: var(--el-color-danger);
-    margin-left: 4px;
-  }
-}
-/*
-  隐藏自带星号
-*/
-.mk-hide-asterisk {
-  .el-form-item__label::after {
-    display: none;
-  }
-}
-
+/* card */
 // 灰色背景卡片
 .mk-gray-card {
   background-color: var(--mk-N100) !important;
@@ -224,17 +132,7 @@ h6 {
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
 }
 
-// 让一些组件内部滚动条 不会限制在padding内，滚动条贴在最右侧
-.mk-scrollbar-right {
-  &.el-scrollbar {
-    margin-right: calc(var(--spacing) * -4);
-
-    > .el-scrollbar__wrap > .el-scrollbar__view {
-      padding-right: calc(var(--spacing) * 4);
-    }
-  }
-}
-
+/* radio */
 // radio-group 垂直排列
 .vertical-radio-group {
   align-items: stretch;
@@ -260,3 +158,61 @@ h6 {
     padding-left: calc(var(--spacing) * 2);
   }
 }
+
+/* required */
+/*
+  必填文字的星号
+*/
+.mk-required {
+  &:after {
+    content: '*';
+    color: var(--el-color-danger);
+    margin-left: 4px;
+  }
+}
+/*
+  隐藏自带星号
+*/
+.mk-hide-asterisk {
+  .el-form-item__label::after {
+    display: none;
+  }
+}
+
+/* scrollbar */
+// 让一些组件内部滚动条 不会限制在padding内，滚动条贴在最右侧
+.mk-scrollbar-right {
+  &.el-scrollbar {
+    margin-right: calc(var(--spacing) * -4);
+
+    > .el-scrollbar__wrap > .el-scrollbar__view {
+      padding-right: calc(var(--spacing) * 4);
+    }
+  }
+}
+
+/* title */
+// 标题前带竖线样式
+.mk-title-decoration {
+  position: relative;
+  padding-left: 10px;
+  &:before {
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 2px;
+    height: 67%;
+    content: '';
+    background: var(--el-color-primary);
+  }
+}
+
+/* upload-button */
+// 资源菜单的导入按钮
+.mk-import-button {
+  width: 100%;
+  .el-upload {
+    width: 100%;
+  }
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 1446ce200a5..42e6bc00aae 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -370,6 +370,12 @@
   .dialog-content {
     max-height: calc(100vh - 272px);
   }
+  &.is-fullscreen {
+    .dialog-content {
+      max-height: none;
+      height: calc(100vh - 154px);
+    }
+  }
   //  专属带侧边栏结构的dialog
   &.mk-aside-content-dialog {
     .el-dialog__header {
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 5f85110f48f..07d7379719f 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -1,4 +1,5 @@
 :root {
+  --mk-font-family: 'PingFang SC', AlibabaPuHuiTi !important;
   --mk-primary: #3370ff;
   --mk-primary-rgb: 51 112 255;
   --mk-primary-gradient-end: #7f3bf5;
diff --git a/ui/src/views/tool/tool-store/ToolStoreDetailDrawer.vue b/ui/src/views/tool/tool-store/ToolStoreDetailDrawer.vue
index 4267f64b0cb..8c68f3e0f18 100644
--- a/ui/src/views/tool/tool-store/ToolStoreDetailDrawer.vue
+++ b/ui/src/views/tool/tool-store/ToolStoreDetailDrawer.vue
@@ -46,8 +46,8 @@ defineExpose({ open })
         </div>
         <el-button v-if="props.showAdd" type="primary" @click="handleAdd">应用</el-button>
       </div>
-      <!-- // TODO 换成markdown -->
-      <pre class="whitespace-pre-wrap text-sm">{{ detailContent }}</pre>
+
+      <MdPreview :modelValue="detailContent" />
     </template>
   </MkDrawer>
 </template>
diff --git a/ui/src/workflow-canvas/WORKFLOW_README.md b/ui/src/workflow-canvas/WORKFLOW_README.md
index f00d4b05607..d11f5a4ec97 100644
--- a/ui/src/workflow-canvas/WORKFLOW_README.md
+++ b/ui/src/workflow-canvas/WORKFLOW_README.md
@@ -82,6 +82,10 @@ src/workflow-canvas/
 各自的表格、表单和弹窗交互，通过 Props 和 Emits 传递数据；节点 `index.vue` 负责统一写回节点
 属性、执行节点级校验和发送画布事件，不直接堆叠各业务块的页面逻辑。
 
+固定字段写入统一使用直接赋值，例如 `model.properties.node_data = value`、
+`model.validate = validate`，不使用 Lodash `set`。写入嵌套字段前保留必要的父对象初始化；
+Vue `computed` 的 `set` 和原生 `Map.set()` 按各自 API 正常使用。
+
 ## View 接入约定
 
 - 所有画布路由页面均放在 `src/views/workflow/`，并以 `XxxWorkflowView.vue` 命名，例如
diff --git a/ui/src/workflow-canvas/core/node-container/NodeConditionDropdown.vue b/ui/src/workflow-canvas/core/node-container/NodeConditionDropdown.vue
index a177bafdfcd..31b435e710b 100644
--- a/ui/src/workflow-canvas/core/node-container/NodeConditionDropdown.vue
+++ b/ui/src/workflow-canvas/core/node-container/NodeConditionDropdown.vue
@@ -1,7 +1,6 @@
 <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'
 
@@ -36,11 +35,11 @@ const condition = computed({
   get: () => {
     if (nodeProperties.value.condition) return nodeProperties.value.condition
 
-    set(props.model.properties, 'condition', 'AND')
+    props.model.properties.condition = 'AND'
     return true
   },
   set: (value: boolean | 'AND' | 'OR') => {
-    set(props.model.properties, 'condition', value)
+    props.model.properties.condition = value
   },
 })
 </script>
diff --git a/ui/src/workflow-canvas/core/node-container/NodeOperateDropdown.vue b/ui/src/workflow-canvas/core/node-container/NodeOperateDropdown.vue
index 20e19ee996d..410d4e02069 100644
--- a/ui/src/workflow-canvas/core/node-container/NodeOperateDropdown.vue
+++ b/ui/src/workflow-canvas/core/node-container/NodeOperateDropdown.vue
@@ -2,7 +2,6 @@
 import type { BaseNodeModel } from '@logicflow/core'
 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'
@@ -46,7 +45,7 @@ const canChangeEnabled = computed(() => {
 const nodeEnabled = computed({
   get: () => !nodeProperties.value.disabled,
   set: (value: boolean) => {
-    set(props.model.properties, 'disabled', !value)
+    props.model.properties.disabled = !value
   },
 })
 const sourceName = computed(() => {
@@ -79,7 +78,7 @@ async function saveNodeName(formInstance: FormInstance | null | undefined) {
       return
     }
 
-    set(props.model.properties, 'stepName', nodeNameForm.value.title)
+    props.model.properties.stepName = nodeNameForm.value.title
     props.model.clearNextNodeField(true)
     nodeNameDialogVisible.value = false
     formInstance.resetFields()
@@ -91,8 +90,8 @@ function copyNode() {
   const cloneNode = props.model.graphModel.cloneNode(props.model.id)
   if (!cloneNode) return
 
-  set(cloneNode, 'isSelected', true)
-  set(cloneNode, 'isHovered', true)
+  cloneNode.isSelected = true
+  cloneNode.isHovered = true
   props.model.graphModel.toFront(cloneNode.id)
 }
 
diff --git a/ui/src/workflow-canvas/core/node-container/index.vue b/ui/src/workflow-canvas/core/node-container/index.vue
index 59e9b7b25ba..7786799415f 100644
--- a/ui/src/workflow-canvas/core/node-container/index.vue
+++ b/ui/src/workflow-canvas/core/node-container/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reaction, type BaseNodeModel, type Model } from '@logicflow/core'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { cloneDeep, set } from 'lodash'
+import { cloneDeep } from 'lodash'
 import { iconComponent } from '@/workflow-canvas/icons/utils'
 import { copyText } from '@/utils/clipboard'
 import { WorkflowMode, WorkflowNodeType, type ShapeItem, type WorkflowNodeField } from '@/workflow-canvas/types'
@@ -45,7 +45,15 @@ const disposeSelectionReaction = reaction(
 
 const showAnchor = ref(false)
 const nodeMenuDragClosing = ref(false)
+const nodeMenuRef = ref<InstanceType<typeof NodeMenu>>()
 const anchorData = ref<Model.AnchorConfig>()
+const anchorTooltipRef = ref<HTMLElement>()
+const anchorTooltipVisible = ref(false)
+// 通过虚拟触发器将 LogicFlow 锚点交给 Element Plus 定位提示。
+const setAnchorTooltip = (anchorElement?: HTMLElement) => {
+  if (anchorElement) anchorTooltipRef.value = anchorElement
+  anchorTooltipVisible.value = Boolean(anchorElement)
+}
 const dropdownMenuStyle = computed(() => {
   return { top: anchorData.value ? anchorData.value.y - model.y + model.height / 2 + 'px' : '0px' }
 })
@@ -54,22 +62,19 @@ const nodeDisabled = computed({
     return model.properties.disabled || false
   },
   set: (v: boolean) => {
-    set(model.properties, 'disabled', v)
+    model.properties.disabled = v
   },
 })
 const anchorGuard = createAnchorGuard(model)
 
+if (model.properties.showNode === undefined) {
+  model.properties.showNode = true
+}
 const showNode = computed({
   set: (v) => {
-    set(model.properties, 'showNode', v)
-  },
-  get: () => {
-    if (model.properties.showNode !== undefined) {
-      return model.properties.showNode
-    }
-    set(model.properties, 'showNode', true)
-    return true
+    model.properties.showNode = v
   },
+  get: () => model.properties.showNode ?? true,
 })
 
 const node_status = computed(() => {
@@ -83,8 +88,8 @@ const handleNodeMousedown = (event?: MouseEvent) => {
   if (!event?.shiftKey) {
     model.graphModel.clearSelectElements()
   }
-  set(model, 'isSelected', !model.isSelected)
-  set(model, 'isHovered', !model.isSelected)
+  model.isSelected = !model.isSelected
+  model.isHovered = !model.isSelected
   model.graphModel.toFront(model.id)
 }
 const resizeStepContainer = (nodeHeight: number) => {
@@ -121,17 +126,14 @@ function dragNode(item: NodeMenuItem, event: PointerEvent) {
   nodeMenuDragClosing.value = true
   closeNodeMenu()
 }
+if (model.properties.enableException === undefined) {
+  model.properties.enableException = false
+}
 const enable_exception = computed({
   set: (v) => {
-    set(model.properties, 'enableException', v)
-  },
-  get: () => {
-    if (model.properties.enableException !== undefined) {
-      return model.properties.enableException
-    }
-    set(model.properties, 'enableException', false)
-    return false
+    model.properties.enableException = v
   },
+  get: () => model.properties.enableException ?? false,
 })
 const nodeFields = computed(() => {
   if (nodeProperties.value.config?.fields) {
@@ -173,8 +175,10 @@ const openNodeMenu = (anchorValue: Model.AnchorConfig) => {
   nodeMenuDragClosing.value = false
   showAnchor.value = true
   anchorData.value = anchorValue
+  model.graphModel.rootEl.addEventListener('pointerdown', handleNodeMenuOutsidePointerDown, true)
 }
 const closeNodeMenu = () => {
+  model.graphModel.rootEl.removeEventListener('pointerdown', handleNodeMenuOutsidePointerDown, true)
   showAnchor.value = false
   anchorData.value = undefined
 }
@@ -190,6 +194,22 @@ const selectOn = (kw: string) => {
   model.setSelected(false)
   currentKeyWord.value = false
 }
+
+// 捕获阶段处理外部点击，避免节点表单和画布交互停止冒泡后菜单无法关闭。
+const handleNodeMenuOutsidePointerDown = (event: PointerEvent) => {
+  const target = event.target
+  if (!(target instanceof Element) || nodeMenuRef.value?.$el.contains(target)) return
+
+  const anchorElement = target.closest('[data-node-menu-anchor-id]')
+  if (
+    anchorElement?.getAttribute('data-node-menu-node-id') === model.id &&
+    anchorElement.getAttribute('data-node-menu-anchor-id') === anchorData.value?.id
+  ) {
+    return
+  }
+
+  closeNodeMenu()
+}
 /**
  * 定位时触发
  * @param kw
@@ -227,12 +247,13 @@ const highlightedStepName = (contentText: string) => {
   }
 }
 onMounted(() => {
-  set(model, 'openNodeMenu', (anchor: Model.AnchorConfig) => {
-    showAnchor.value ? closeNodeMenu() : openNodeMenu(anchor)
-  })
-  set(model, 'selectOn', selectOn)
-  set(model, 'focusOn', focusOn)
-  set(model, 'clearSelectOn', clearSelectOn)
+  model.setAnchorTooltip = setAnchorTooltip
+  model.openNodeMenu = (anchor: Model.AnchorConfig) => {
+    showAnchor.value && anchorData.value?.id === anchor.id ? closeNodeMenu() : openNodeMenu(anchor)
+  }
+  model.selectOn = selectOn
+  model.focusOn = focusOn
+  model.clearSelectOn = clearSelectOn
   initResizeObserver()
 })
 let resizeObserver: ResizeObserver | null = null
@@ -250,6 +271,9 @@ const initResizeObserver = () => {
 }
 const stepContainerRef = ref<HTMLElement>()
 onBeforeUnmount(() => {
+  closeNodeMenu()
+  model.openNodeMenu = undefined
+  model.setAnchorTooltip = undefined
   disposeSelectionReaction()
   resizeObserver?.disconnect()
   resizeObserver = null
@@ -310,24 +334,21 @@ onBeforeUnmount(() => {
                 <template v-for="(item, index) in nodeFields" :key="index">
                   <div class="group flex-between">
                     <span class="break-all">{{ item.label }} {{ '{' + item.value + '}' }}</span>
-                    <el-tooltip effect="dark" content="复制参数" placement="top">
-                      <el-button class="group-hover-visible" link @click="copyText(item.globeLabel)">
-                        <MkIcon name="icon_copy_outlined" />
-                      </el-button>
-                    </el-tooltip>
+                    <el-button class="group-hover-visible" link @click="copyText(item.globeLabel)">
+                      <MkIcon name="icon_copy_outlined" />
+                    </el-button>
                   </div>
                 </template>
               </div>
 
-              <div v-if="enable_exception" class="mk-gray-card space-y-4">
+              <div v-if="enable_exception" class="mk-gray-card space-y-4 mt-1">
                 <template v-for="(item, index) in abnormalNodeFields" :key="index">
                   <div class="group flex-between">
                     <span class="break-all">{{ item.label }} {{ '{' + item.value + '}' }}</span>
-                    <el-tooltip effect="dark" content="复制参数" placement="top">
-                      <el-button class="group-hover-visible" link @click="copyText(item.globeLabel)">
-                        <MkIcon name="icon_copy_outlined" />
-                      </el-button>
-                    </el-tooltip>
+
+                    <el-button class="group-hover-visible" link @click="copyText(item.globeLabel)">
+                      <MkIcon name="icon_copy_outlined" />
+                    </el-button>
                   </div>
                 </template>
               </div>
@@ -337,9 +358,22 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
+    <el-tooltip
+      virtual-triggering
+      :virtual-ref="anchorTooltipRef"
+      :visible="anchorTooltipVisible && !showAnchor"
+      :teleported="false"
+      :enterable="false"
+      effect="dark"
+      placement="top"
+    >
+      <template #content>点击添加节点<br />拖拽连接节点</template>
+    </el-tooltip>
+
     <el-collapse-transition>
       <NodeMenu
         v-if="showAnchor"
+        ref="nodeMenuRef"
         class="absolute"
         :class="{ 'pointer-events-none': nodeMenuDragClosing }"
         :current-resource="currentResource"
diff --git a/ui/src/workflow-canvas/core/shortcut.ts b/ui/src/workflow-canvas/core/shortcut.ts
index 0cce9d8bd97..bd7a2e0ff5b 100644
--- a/ui/src/workflow-canvas/core/shortcut.ts
+++ b/ui/src/workflow-canvas/core/shortcut.ts
@@ -301,7 +301,7 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
       MsgError(`${nodes[0]?.properties?.stepName}节点不允许删除`)
       return
     }
-    MsgConfirm('提示', '确定删除选中的节点和连线吗？', { confirmButtonText: '确定', confirmButtonClass: 'danger' }).then(() => {
+    MsgConfirm('提示', '确定删除该节点？', { confirmButtonText: '确定', confirmButtonClass: 'danger' }).then(() => {
       if (!keyboardOptions?.enabled) return true
       if (graph.textEditElement) return true
 
@@ -328,10 +328,6 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
   keyboard.on(['cmd + v', 'ctrl + v'], () => {})
   // undo
   keyboard.on(['cmd + z', 'ctrl + z'], () => {
-    // if (!keyboardOptions?.enabled) return true
-    // if (graph.textEditElement) return true
-    // lf.undo()
-    // return false
   })
   // redo
   keyboard.on(['cmd + y', 'ctrl + y'], () => {
diff --git a/ui/src/workflow-canvas/core/workflow-node.ts b/ui/src/workflow-canvas/core/workflow-node.ts
index 8f2e8652c5f..5064c8e3265 100644
--- a/ui/src/workflow-canvas/core/workflow-node.ts
+++ b/ui/src/workflow-canvas/core/workflow-node.ts
@@ -2,7 +2,7 @@ import { createApp, reactive, type Component } from 'vue'
 import { cloneDeep } from 'lodash'
 import { h as createLogicFlowElement, HtmlNode, HtmlNodeModel, type GraphModel, type IHtmlNodeProperties, type Model } from '@logicflow/core'
 import { nodeDict } from '@/workflow-canvas/config/node-mapping'
-import { WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types'
+import { WorkflowKind, WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types'
 import { connect, disconnect } from './teleport'
 
 type NodeViewProps = ConstructorParameters<typeof HtmlNode>[0]
@@ -15,6 +15,8 @@ interface WorkflowNodeProperties extends IHtmlNodeProperties {
   api_input_field_list?: unknown[]
   chat_input_field_list?: unknown[]
   config?: WorkflowNodeConfig
+  enableException?: boolean
+  kind?: WorkflowKind
   node_data?: unknown
   showNode?: boolean
   status?: number
@@ -58,6 +60,8 @@ export class WorkflowNodeView extends HtmlNode {
   getAnchorShape(anchorData?: Model.AnchorConfig) {
     if (!anchorData) return null
     const { x, y, type } = anchorData
+    const nodeModel = this.props.model as unknown as WorkflowNodeModel
+    const canOpenNodeMenu = type === 'right' && typeof nodeModel.openNodeMenu === 'function'
     const connected = this.props.graphModel.edges.some((edge) =>
       type === 'left' ? edge.targetAnchorId === anchorData.id : edge.sourceAnchorId === anchorData.id,
     )
@@ -69,13 +73,17 @@ export class WorkflowNodeView extends HtmlNode {
         createLogicFlowElement(
           'div',
           {
-            className: `workflow-node-anchor${type === 'right' ? ' is-right' : ''}${connected ? ' is-connected' : ''}`,
+            'data-node-menu-node-id': nodeModel.id,
+            'data-node-menu-anchor-id': anchorData.id,
+            className: `workflow-node-anchor${type === 'right' ? ' is-right' : ''}${connected ? ' is-connected' : ''}${anchorData.id?.endsWith('_exception_right') ? ' is-abnormal' : ''}`,
             onClick: () => {
-              if (type === 'right') {
-                const nodeModel = this.props.model as unknown as WorkflowNodeModel
-                nodeModel.openNodeMenu?.(anchorData)
-              }
+              if (canOpenNodeMenu) nodeModel.openNodeMenu?.(anchorData)
             },
+            onMouseEnter: (event: MouseEvent) => {
+              if (canOpenNodeMenu && event.currentTarget instanceof HTMLElement) nodeModel.setAnchorTooltip?.(event.currentTarget)
+            },
+            onMouseLeave: () => nodeModel.setAnchorTooltip?.(),
+            onPointerDown: () => nodeModel.setAnchorTooltip?.(),
           },
           connected && type !== 'right'
             ? []
@@ -126,6 +134,7 @@ export class WorkflowNodeModel extends HtmlNodeModel<WorkflowNodeProperties> {
   private upNodeFieldDict?: NodeFieldGroup
 
   openNodeMenu?: (anchorData: Model.AnchorConfig) => void
+  setAnchorTooltip?: (anchorElement?: HTMLElement) => void
   validate?: () => Promise<unknown>
 
   setAttributes() {
@@ -192,13 +201,25 @@ export class WorkflowNodeModel extends HtmlNodeModel<WorkflowNodeProperties> {
   }
 
   getDefaultAnchor(): Model.AnchorConfig[] {
-    if (String(this.type) === WorkflowNodeType.Base) return []
-
+    const { id, x, y, width } = this
+    const showNode = this.properties.showNode === undefined ? true : this.properties.showNode
     const anchors: Model.AnchorConfig[] = []
-    if (String(this.type) !== WorkflowNodeType.Start) {
-      anchors.push({ x: this.x - this.width / 2, y: this.y, id: `${this.id}_left`, type: 'left', edgeAddable: false })
+
+    if ([WorkflowNodeType.Base, WorkflowNodeType.KnowledgeBase, WorkflowNodeType.ToolBaseNode].some((nodeType) => nodeType === String(this.type))) {
+      return anchors
+    }
+
+    if (
+      ![WorkflowNodeType.Start, WorkflowNodeType.LoopStartNode, WorkflowNodeType.ToolStartNode].some((nodeType) => nodeType === String(this.type)) &&
+      this.properties.kind !== WorkflowKind.DataSource
+    ) {
+      anchors.push({ x: x - width / 2, y: showNode ? y : y, id: `${id}_left`, type: 'left', edgeAddable: false })
+    }
+
+    if (this.properties.enableException) {
+      anchors.push({ x: x + width / 2, y: y + this.height / 2 - 40, id: `${id}_exception_right`, type: 'right' })
     }
-    anchors.push({ x: this.x + this.width / 2, y: this.y, id: `${this.id}_right`, type: 'right' })
+    anchors.push({ x: x + width / 2, y: showNode ? y : y, id: `${id}_right`, type: 'right' })
     return anchors
   }
 
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 f9b72fcfabb..6ba5a67fbcc 100644
--- a/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
-import { cloneDeep, set } from 'lodash'
+import { cloneDeep } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import { TOOL_TYPE } from '@/api/enums'
 import ApplicationApi from '@/api/admin/workspace/application/application'
@@ -113,12 +113,13 @@ function normalizeForm(data: Partial<AiChatNodeForm> & { mcp_tool_id?: string })
   return normalized
 }
 
+// 节点初始化时补齐默认值和兼容旧数据，避免读取表单时改写响应式依赖。
+if (!model.properties.node_data) model.properties.node_data = cloneDeep(defaultForm)
+normalizeForm(model.properties.node_data as Partial<AiChatNodeForm>)
+
 const formData = computed<AiChatNodeForm>({
-  get: () => {
-    if (!model.properties.node_data) set(model.properties, 'node_data', cloneDeep(defaultForm))
-    return normalizeForm(model.properties.node_data as Partial<AiChatNodeForm>)
-  },
-  set: (value) => set(model.properties, 'node_data', value),
+  get: () => model.properties.node_data as AiChatNodeForm,
+  set: (value) => (model.properties.node_data = value),
 })
 
 const modelSetting = computed<AiModelSettingValue>(() => ({
@@ -208,7 +209,6 @@ function validate() {
 
 onMounted(() => {
   model.validate = validate
-  void formData.value
   store.getModelList({ model_type: 'LLM' }).then((models) => (modelOptions.value = models))
   store.getProviderList().then((providers) => (providerOptions.value = providers))
   void loadResourceOptions()
diff --git a/ui/src/workflow-canvas/nodes/base-node/index.vue b/ui/src/workflow-canvas/nodes/base-node/index.vue
index 06633af1c68..24dfb821c82 100644
--- a/ui/src/workflow-canvas/nodes/base-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/base-node/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
-import { cloneDeep, set } from 'lodash'
+import { cloneDeep } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import type { ModelItem, ModelProviderItem } from '@/api/types'
 import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
@@ -77,12 +77,13 @@ function normalizeForm(data: Partial<BaseNodeForm>) {
   return normalized
 }
 
+// 节点初始化时补齐默认值和兼容旧数据，避免读取表单时改写响应式依赖。
+if (!model.properties.node_data) model.properties.node_data = cloneDeep(defaultForm)
+normalizeForm(model.properties.node_data as Partial<BaseNodeForm>)
+
 const formData = computed<BaseNodeForm>({
-  get: () => {
-    if (!model.properties.node_data) set(model.properties, 'node_data', cloneDeep(defaultForm))
-    return normalizeForm(model.properties.node_data as Partial<BaseNodeForm>)
-  },
-  set: (value) => set(model.properties, 'node_data', value),
+  get: () => model.properties.node_data as BaseNodeForm,
+  set: (value) => (model.properties.node_data = value),
 })
 
 function handleEditorWheel(event: WheelEvent) {
@@ -272,8 +273,4 @@ onMounted(() => {
   </NodeContainer>
 </template>
 
-<style lang="scss" scoped>
-:deep(.el-form-item__label) {
-  width: 100%;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow-canvas/nodes/condition-node/index.vue b/ui/src/workflow-canvas/nodes/condition-node/index.vue
index e22c72ef395..095a60ce137 100644
--- a/ui/src/workflow-canvas/nodes/condition-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/condition-node/index.vue
@@ -87,7 +87,7 @@
   </NodeContainer>
 </template>
 <script setup lang="ts">
-import { cloneDeep, set } from 'lodash'
+import { cloneDeep } 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'
@@ -137,7 +137,7 @@ const defaultForm = () => ({
 })
 
 if (!model.properties.node_data) {
-  set(model.properties, 'node_data', defaultForm())
+  model.properties.node_data = defaultForm()
 }
 const form_data = model.properties.node_data as { branch: BranchItem[] }
 
@@ -167,7 +167,7 @@ function addBranch() {
   }
   list.splice(list.length - 1, 0, obj)
   refreshBranchAnchor(list, true)
-  set(model.properties.node_data, 'branch', list)
+  model.properties.node_data.branch = list
 }
 
 function refreshBranchAnchor(list: BranchItem[], isAdd: boolean) {
@@ -184,14 +184,14 @@ function refreshBranchAnchor(list: BranchItem[], isAdd: boolean) {
       }
     })
     .filter((item) => item)
-  set(model.properties, 'branch_condition_list', newBranchConditionList)
+  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)
+  model.properties.node_data.branch = list
 }
 
 function deleteCondition(index: number, cIndex: number) {
@@ -213,14 +213,14 @@ function deleteCondition(index: number, cIndex: number) {
       }
     })
   }
-  set(model.properties.node_data, 'branch', list)
+  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)
+    model.properties.node_data.branch = list
   }
 }
 
@@ -249,12 +249,12 @@ function resizeCondition(container: HTMLElement, row: BranchItem, index: number)
     }
     return item
   })
-  set(model.properties, 'branch_condition_list', newBranchConditionList)
+  model.properties.branch_condition_list = newBranchConditionList
   refreshBranchAnchor(model.properties.node_data.branch, true)
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   if (!model.properties.branch_condition_list) {
     refreshBranchAnchor(form_data.branch, true)
   }
diff --git a/ui/src/workflow-canvas/nodes/form-node/index.vue b/ui/src/workflow-canvas/nodes/form-node/index.vue
index 13e7508dceb..c6720a9ff95 100644
--- a/ui/src/workflow-canvas/nodes/form-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/form-node/index.vue
@@ -102,7 +102,7 @@
 </template>
 <script setup lang="ts">
 import { ref, inject, computed, onMounted, onBeforeUnmount, nextTick, useTemplateRef } from 'vue'
-import { set, cloneDeep } from 'lodash'
+import { cloneDeep } from 'lodash'
 import Sortable from 'sortablejs'
 import type { FormInstance } from 'element-plus'
 
@@ -173,12 +173,12 @@ const visibilityFieldOptions = computed<VisibilityFieldOption[]>(() => {
 const form_data = computed<{ is_result: boolean; form_field_list: FormField[]; form_content_format: string }>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', { is_result: true, form_content_format: '', form_field_list: [] })
+      model.properties.node_data = { is_result: true, form_content_format: '', form_field_list: [] }
     }
     return model.properties.node_data as { is_result: boolean; form_field_list: FormField[]; form_content_format: string }
   },
   set: (value) => {
-    set(model.properties, 'node_data', value)
+    model.properties.node_data = value
   },
 })
 
@@ -203,7 +203,7 @@ function initFieldSortable() {
       const [movedItem] = items.splice(evt.oldIndex, 1)
       if (!movedItem) return
       items.splice(evt.newIndex, 0, movedItem)
-      set(form_data.value, 'form_field_list', items)
+      form_data.value.form_field_list = items
       syncFieldList()
       nextTick(initFieldSortable)
     },
@@ -231,7 +231,7 @@ const openEditDialog = (row: FormField, index: number) => {
 const deleteField = (index: number) => {
   const list = cloneDeep(form_data.value.form_field_list)
   list.splice(index, 1)
-  set(form_data.value, 'form_field_list', list)
+  form_data.value.form_field_list = list
   syncFieldList()
 }
 
@@ -253,7 +253,7 @@ const submitField = async () => {
     } else {
       list.push(data as FormField)
     }
-    set(form_data.value, 'form_field_list', list)
+    form_data.value.form_field_list = list
     syncFieldList()
     dialogVisible.value = false
   } catch {
@@ -267,9 +267,9 @@ const syncFieldList = () => {
     ...form_data.value.form_field_list.map((item) => ({ value: item.field, label: getFieldLabel(item) })),
   ]
   if (!model.properties.config) {
-    set(model.properties, 'config', {})
+    model.properties.config = {}
   }
-  set(model.properties.config!, 'fields', fields)
+  model.properties.config!.fields = fields
   model.clearNextNodeField(true)
   nextTick(initFieldSortable)
 }
@@ -299,7 +299,7 @@ const validate = () => {
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   nextTick(initFieldSortable)
 })
 
diff --git a/ui/src/workflow-canvas/nodes/image-generate-node/index.vue b/ui/src/workflow-canvas/nodes/image-generate-node/index.vue
index 6c276864074..d9995fe9fba 100644
--- a/ui/src/workflow-canvas/nodes/image-generate-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/image-generate-node/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
-import { set } from 'lodash'
+
 import { QuestionFilled } from '@element-plus/icons-vue'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
@@ -34,21 +34,21 @@ const providerOptions = ref<Array<ModelProviderItem>>([])
 const formData = computed<ImageGenerateNodeForm>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', {
+      model.properties.node_data = {
         model_id: '',
         model_id_type: 'custom',
         model_id_reference: [],
         prompt: '{{开始.question}}',
         negative_prompt: '',
         model_params_setting: {},
-      })
+      }
     }
     const data = model.properties.node_data as ImageGenerateNodeForm
-    if (data.model_id_type === undefined) set(data, 'model_id_type', 'custom')
-    if (!Array.isArray(data.model_id_reference)) set(data, 'model_id_reference', [])
-    if (data.prompt === undefined) set(data, 'prompt', '{{开始.question}}')
-    if (data.negative_prompt === undefined) set(data, 'negative_prompt', '')
-    if (!data.model_params_setting) set(data, 'model_params_setting', {})
+    if (data.model_id_type === undefined) data.model_id_type = 'custom'
+    if (!Array.isArray(data.model_id_reference)) data.model_id_reference = []
+    if (data.prompt === undefined) data.prompt = '{{开始.question}}'
+    if (data.negative_prompt === undefined) data.negative_prompt = ''
+    if (!data.model_params_setting) data.model_params_setting = {}
     return data
   },
   set: (value) => (model.properties.node_data = value),
@@ -56,15 +56,13 @@ const formData = computed<ImageGenerateNodeForm>({
 
 function validate() {
   return Promise.all([
-    formData.value.model_id_type === 'reference'
-      ? modelCascaderRef.value?.validate()
-      : Promise.resolve(),
+    formData.value.model_id_type === 'reference' ? modelCascaderRef.value?.validate() : Promise.resolve(),
     formRef.value?.validate(),
   ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   store.getModelList({ model_type: 'TTI' }).then((data) => {
     modelList.value = data
   })
diff --git a/ui/src/workflow-canvas/nodes/image-understand-node/index.vue b/ui/src/workflow-canvas/nodes/image-understand-node/index.vue
index e5daa48cbd5..61f3fe40395 100644
--- a/ui/src/workflow-canvas/nodes/image-understand-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/image-understand-node/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
 import { QuestionFilled } from '@element-plus/icons-vue'
-import { set } from 'lodash'
+
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
@@ -38,7 +38,7 @@ const providerOptions = ref<Array<ModelProviderItem>>([])
 const formData = computed<ImageUnderstandNodeForm>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', {
+      model.properties.node_data = {
         model_id: '',
         model_id_type: 'custom',
         model_id_reference: [],
@@ -48,19 +48,19 @@ const formData = computed<ImageUnderstandNodeForm>({
         dialogue_type: 'WORKFLOW',
         dialogue_number: 1,
         image_list: [],
-      })
+      }
     }
     const data = model.properties.node_data as ImageUnderstandNodeForm
-    if (data.model_id_type === undefined) set(data, 'model_id_type', 'custom')
-    if (!Array.isArray(data.model_id_reference)) set(data, 'model_id_reference', [])
-    if (!data.model_setting) set(data, 'model_setting', { reasoning_content_enable: false })
-    if (data.prompt === undefined) set(data, 'prompt', '{{开始.question}}')
-    if (data.system === undefined) set(data, 'system', '')
-    if (data.dialogue_type === undefined) set(data, 'dialogue_type', 'WORKFLOW')
+    if (data.model_id_type === undefined) data.model_id_type = 'custom'
+    if (!Array.isArray(data.model_id_reference)) data.model_id_reference = []
+    if (!data.model_setting) data.model_setting = { reasoning_content_enable: false }
+    if (data.prompt === undefined) data.prompt = '{{开始.question}}'
+    if (data.system === undefined) data.system = ''
+    if (data.dialogue_type === undefined) data.dialogue_type = 'WORKFLOW'
     if (data.dialogue_number === undefined || data.dialogue_number === null) {
-      set(data, 'dialogue_number', 1)
+      data.dialogue_number = 1
     }
-    if (!Array.isArray(data.image_list)) set(data, 'image_list', [])
+    if (!Array.isArray(data.image_list)) data.image_list = []
     return data
   },
   set: (value) => (model.properties.node_data = value),
@@ -68,16 +68,14 @@ const formData = computed<ImageUnderstandNodeForm>({
 
 function validate() {
   return Promise.all([
-    formData.value.model_id_type === 'reference'
-      ? modelCascaderRef.value?.validate()
-      : Promise.resolve(),
+    formData.value.model_id_type === 'reference' ? modelCascaderRef.value?.validate() : Promise.resolve(),
     imageCascaderRef.value?.validate(),
     formRef.value?.validate(),
   ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   store.getModelList({ model_type: 'IMAGE' }).then((data) => {
     modelList.value = data
   })
diff --git a/ui/src/workflow-canvas/nodes/intent-node/index.vue b/ui/src/workflow-canvas/nodes/intent-node/index.vue
index 3c03c6741bd..19acf32ea11 100644
--- a/ui/src/workflow-canvas/nodes/intent-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/intent-node/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
 import { Delete, Plus } from '@element-plus/icons-vue'
-import { cloneDeep, set } from 'lodash'
+import { cloneDeep } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
@@ -51,7 +51,7 @@ function defaultBranch(): IntentNodeBranch[] {
 const formData = computed<IntentNodeForm>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', {
+      model.properties.node_data = {
         model_id: '',
         model_id_type: 'custom',
         model_id_reference: [],
@@ -60,19 +60,19 @@ const formData = computed<IntentNodeForm>({
         dialogue_type: 'WORKFLOW',
         dialogue_number: 1,
         branch: defaultBranch(),
-      })
+      }
     }
     const data = model.properties.node_data as IntentNodeForm
-    if (data.model_id_type === undefined) set(data, 'model_id_type', 'custom')
-    if (!Array.isArray(data.model_id_reference)) set(data, 'model_id_reference', [])
-    if (!data.model_params_setting) set(data, 'model_params_setting', {})
-    if (!Array.isArray(data.content_list)) set(data, 'content_list', [])
-    if (data.dialogue_type === undefined) set(data, 'dialogue_type', 'WORKFLOW')
+    if (data.model_id_type === undefined) data.model_id_type = 'custom'
+    if (!Array.isArray(data.model_id_reference)) data.model_id_reference = []
+    if (!data.model_params_setting) data.model_params_setting = {}
+    if (!Array.isArray(data.content_list)) data.content_list = []
+    if (data.dialogue_type === undefined) data.dialogue_type = 'WORKFLOW'
     if (data.dialogue_number === undefined || data.dialogue_number === null) {
-      set(data, 'dialogue_number', 1)
+      data.dialogue_number = 1
     }
     if (!Array.isArray(data.branch) || data.branch.length === 0) {
-      set(data, 'branch', defaultBranch())
+      data.branch = defaultBranch()
     }
     return data
   },
@@ -88,7 +88,7 @@ function addBranch() {
   const obj: IntentNodeBranch = { id: randomId(), content: '', isOther: false }
   // 插入到最后一个（“其他”）之前
   list.splice(list.length - 1, 0, obj)
-  set(formData.value, 'branch', list)
+  formData.value.branch = list
   refreshBranch()
 }
 
@@ -98,30 +98,26 @@ function deleteBranch(id: string) {
   if (!item || item.isOther) return
 
   const deleteAnchorId = `${model.id}_${id}_right`
-  const edgeIds = model.outgoing.edges
-    .filter((edge) => edge.sourceAnchorId === deleteAnchorId)
-    .map((edge) => edge.id)
+  const edgeIds = model.outgoing.edges.filter((edge) => edge.sourceAnchorId === deleteAnchorId).map((edge) => edge.id)
   if (edgeIds.length > 0) {
     model.graphModel.eventCenter.emit('delete_edge', edgeIds)
   }
 
   const newList = list.filter((branch) => branch.id !== id)
-  set(formData.value, 'branch', newList)
+  formData.value.branch = newList
   refreshBranch()
 }
 
 function validate() {
   return Promise.all([
-    formData.value.model_id_type === 'reference'
-      ? modelCascaderRef.value?.validate()
-      : Promise.resolve(),
+    formData.value.model_id_type === 'reference' ? modelCascaderRef.value?.validate() : Promise.resolve(),
     contentCascaderRef.value?.validate(),
     formRef.value?.validate(),
   ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   store.getModelList({ model_type: 'LLM' }).then((data) => {
     modelList.value = data
   })
diff --git a/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldTable.vue b/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldTable.vue
index eeb31c42583..c40fb318385 100644
--- a/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldTable.vue
+++ b/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldTable.vue
@@ -45,7 +45,7 @@
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { cloneDeep, set } from 'lodash'
+import { cloneDeep } from 'lodash'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 
 import ParametersFieldDialog from './ParametersFieldDialog.vue'
@@ -64,24 +64,24 @@ const nodeProps = props.nodeModel.properties as unknown as {
 const inputFieldList = computed<Array<Record<string, unknown>>>({
   get: () => {
     if (!nodeProps.node_data) {
-      set(nodeProps, 'node_data', {})
+      nodeProps.node_data = {}
     }
     if (!Array.isArray(nodeProps.node_data.variable_list)) {
-      set(nodeProps.node_data, 'variable_list', [])
+      nodeProps.node_data.variable_list = []
     }
     return nodeProps.node_data.variable_list as Array<Record<string, unknown>>
   },
   set: (value) => {
-    set(nodeProps.node_data, 'variable_list', value)
+    nodeProps.node_data.variable_list = value
   },
 })
 
 function syncConfig() {
   const fields = [{ label: '结果', value: 'result' }, ...inputFieldList.value.map((item) => ({ label: item.label, value: item.field }))]
   if (!nodeProps.config) {
-    set(nodeProps, 'config', {})
+    nodeProps.config = {}
   }
-  set(nodeProps.config, 'fields', fields)
+  nodeProps.config.fields = fields
   props.nodeModel.clearNextNodeField(false)
 }
 
diff --git a/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.vue b/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.vue
index d0231cdb22e..607c1199950 100644
--- a/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.vue
@@ -57,7 +57,7 @@
 </template>
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef, watch } from 'vue'
-import { set } from 'lodash'
+
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
@@ -94,23 +94,23 @@ const providerOptions = ref<Array<ModelProviderItem>>([])
 const formData = computed<ParameterExtractionForm>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', {
+      model.properties.node_data = {
         input_variable: [],
         model_params_setting: {},
         model_id: '',
         model_id_type: 'custom',
         model_id_reference: [],
         variable_list: [],
-      })
+      }
     }
     const data = model.properties.node_data as ParameterExtractionForm
-    if (data.model_id_type === undefined) set(data, 'model_id_type', 'custom')
-    if (!Array.isArray(data.model_id_reference)) set(data, 'model_id_reference', [])
-    if (!data.model_params_setting) set(data, 'model_params_setting', {})
+    if (data.model_id_type === undefined) data.model_id_type = 'custom'
+    if (!Array.isArray(data.model_id_reference)) data.model_id_reference = []
+    if (!data.model_params_setting) data.model_params_setting = {}
     const shouldInit = data.input_variable !== undefined || data.variable_list !== undefined
     if (shouldInit) {
-      if (!Array.isArray(data.input_variable)) set(data, 'input_variable', [])
-      if (!Array.isArray(data.variable_list)) set(data, 'variable_list', [])
+      if (!Array.isArray(data.input_variable)) data.input_variable = []
+      if (!Array.isArray(data.variable_list)) data.variable_list = []
     }
     return data
   },
@@ -146,7 +146,7 @@ function validate() {
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   store.getModelList({ model_type: 'LLM' }).then((data) => {
     modelList.value = data
   })
diff --git a/ui/src/workflow-canvas/nodes/question-node/index.vue b/ui/src/workflow-canvas/nodes/question-node/index.vue
index 70f81ee2653..10d60806f2c 100644
--- a/ui/src/workflow-canvas/nodes/question-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/question-node/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
 import { QuestionFilled } from '@element-plus/icons-vue'
-import { set } from 'lodash'
+
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
@@ -36,7 +36,7 @@ const providerOptions = ref<Array<ModelProviderItem>>([])
 const formData = computed<QuestionNodeForm>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', {
+      model.properties.node_data = {
         model_id: '',
         model_id_type: 'custom',
         model_id_reference: [],
@@ -48,18 +48,18 @@ const formData = computed<QuestionNodeForm>({
         dialogue_type: 'WORKFLOW',
         dialogue_number: 1,
         model_params_setting: {},
-      })
+      }
     }
     const data = model.properties.node_data as QuestionNodeForm
-    if (data.model_id_type === undefined) set(data, 'model_id_type', 'custom')
-    if (!Array.isArray(data.model_id_reference)) set(data, 'model_id_reference', [])
-    if (data.system === undefined) set(data, 'system', '')
-    if (data.prompt === undefined) set(data, 'prompt', '{{开始.question}}')
-    if (data.dialogue_type === undefined) set(data, 'dialogue_type', 'WORKFLOW')
+    if (data.model_id_type === undefined) data.model_id_type = 'custom'
+    if (!Array.isArray(data.model_id_reference)) data.model_id_reference = []
+    if (data.system === undefined) data.system = ''
+    if (data.prompt === undefined) data.prompt = '{{开始.question}}'
+    if (data.dialogue_type === undefined) data.dialogue_type = 'WORKFLOW'
     if (data.dialogue_number === undefined || data.dialogue_number === null) {
-      set(data, 'dialogue_number', 1)
+      data.dialogue_number = 1
     }
-    if (!data.model_params_setting) set(data, 'model_params_setting', {})
+    if (!data.model_params_setting) data.model_params_setting = {}
     return data
   },
   set: (value) => (model.properties.node_data = value),
@@ -67,15 +67,13 @@ const formData = computed<QuestionNodeForm>({
 
 function validate() {
   return Promise.all([
-    formData.value.model_id_type === 'reference'
-      ? modelCascaderRef.value?.validate()
-      : Promise.resolve(),
+    formData.value.model_id_type === 'reference' ? modelCascaderRef.value?.validate() : Promise.resolve(),
     formRef.value?.validate(),
   ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   store.getModelList({ model_type: 'LLM' }).then((data) => {
     modelList.value = data
   })
diff --git a/ui/src/workflow-canvas/nodes/reply-node/index.vue b/ui/src/workflow-canvas/nodes/reply-node/index.vue
index 499ecd8ad59..717e281d616 100644
--- a/ui/src/workflow-canvas/nodes/reply-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/reply-node/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, useTemplateRef } from 'vue'
 
-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'
@@ -33,9 +32,10 @@ const formData = computed<ReplyNodeForm>({
 })
 
 function validate() {
-  return Promise.all([formData.value.reply_type === 'referencing' ? nodeCascaderRef.value?.validate() : Promise.resolve(), formRef.value?.validate()]).catch((error) =>
-    Promise.reject({ node: model, errMessage: error }),
-  )
+  return Promise.all([
+    formData.value.reply_type === 'referencing' ? nodeCascaderRef.value?.validate() : Promise.resolve(),
+    formRef.value?.validate(),
+  ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
diff --git a/ui/src/workflow-canvas/nodes/speech-to-text-node/index.vue b/ui/src/workflow-canvas/nodes/speech-to-text-node/index.vue
index 5f54e02c5cd..386655654cf 100644
--- a/ui/src/workflow-canvas/nodes/speech-to-text-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/speech-to-text-node/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
-import { set } from 'lodash'
+
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
@@ -33,19 +33,19 @@ const providerOptions = ref<Array<ModelProviderItem>>([])
 const formData = computed<SpeechToTextNodeForm>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', {
+      model.properties.node_data = {
         stt_model_id: '',
         stt_model_id_type: 'custom',
         stt_model_id_reference: [],
         audio_list: [],
         model_params_setting: {},
-      })
+      }
     }
     const data = model.properties.node_data as SpeechToTextNodeForm
-    if (data.stt_model_id_type === undefined) set(data, 'stt_model_id_type', 'custom')
-    if (!Array.isArray(data.stt_model_id_reference)) set(data, 'stt_model_id_reference', [])
-    if (!Array.isArray(data.audio_list)) set(data, 'audio_list', [])
-    if (!data.model_params_setting) set(data, 'model_params_setting', {})
+    if (data.stt_model_id_type === undefined) data.stt_model_id_type = 'custom'
+    if (!Array.isArray(data.stt_model_id_reference)) data.stt_model_id_reference = []
+    if (!Array.isArray(data.audio_list)) data.audio_list = []
+    if (!data.model_params_setting) data.model_params_setting = {}
     return data
   },
   set: (value) => (model.properties.node_data = value),
@@ -53,16 +53,14 @@ const formData = computed<SpeechToTextNodeForm>({
 
 function validate() {
   return Promise.all([
-    formData.value.stt_model_id_type === 'reference'
-      ? modelCascaderRef.value?.validate()
-      : Promise.resolve(),
+    formData.value.stt_model_id_type === 'reference' ? modelCascaderRef.value?.validate() : Promise.resolve(),
     contentCascaderRef.value?.validate(),
     formRef.value?.validate(),
   ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   store.getModelList({ model_type: 'STT' }).then((data) => {
     modelList.value = data
   })
diff --git a/ui/src/workflow-canvas/nodes/text-to-speech-node/index.vue b/ui/src/workflow-canvas/nodes/text-to-speech-node/index.vue
index 981dd9898c6..966e161fdd5 100644
--- a/ui/src/workflow-canvas/nodes/text-to-speech-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/text-to-speech-node/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
-import { set } from 'lodash'
+
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
@@ -33,19 +33,19 @@ const providerOptions = ref<Array<ModelProviderItem>>([])
 const formData = computed<TextToSpeechNodeForm>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', {
+      model.properties.node_data = {
         tts_model_id: '',
         tts_model_id_type: 'custom',
         tts_model_id_reference: [],
         content_list: [],
         model_params_setting: {},
-      })
+      }
     }
     const data = model.properties.node_data as TextToSpeechNodeForm
-    if (data.tts_model_id_type === undefined) set(data, 'tts_model_id_type', 'custom')
-    if (!Array.isArray(data.tts_model_id_reference)) set(data, 'tts_model_id_reference', [])
-    if (!Array.isArray(data.content_list)) set(data, 'content_list', [])
-    if (!data.model_params_setting) set(data, 'model_params_setting', {})
+    if (data.tts_model_id_type === undefined) data.tts_model_id_type = 'custom'
+    if (!Array.isArray(data.tts_model_id_reference)) data.tts_model_id_reference = []
+    if (!Array.isArray(data.content_list)) data.content_list = []
+    if (!data.model_params_setting) data.model_params_setting = {}
     return data
   },
   set: (value) => (model.properties.node_data = value),
diff --git a/ui/src/workflow-canvas/nodes/text-to-video-node/index.vue b/ui/src/workflow-canvas/nodes/text-to-video-node/index.vue
index 94d3d66e769..ad7d73d2287 100644
--- a/ui/src/workflow-canvas/nodes/text-to-video-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/text-to-video-node/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
-import { set } from 'lodash'
+
 import { QuestionFilled } from '@element-plus/icons-vue'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
@@ -34,21 +34,21 @@ const providerOptions = ref<Array<ModelProviderItem>>([])
 const formData = computed<TextToVideoNodeForm>({
   get: () => {
     if (!model.properties.node_data) {
-      set(model.properties, 'node_data', {
+      model.properties.node_data = {
         model_id: '',
         model_id_type: 'custom',
         model_id_reference: [],
         prompt: '{{开始.question}}',
         negative_prompt: '',
         model_params_setting: {},
-      })
+      }
     }
     const data = model.properties.node_data as TextToVideoNodeForm
-    if (data.model_id_type === undefined) set(data, 'model_id_type', 'custom')
-    if (!Array.isArray(data.model_id_reference)) set(data, 'model_id_reference', [])
-    if (data.prompt === undefined) set(data, 'prompt', '{{开始.question}}')
-    if (data.negative_prompt === undefined) set(data, 'negative_prompt', '')
-    if (!data.model_params_setting) set(data, 'model_params_setting', {})
+    if (data.model_id_type === undefined) data.model_id_type = 'custom'
+    if (!Array.isArray(data.model_id_reference)) data.model_id_reference = []
+    if (data.prompt === undefined) data.prompt = '{{开始.question}}'
+    if (data.negative_prompt === undefined) data.negative_prompt = ''
+    if (!data.model_params_setting) data.model_params_setting = {}
     return data
   },
   set: (value) => (model.properties.node_data = value),
@@ -56,15 +56,13 @@ const formData = computed<TextToVideoNodeForm>({
 
 function validate() {
   return Promise.all([
-    formData.value.model_id_type === 'reference'
-      ? modelCascaderRef.value?.validate()
-      : Promise.resolve(),
+    formData.value.model_id_type === 'reference' ? modelCascaderRef.value?.validate() : Promise.resolve(),
     formRef.value?.validate(),
   ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
-  set(model, 'validate', validate)
+  model.validate = validate
   store.getModelList({ model_type: 'TTV' }).then((data) => {
     modelList.value = data
   })
diff --git a/ui/src/workflow-canvas/nodes/variable-assign-node/index.vue b/ui/src/workflow-canvas/nodes/variable-assign-node/index.vue
index 466c7ac9143..3dcc0e7a236 100644
--- a/ui/src/workflow-canvas/nodes/variable-assign-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/variable-assign-node/index.vue
@@ -103,7 +103,7 @@
   </NodeContainer>
 </template>
 <script setup lang="ts">
-import { cloneDeep, set } from 'lodash'
+import { cloneDeep } from 'lodash'
 import type { BaseNodeModel } from '@logicflow/core'
 import type { FormInstance } from 'element-plus'
 import { inject, onMounted, ref, type Ref } from 'vue'
@@ -134,7 +134,7 @@ const typeOptions = ['string', 'num', 'json', 'bool']
 const defaultVariable = (): VariableItem => ({ id: randomId(), fields: [], value: null, reference: [], type: 'string', source: 'custom', name: '' })
 
 if (!model.properties.node_data) {
-  set(model.properties, 'node_data', { variable_list: [defaultVariable()] })
+  model.properties.node_data = { variable_list: [defaultVariable()] }
 }
 const form_data = model.properties.node_data as { variable_list: VariableItem[] }
 
@@ -164,7 +164,7 @@ const validate = () => {
 function addVariable() {
   const list = cloneDeep(form_data.variable_list)
   list.push(defaultVariable())
-  set(model.properties.node_data, 'variable_list', list)
+  model.properties.node_data.variable_list = list
 }
 
 function changeType(index: number) {
@@ -176,7 +176,7 @@ function changeType(index: number) {
 function deleteVariable(index: number) {
   const list = cloneDeep(form_data.variable_list)
   list.splice(index, 1)
-  set(model.properties.node_data, 'variable_list', list)
+  model.properties.node_data.variable_list = list
 }
 
 function variableChange(item: VariableItem) {
@@ -189,9 +189,9 @@ function variableChange(item: VariableItem) {
 
 onMounted(() => {
   if (model.properties.node_data?.is_result === undefined && isLastNode(model)) {
-    set(model.properties.node_data, 'is_result', true)
+    model.properties.node_data.is_result = true
   }
-  set(model, 'validate', validate)
+  model.validate = validate
 })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/workflow-canvas/style.scss b/ui/src/workflow-canvas/style.scss
index 8c5edfe700e..004f9b34ada 100644
--- a/ui/src/workflow-canvas/style.scss
+++ b/ui/src/workflow-canvas/style.scss
@@ -8,6 +8,7 @@
   cursor: pointer;
 }
 
+/* edge */
 // 连接线
 .workflow-edge-delete-wrapper {
   overflow: visible;
@@ -27,8 +28,9 @@
   }
 }
 
-// 连接节点按钮
 
+/* anchor */
+// 连接节点按钮
 .workflow-node-anchor-wrapper {
   overflow: visible;
 }
@@ -46,15 +48,18 @@
   transition: transform 0.2s ease;
   background: var(--el-color-primary);
   &.is-connected {
-    background: white;
+    background: white !important;
 
     .workflow-node-add-icon {
       opacity: 0;
     }
   }
   &.is-connected.is-right:hover {
-    background: var(--el-color-primary);
+    background: var(--el-color-primary) !important;
     transform: scale(1.17);
+    &.is-abnormal {
+      background: var(--el-color-warning) !important;
+    }
 
     .workflow-node-add-icon {
       opacity: 1;
@@ -63,6 +68,10 @@
   &:not(.is-connected):hover {
     transform: scale(1.17);
   }
+  &.is-abnormal {
+    background: var(--el-color-warning);
+    border: 2px solid var(--el-color-warning);
+  }
 
   .workflow-node-add-icon {
     height: calc(var(--spacing) * 6);