From 1e26ad6dd14105db6d721c32bc2b4e88361edbff Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Sun, 6 Sep 2026 21:08:09 +0800
Subject: [PATCH] feat: form node

---
 ui/src/assets/workflow/icon_form.svg          |   7 +
 ui/src/components/COMPONENT_README.md         |   5 +
 .../markdown-editor/MdEditorMagnify.vue       |   9 +-
 ui/src/components/mk-dynamics-form/Demo.vue   |   2 -
 .../components/mk-dynamics-form/constant.ts   |  13 +
 .../mk-dynamics-form/constructor/index.vue    |  45 ++-
 .../items/JsonInputConstructor.vue            |  12 +-
 .../constructor/items/MultiRowConstructor.vue |  19 +-
 .../items/MultiSelectConstructor.vue          |  18 +-
 .../items/RadioCardConstructor.vue            |  18 +-
 .../constructor/items/RadioRowConstructor.vue |  18 +-
 .../items/SingleSelectConstructor.vue         |  20 +-
 .../constructor/visibility/ConditionRow.vue   |  25 +-
 .../constructor/visibility/FieldSelector.vue  |  22 +-
 .../constructor/visibility/index.vue          |  26 +-
 ui/src/workflow-canvas/WORKFLOW_README.md     |   8 +
 ui/src/workflow-canvas/config/node-data.ts    |   8 +-
 .../workflow-canvas/icons/form-node-icon.vue  |   4 +-
 .../base-node/component/user-input/index.vue  |   9 +-
 .../workflow-canvas/nodes/base-node/index.vue |  98 +++--
 .../form-setting/FormFieldDialog.vue          |  70 ++++
 .../form-setting/FormSettingTable.vue         | 118 ++++++
 .../workflow-canvas/nodes/form-node/index.ts  |  10 +-
 .../workflow-canvas/nodes/form-node/index.vue | 341 +++++-------------
 .../nodes/variable-aggregation-node/index.ts  |   5 +-
 25 files changed, 492 insertions(+), 438 deletions(-)
 create mode 100644 ui/src/assets/workflow/icon_form.svg
 create mode 100644 ui/src/workflow-canvas/nodes/form-node/component/form-setting/FormFieldDialog.vue
 create mode 100644 ui/src/workflow-canvas/nodes/form-node/component/form-setting/FormSettingTable.vue

diff --git a/ui/src/assets/workflow/icon_form.svg b/ui/src/assets/workflow/icon_form.svg
new file mode 100644
index 00000000000..19d148d1ea2
--- /dev/null
+++ b/ui/src/assets/workflow/icon_form.svg
@@ -0,0 +1,7 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.80344 14.375H1.875C1.70924 14.375 1.55027 14.3092 1.43306 14.1919C1.31585 14.0747 1.25 13.9158 1.25 13.75V1.25C1.25 1.08424 1.31585 0.925269 1.43306 0.808059C1.55027 0.690849 1.70924 0.625 1.875 0.625H11.875C12.0408 0.625 12.1997 0.690849 12.3169 0.808059C12.4342 0.925269 12.5 1.08424 12.5 1.25V5.67781C12.5 5.84351 12.4343 6.00245 12.3172 6.11969L4.24563 14.1919C4.18757 14.25 4.11863 14.296 4.04275 14.3274C3.96688 14.3589 3.88556 14.375 3.80344 14.375ZM4.15403 7.40847C4.21263 7.46708 4.29212 7.5 4.375 7.5H7.5C7.58288 7.5 7.66237 7.46708 7.72097 7.40847C7.77958 7.34987 7.8125 7.27038 7.8125 7.1875V6.5625C7.8125 6.47962 7.77958 6.40013 7.72097 6.34153C7.66237 6.28292 7.58288 6.25 7.5 6.25H4.375C4.29212 6.25 4.21263 6.28292 4.15403 6.34153C4.09542 6.40013 4.0625 6.47962 4.0625 6.5625V7.1875C4.0625 7.27038 4.09542 7.34987 4.15403 7.40847ZM4.15403 4.28347C4.21263 4.34208 4.29212 4.375 4.375 4.375H9.6875C9.72854 4.375 9.76917 4.36692 9.80709 4.35121C9.845 4.33551 9.87945 4.31249 9.90847 4.28347C9.93749 4.25445 9.96051 4.22 9.97621 4.18209C9.99192 4.14417 10 4.10354 10 4.0625V3.4375C10 3.39646 9.99192 3.35583 9.97621 3.31791C9.96051 3.28 9.93749 3.24555 9.90847 3.21653C9.87945 3.18751 9.845 3.16449 9.80709 3.14879C9.76917 3.13308 9.72854 3.125 9.6875 3.125H4.375C4.29212 3.125 4.21263 3.15792 4.15403 3.21653C4.09542 3.27513 4.0625 3.35462 4.0625 3.4375V4.0625C4.0625 4.14538 4.09542 4.22487 4.15403 4.28347Z" fill="white"/>
+<g opacity="0.5">
+<path d="M12.7171 10.7982L10.9544 9.03572L7.08094 12.9338L6.875 14.6041C6.875 14.6869 6.90792 14.7664 6.96653 14.825C7.02513 14.8836 7.10462 14.9166 7.1875 14.9166L8.85994 14.6503L12.7171 10.7982Z" fill="white"/>
+<path d="M13.1706 7.6961C12.9268 7.45204 12.5503 7.43329 12.329 7.65391L11.3946 8.59141L13.1596 10.3563L14.0949 9.4226L14.1246 9.39072C14.3146 9.16697 14.2871 8.8126 14.0542 8.57947L13.1706 7.6961Z" fill="white"/>
+</g>
+</svg>
diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 180eaee7316..83150c534b0 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -1084,6 +1084,11 @@ const formValue = ref<Dict<DynamicFormValue>>({})
 `enableVisibility` 和 `leftOptions`，其中 `leftOptions` 使用 `VisibilityFieldOption[]`；公开
 `validate()`、`getData()` 与 `render()`。
 
+启用显隐设置时，配置器将 Tabs 导航与内容分开，只继承容器的最大高度，内容较少时自然撑开。
+`el-scrollbar` 及其内部滚动容器使用可收缩的 Flex 布局，并覆盖默认的百分比高度；达到最大高度后
+仅内容区滚动，Tabs 保持固定。普通 `MkDialog` 已提供内容最大高度，调用方不需要设置固定高度。
+两个表单通过 `v-show` 切换并保持挂载，确保未选中的页签也能回填、取值和校验。
+
 字段配置中的动态校验器和表格行表达式属于受信任的服务端协议，只允许加载可信配置；普通业务
 输入不得作为脚本传入。
 
diff --git a/ui/src/components/global/markdown-editor/MdEditorMagnify.vue b/ui/src/components/global/markdown-editor/MdEditorMagnify.vue
index cc932bf0402..15ec251c2b0 100644
--- a/ui/src/components/global/markdown-editor/MdEditorMagnify.vue
+++ b/ui/src/components/global/markdown-editor/MdEditorMagnify.vue
@@ -59,7 +59,14 @@ async function submitEditorDialog() {
   </MdEditor>
 
   <MkDialog v-model="dialogVisible" :title="title" align-center>
-    <MdEditor v-model="dialogContent" :preview="false" :toolbars="[]" :footers="[]" class="magnify-dialog-editor" />
+    <MdEditor
+      v-model="dialogContent"
+      :preview="false"
+      :toolbars="[]"
+      :footers="[]"
+      style="height: calc(100vh - 350px)"
+      class="magnify-dialog-editor"
+    />
 
     <template #footer>
       <el-button type="primary" @click="submitEditorDialog">确定</el-button>
diff --git a/ui/src/components/mk-dynamics-form/Demo.vue b/ui/src/components/mk-dynamics-form/Demo.vue
index 843223a4441..cf063eda182 100644
--- a/ui/src/components/mk-dynamics-form/Demo.vue
+++ b/ui/src/components/mk-dynamics-form/Demo.vue
@@ -167,8 +167,6 @@ const validateForm = async () => {
       v-model="currentField"
       :enable-visibility="true"
       :left-options="visibilityFieldOptions"
-      label-position="top"
-      require-asterisk-position="right"
     />
     <template #footer>
       <el-button @click="dialogVisible = false">取消</el-button>
diff --git a/ui/src/components/mk-dynamics-form/constant.ts b/ui/src/components/mk-dynamics-form/constant.ts
index 7e3394c5c8f..056eaf1e6df 100644
--- a/ui/src/components/mk-dynamics-form/constant.ts
+++ b/ui/src/components/mk-dynamics-form/constant.ts
@@ -19,3 +19,16 @@ export const dynamicFormTypeOptions = [
 
 export type DynamicFormInputType = (typeof dynamicFormTypeOptions)[number]['value']
 export type DynamicFormTypeOption = (typeof dynamicFormTypeOptions)[number]
+
+// 引用变量为选择类字段提供选项时的格式说明。
+export const referenceOptionsHelp = `变量的值必须符合:
+[
+  {
+    "label": "xx",
+    "value": "xx",
+    "default": false
+  }
+]
+label: 标签 必填
+value: 值 必填
+default: 是否为默认值`
diff --git a/ui/src/components/mk-dynamics-form/constructor/index.vue b/ui/src/components/mk-dynamics-form/constructor/index.vue
index 576b0e6c783..a8b73bb0755 100644
--- a/ui/src/components/mk-dynamics-form/constructor/index.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/index.vue
@@ -3,7 +3,14 @@ import { onMounted, ref, nextTick } from 'vue'
 import { dynamicFormTypeOptions } from '@/components/mk-dynamics-form/constant'
 import VisibilityConstructor from './visibility/index.vue'
 import BasicInfoConstructor from './BasicInfoConstructor.vue'
-import type { DynamicFormConstructorExpose, DynamicFormConstructorOption, DynamicFormConstructorState, FormField, VisibilityFieldOption, VisibilityRules } from '../type'
+import type {
+  DynamicFormConstructorExpose,
+  DynamicFormConstructorOption,
+  DynamicFormConstructorState,
+  FormField,
+  VisibilityFieldOption,
+  VisibilityRules,
+} from '../type'
 
 interface VisibilityConstructorExpose {
   getData: () => VisibilityRules | null
@@ -17,8 +24,20 @@ defineOptions({ name: 'MkDynamicsFormConstructor', inheritAttrs: false })
 defineEmits<{ (event: 'update:modelValue', value: Partial<FormField>): void }>()
 
 const props = withDefaults(
-  defineProps<{ modelValue?: Partial<FormField>; fieldTypeOptions?: DynamicFormConstructorOption[]; enableVisibility?: boolean; leftOptions?: VisibilityFieldOption[] }>(),
-  { enableVisibility: false, fieldTypeOptions: () => dynamicFormTypeOptions.map((item) => ({ label: item.label, value: `${item.value}Constructor` })) },
+  defineProps<{
+    modelValue?: Partial<FormField>
+    // “基本信息”中可选的组件类型；不传时使用全部默认类型，value 使用带 Constructor 后缀的配置器名称。
+    fieldTypeOptions?: DynamicFormConstructorOption[]
+    // 是否展示“显隐设置”页签，默认关闭。
+    enableVisibility?: boolean
+    // “显隐设置”中条件左侧可引用的变量，启用显隐设置时使用；变量类型和选项用于匹配比较方式及值输入控件。
+    // 由调用方提供可引用范围，例如上游节点字段、当前字段之前的表单字段，不控制可选的组件类型。
+    leftOptions?: VisibilityFieldOption[]
+  }>(),
+  {
+    enableVisibility: false,
+    fieldTypeOptions: () => dynamicFormTypeOptions.map((item) => ({ label: item.label, value: `${item.value}Constructor` })),
+  },
 )
 
 const activeTab = ref('basic')
@@ -68,14 +87,18 @@ defineExpose({ getData, validate, render })
 </script>
 
 <template>
-  <el-tabs v-if="enableVisibility" v-model="activeTab">
-    <el-tab-pane label="基本信息" name="basic">
-      <BasicInfoConstructor ref="basicRef" v-model="formData" :input-type-list="fieldTypeOptions" v-bind="$attrs" />
-    </el-tab-pane>
-    <el-tab-pane label="显隐设置" name="visibility">
-      <VisibilityConstructor ref="visibilityRef" :initial-value="visibilityRules" :left-options="leftOptions" />
-    </el-tab-pane>
-  </el-tabs>
+  <div v-if="enableVisibility" class="flex max-h-[inherit] min-h-0 flex-col">
+    <el-tabs v-model="activeTab" class="shrink-0">
+      <el-tab-pane label="基本信息" name="basic" />
+      <el-tab-pane label="显隐设置" name="visibility" />
+    </el-tabs>
+
+    <!-- 导航固定，内容独立滚动；两个表单保持挂载，供统一回填、取值和校验。 -->
+    <el-scrollbar class="mk-scrollbar-right mt-4 flex h-auto! min-h-0 flex-auto flex-col" wrap-class="h-auto! min-h-0 flex-auto">
+      <BasicInfoConstructor v-show="activeTab === 'basic'" ref="basicRef" v-model="formData" :input-type-list="fieldTypeOptions" v-bind="$attrs" />
+      <VisibilityConstructor v-show="activeTab === 'visibility'" ref="visibilityRef" :initial-value="visibilityRules" :left-options="leftOptions" />
+    </el-scrollbar>
+  </div>
 
   <BasicInfoConstructor v-else ref="basicRef" v-model="formData" :input-type-list="fieldTypeOptions" v-bind="$attrs" />
 </template>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/JsonInputConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/JsonInputConstructor.vue
index 9804986f554..1beda4df8c6 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/JsonInputConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/JsonInputConstructor.vue
@@ -89,21 +89,25 @@ onMounted(() => {
 
 <template>
   <el-form-item v-if="getModel" label="赋值方式">
-    <!-- // TODO 赋值方式待调整 -->
     <el-radio-group v-model="formValue.default_value_assignment_method">
       <el-radio :value="item.value" v-for="(item, index) in assignmentMethodOptions" :key="index">
-        <span class="flex align-center">
+        <span class="flex items-center gap-1">
           {{ item.label }}
 
           <el-tooltip placement="right" v-if="item.value === 'ref_variables'">
             <template #content> 变量的值必须符合: JSON 格式 </template>
-            <MkIcon name="icon_info_outlined"></MkIcon>
+            <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
           </el-tooltip>
         </span>
       </el-radio>
     </el-radio-group>
   </el-form-item>
-  <el-form-item v-if="formValue.default_value_assignment_method === 'ref_variables'" :required="true" prop="default_value" :rules="[referenceVariableRule]">
+  <el-form-item
+    v-if="formValue.default_value_assignment_method === 'ref_variables'"
+    :required="true"
+    prop="default_value"
+    :rules="[referenceVariableRule]"
+  >
     <NodeCascader ref="nodeCascaderRef" :nodeModel="model" placeholder="请选择变量" v-model="formValue.option_list" />
   </el-form-item>
 
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/MultiRowConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/MultiRowConstructor.vue
index e53d584c27e..755ce39638e 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/MultiRowConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/MultiRowConstructor.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { referenceOptionsHelp } from '../../constant'
 import { computed, onMounted, inject } from 'vue'
 import MultiRow from '@/components/mk-dynamics-form/items/MultiRow.vue'
 import MkFormList from '@/components/mk-form-list/index.vue'
@@ -86,27 +87,15 @@ onMounted(() => {
 
 <template>
   <el-form-item v-if="getModel" label="赋值方式">
-    <!-- // TODO 赋值方式待调整 -->
     <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
       <el-radio :value="item.value" v-for="(item, index) in assignmentMethodOptions" :key="index">
-        <span class="flex align-center">
+        <span class="flex items-center gap-1">
           {{ item.label }}
-
           <el-tooltip placement="right" v-if="item.value === 'ref_variables'">
             <template #content>
-              变量的值必须符合:<br />
-              [<br />
-              {<br />
-              "label": "xx",<br />
-              "value": "xx",<br />
-              "default": false<br />
-              }<br />
-              ]<br />
-              label: 标签 必填<br />
-              value: 值 必填<br />
-              default: 是否为默认值
+              <div class="whitespace-pre-wrap">{{ referenceOptionsHelp }}</div>
             </template>
-            <MkIcon name="icon_info_outlined"></MkIcon>
+            <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
           </el-tooltip>
         </span>
       </el-radio>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/MultiSelectConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/MultiSelectConstructor.vue
index a046ec5a9f9..c65f6da2b31 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/MultiSelectConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { referenceOptionsHelp } from '../../constant'
 import { computed, onMounted, inject } from 'vue'
 import MkFormList from '@/components/mk-form-list/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
@@ -99,27 +100,16 @@ onMounted(() => {
 
 <template>
   <el-form-item v-if="getModel" label="赋值方式">
-    <!-- // TODO 赋值方式待调整 -->
     <el-radio-group @change="resetOptions" v-model="formValue.assignment_method">
       <el-radio :value="item.value" v-for="(item, index) in assignmentMethodOptions" :key="index">
-        <span class="flex align-center">
+        <span class="flex items-center gap-1">
           {{ item.label }}
 
           <el-tooltip placement="right" v-if="item.value === 'ref_variables'">
             <template #content>
-              变量的值必须符合:<br />
-              [<br />
-              {<br />
-              "label": "xx",<br />
-              "value": "xx",<br />
-              "default": false<br />
-              }<br />
-              ]<br />
-              label: 标签 必填<br />
-              value: 值 必填<br />
-              default: 是否为默认值
+              <div class="whitespace-pre-wrap">{{ referenceOptionsHelp }}</div>
             </template>
-            <MkIcon name="icon_info_outlined"></MkIcon>
+            <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
           </el-tooltip>
         </span>
       </el-radio>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/RadioCardConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/RadioCardConstructor.vue
index c81ffc82755..ca4722eefc1 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/RadioCardConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/RadioCardConstructor.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { referenceOptionsHelp } from '../../constant'
 import { computed, onMounted, inject } from 'vue'
 import RadioCard from '@/components/mk-dynamics-form/items/radio/RadioCard.vue'
 import MkFormList from '@/components/mk-form-list/index.vue'
@@ -101,27 +102,16 @@ onMounted(() => {
 
 <template>
   <el-form-item v-if="getModel" label="赋值方式">
-    <!-- // TODO 赋值方式待调整 -->
     <el-radio-group @change="resetOptions" v-model="formValue.assignment_method">
       <el-radio :value="item.value" v-for="(item, index) in assignmentMethodOptions" :key="index">
-        <span class="flex align-center">
+        <span class="flex items-center gap-1">
           {{ item.label }}
 
           <el-tooltip placement="right" v-if="item.value === 'ref_variables'">
             <template #content>
-              变量的值必须符合:<br />
-              [<br />
-              {<br />
-              "label": "xx",<br />
-              "value": "xx",<br />
-              "default": false<br />
-              }<br />
-              ]<br />
-              label: 标签 必填<br />
-              value: 值 必填<br />
-              default: 是否为默认值
+              <div class="whitespace-pre-wrap">{{ referenceOptionsHelp }}</div>
             </template>
-            <MkIcon name="icon_info_outlined"></MkIcon>
+            <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
           </el-tooltip>
         </span>
       </el-radio>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/RadioRowConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/RadioRowConstructor.vue
index e7713c341a3..3e4f72b7f6a 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/RadioRowConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/RadioRowConstructor.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { referenceOptionsHelp } from '../../constant'
 import { computed, onMounted, inject } from 'vue'
 import RadioRow from '@/components/mk-dynamics-form/items/radio/RadioRow.vue'
 import MkFormList from '@/components/mk-form-list/index.vue'
@@ -87,27 +88,16 @@ onMounted(() => {
 
 <template>
   <el-form-item v-if="getModel" label="赋值方式">
-    <!-- // TODO 赋值方式待调整 -->
     <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
       <el-radio :value="item.value" v-for="(item, index) in assignmentMethodOptions" :key="index">
-        <span class="flex align-center">
+        <span class="flex items-center gap-1">
           {{ item.label }}
 
           <el-tooltip placement="right" v-if="item.value === 'ref_variables'">
             <template #content>
-              变量的值必须符合:<br />
-              [<br />
-              {<br />
-              "label": "xx",<br />
-              "value": "xx",<br />
-              "default": false<br />
-              }<br />
-              ]<br />
-              label: 标签 必填<br />
-              value: 值 必填<br />
-              default: 是否为默认值
+              <div class="whitespace-pre-wrap">{{ referenceOptionsHelp }}</div>
             </template>
-            <MkIcon name="icon_info_outlined"></MkIcon>
+            <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
           </el-tooltip>
         </span>
       </el-radio>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/SingleSelectConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/SingleSelectConstructor.vue
index e8b27de1691..9e04ebc53bc 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/SingleSelectConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/SingleSelectConstructor.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { referenceOptionsHelp } from '../../constant'
 import type { DynamicFormConstructorOption, DynamicFormValidatorCallback, DynamicFormValue } from '../../type'
 import { computed, onMounted, inject } from 'vue'
 import MkFormList from '@/components/mk-form-list/index.vue'
@@ -101,26 +102,15 @@ onMounted(() => {
 <template>
   <el-form-item v-if="getModel" label="赋值方式">
     <el-radio-group @change="resetOptions" v-model="formValue.assignment_method">
-      <!-- // TODO 赋值方式待调整 -->
       <el-radio :value="item.value" v-for="(item, index) in assignmentMethodOptions" :key="index">
-        <span class="flex align-center">
+        <span class="flex items-center gap-1">
           {{ item.label }}
 
           <el-tooltip placement="right" v-if="item.value === 'ref_variables'">
             <template #content>
-              变量的值必须符合:<br />
-              [<br />
-              {<br />
-              "label": "xx",<br />
-              "value": "xx",<br />
-              "default": false<br />
-              }<br />
-              ]<br />
-              label: 标签 必填<br />
-              value: 值 必填<br />
-              default: 是否为默认值
+              <div class="whitespace-pre-wrap">{{ referenceOptionsHelp }}</div>
             </template>
-            <MkIcon name="icon_info_outlined"></MkIcon>
+            <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
           </el-tooltip>
         </span>
       </el-radio>
@@ -143,7 +133,7 @@ onMounted(() => {
           <el-form-item
             :label="index === 0 ? '标签' : ''"
             :prop="`option_list.${index}.label`"
-            :rules="[{ required: formValue.required,  message: '请输入标签', trigger: ['blur', 'change'] }]"
+            :rules="[{ required: formValue.required, message: '请输入标签', trigger: ['blur', 'change'] }]"
             class="flex-1 small"
           >
             <el-input v-model="option.label" placeholder="请输入标签" />
diff --git a/ui/src/components/mk-dynamics-form/constructor/visibility/ConditionRow.vue b/ui/src/components/mk-dynamics-form/constructor/visibility/ConditionRow.vue
index 0d786530cec..12599de14da 100644
--- a/ui/src/components/mk-dynamics-form/constructor/visibility/ConditionRow.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/visibility/ConditionRow.vue
@@ -33,28 +33,35 @@ function handleFieldChange() {
 </script>
 
 <template>
-  <el-form-item class="min-w-0 flex-[10_1_0%]" :error="condition._fieldError">
-    <FieldSelector v-model="condition.field" :left-options="leftOptions" class="w-full" placeholder="请选择变量" @change="handleFieldChange" />
+  <el-form-item class="small min-w-0 flex-10" :error="condition._fieldError">
+    <FieldSelector v-model="condition.field" :left-options="leftOptions" placeholder="请选择变量" @change="handleFieldChange" />
   </el-form-item>
 
-  <el-form-item class="min-w-0 flex-[6_1_0%]" :error="condition._compareError">
-    <el-select v-model="condition.compare" clearable placeholder="请选择比较方式" @change="condition._compareError = ''">
+  <el-form-item class="small min-w-0 flex-6" :error="condition._compareError">
+    <el-select v-model="condition.compare" clearable placeholder="请选择" @change="condition._compareError = ''">
       <el-option v-for="operation in condition._ops || compareList" :key="operation.value" :label="operation.label" :value="operation.value" />
     </el-select>
   </el-form-item>
 
-  <el-form-item v-if="!['is_true', 'is_not_true'].includes(condition.compare)" class="min-w-0 flex-[6_1_0%]" :error="condition._valueError">
+  <el-form-item v-if="!['is_true', 'is_not_true'].includes(condition.compare)" class="small min-w-0 flex-6" :error="condition._valueError">
     <el-select
       v-if="['SingleSelect', 'RadioCard', 'RadioRow'].includes(condition._fieldType || '')"
       v-model="condition.value"
       clearable
-      placeholder="请输入比较值"
+      placeholder="请输入选项值"
       @change="condition._valueError = ''"
     >
       <el-option v-for="option in condition._options || []" :key="option.value" :label="`${option.label} (${option.value})`" :value="option.value" />
     </el-select>
 
-    <el-select v-else-if="condition._fieldType === 'MultiSelect'" v-model="condition.value" clearable multiple placeholder="请输入比较值" @change="condition._valueError = ''">
+    <el-select
+      v-else-if="condition._fieldType === 'MultiSelect'"
+      v-model="condition.value"
+      clearable
+      multiple
+      placeholder="请输入选项值"
+      @change="condition._valueError = ''"
+    >
       <el-option v-for="option in condition._options || []" :key="option.value" :label="`${option.label} (${option.value})`" :value="option.value" />
     </el-select>
 
@@ -65,10 +72,10 @@ function handleFieldChange() {
       :multiple="condition._treeMultiple"
       :render-after-expand="false"
       clearable
-      placeholder="请输入比较值"
+      placeholder="请输入选项值"
       @change="condition._valueError = ''"
     />
 
-    <el-input v-else v-model="condition.value" placeholder="请输入比较值" @input="condition._valueError = ''" />
+    <el-input v-else v-model="condition.value" placeholder="请输入选项值" @input="condition._valueError = ''" />
   </el-form-item>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/constructor/visibility/FieldSelector.vue b/ui/src/components/mk-dynamics-form/constructor/visibility/FieldSelector.vue
index 8cf6af481ed..855d0dd84d0 100644
--- a/ui/src/components/mk-dynamics-form/constructor/visibility/FieldSelector.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/visibility/FieldSelector.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { VisibilityFieldOption } from '../../type'
 import { handleNodeWheel } from '@/workflow-canvas/core/utils'
+import { iconComponent } from '@/workflow-canvas/icons/utils'
 const props = defineProps<{ modelValue: string[]; leftOptions?: VisibilityFieldOption[] }>()
 
 const emit = defineEmits(['update:modelValue', 'change'])
@@ -16,6 +17,14 @@ const data = computed({
 })
 const options = computed<VisibilityFieldOption[]>(() => props.leftOptions ?? [])
 
+const selectedNodeField = computed(() => {
+  const [nodeValue, fieldValue] = data.value ?? []
+  if (!nodeValue || !fieldValue) return undefined
+
+  const fieldGroup = options.value.find((field) => field.value === nodeValue)
+  return fieldGroup?.children?.some((field) => field.value === fieldValue) ? fieldGroup : undefined
+})
+
 const validate = () => {
   if (!data.value || data.value.length === 0) {
     return Promise.reject('请选择引用变量')
@@ -40,12 +49,15 @@ defineExpose({ validate })
 </script>
 
 <template>
-  <el-cascader @wheel="handleNodeWheel" :teleported="true" :options="options" v-bind="$attrs" v-model="data" separator=" > " clearable>
+  <el-cascader class="w-full" @wheel="handleNodeWheel" :teleported="true" :options="options" v-bind="$attrs" v-model="data" separator=" > " clearable>
+    <template v-if="selectedNodeField" #prefix>
+      <component :is="iconComponent(`${selectedNodeField.type}-icon`)" :size="20" :item="selectedNodeField" class="small" />
+    </template>
     <template #default="{ data }">
-      <span class="flex align-center" @wheel="handleNodeWheel">
-        <!-- // TODO 不确定icon -->
-        <component v-if="data.icon" :is="data.icon" class="mr-8" :size="18" :item="data" />{{ data.label }}</span
-      >
+      <span class="flex items-center gap-1" @wheel="handleNodeWheel">
+        <component :is="iconComponent(`${data.type}-icon`)" :size="16" :item="data" class="small" />
+        <span>{{ data.label }}</span>
+      </span>
     </template>
   </el-cascader>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/constructor/visibility/index.vue b/ui/src/components/mk-dynamics-form/constructor/visibility/index.vue
index c7e608fd139..16119f6b045 100644
--- a/ui/src/components/mk-dynamics-form/constructor/visibility/index.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/visibility/index.vue
@@ -112,29 +112,25 @@ defineExpose({ getData, render, validate })
 </script>
 
 <template>
-  <div class="w-full space-y-4">
+  <div class="w-full">
     <el-radio-group v-model="formData.action">
       <el-radio value="show">显示条件</el-radio>
       <el-radio value="hide">隐藏条件</el-radio>
     </el-radio-group>
 
-    <div class="flex align-center gap-2">
-      <span class="lighter">满足</span>
+    <div class="flex align-center gap-2 my-2">
+      <span>符合以下</span>
       <el-select v-model="formData.condition" size="small" class="w-20!">
-        <el-option label="且" value="and" />
-        <el-option label="或" value="or" />
+        <el-option label="所有" value="and" />
+        <el-option label="任意" value="or" />
       </el-select>
-      <span class="lighter">条件</span>
+      <span>条件</span>
     </div>
 
-    <el-scrollbar>
-      <div style="max-height: calc(100vh - 400px)">
-        <MkFormList v-model="conditionRows" :default-item="defaultCondition" :firstRowHasLabel="false">
-          <template #default="{ item: condition }">
-            <ConditionRow :model-value="condition" :left-options="leftOptions" />
-          </template>
-        </MkFormList>
-      </div>
-    </el-scrollbar>
+    <MkFormList v-model="conditionRows" :default-item="defaultCondition" :firstRowHasLabel="false">
+      <template #default="{ item: condition }">
+        <ConditionRow :model-value="condition" :left-options="leftOptions" />
+      </template>
+    </MkFormList>
   </div>
 </template>
diff --git a/ui/src/workflow-canvas/WORKFLOW_README.md b/ui/src/workflow-canvas/WORKFLOW_README.md
index d711bf94631..2d18744843a 100644
--- a/ui/src/workflow-canvas/WORKFLOW_README.md
+++ b/ui/src/workflow-canvas/WORKFLOW_README.md
@@ -128,6 +128,14 @@ Vue Teleport 节点继承页面上下文；画布核心不负责模型参数接
 保留失效引用检查；节点级 `validate()` 统一调用表单校验。所有非登录表单仅使用 `@submit.prevent`，
 保存或添加由按钮触发。
 
+表单收集节点的 `component/form-setting/FormSettingTable` 通过 `v-model` 编辑动态表单的
+`FormField[]`，负责增删改、排序和重名检查；`FormFieldDialog` 复用 `MkDynamicsFormConstructor`，
+通过 `submit(data, index?)` 提交，由表格写回后调用 `close()`，关闭动画结束时重置编辑状态。
+节点入口负责旧数据默认值补齐、输出字段同步、下游引用清理和显隐条件引用校验；上游字段选项与
+节点 ID、名称通过 Props 传入，弹窗只补充当前编辑字段之前的表单字段，不直接读取节点模型。
+当前表单的显隐引用使用真实节点 ID，与 v2 的引用路径一致；保留 `self` 标记供动态表单从本地值取数。
+节点初始化时将旧 `self-form` 引用转换为当前节点 ID，并为 v2 的当前节点引用补齐 `self`，不改动上游引用。
+
 AI 对话节点的提示词、历史记录、视觉理解和输出思考表单直接在节点入口维护，统一使用全局
 `MdEditorMagnify` 和节点表单样式；AI 提示词生成与思考过程配置仍使用独立弹窗。
 问题优化、图片理解和视频理解节点的系统提示词与用户提示词，以及图片、文生视频和图生视频
diff --git a/ui/src/workflow-canvas/config/node-data.ts b/ui/src/workflow-canvas/config/node-data.ts
index ace1b8a5fbb..24040239bd0 100644
--- a/ui/src/workflow-canvas/config/node-data.ts
+++ b/ui/src/workflow-canvas/config/node-data.ts
@@ -231,9 +231,7 @@ export const formNode = {
   type: WorkflowNodeType.FormNode,
   text: '在问答过程中用于收集用户信息，可以根据收集到表单数据执行后续流程',
   label: '表单收集',
-  height: 252,
   properties: {
-    width: 600,
     stepName: '表单收集',
     node_data: {
       is_result: true,
@@ -251,7 +249,7 @@ export const variableAssignNode = {
   type: WorkflowNodeType.VariableAssignNode,
   text: '更新全局变量的值',
   label: '变量赋值',
-  properties: { stepName: '变量赋值', width: 455, config: {} },
+  properties: { stepName: '变量赋值', config: {} },
 }
 
 /* 变量聚合 */
@@ -267,7 +265,7 @@ export const variableSplittingNode = {
   type: WorkflowNodeType.VariableSplittingNode,
   text: '通过配置JSON Path 表达式，对输入的 JSON 格式变量进行解析和拆分',
   label: '变量拆分',
-  properties: { stepName: '变量拆分', width: 455, config: { fields: [{ label: '结果', value: 'result' }] } },
+  properties: { stepName: '变量拆分', config: { fields: [{ label: '结果', value: 'result' }] } },
 }
 
 /* 参数提取 */
@@ -275,7 +273,7 @@ export const parameterExtractionNode = {
   type: WorkflowNodeType.ParameterExtractionNode,
   text: '利用 AI 模型提取结构化参数',
   label: '参数提取',
-  properties: { stepName: '参数提取', width: 455, config: { fields: [{ label: '结果', value: 'result' }] } },
+  properties: { stepName: '参数提取', config: { fields: [{ label: '结果', value: 'result' }] } },
 }
 
 /* 多路召回 */
diff --git a/ui/src/workflow-canvas/icons/form-node-icon.vue b/ui/src/workflow-canvas/icons/form-node-icon.vue
index 7a220814144..c78df116a92 100644
--- a/ui/src/workflow-canvas/icons/form-node-icon.vue
+++ b/ui/src/workflow-canvas/icons/form-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-avatar class="avatar-gradient" shape="square">
-    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 75%" alt="" />
+  <el-avatar class="bg-success!" shape="square">
+    <img src="@/assets/workflow/icon_form.svg" style="width: 64%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/nodes/base-node/component/user-input/index.vue b/ui/src/workflow-canvas/nodes/base-node/component/user-input/index.vue
index a7e7ebd2c4e..705c837d44a 100644
--- a/ui/src/workflow-canvas/nodes/base-node/component/user-input/index.vue
+++ b/ui/src/workflow-canvas/nodes/base-node/component/user-input/index.vue
@@ -146,14 +146,7 @@ function submitSetting() {
   </section>
 
   <MkDialog v-model="fieldDialogVisible" :title="editingIndex === undefined ? '添加用户输入参数' : '编辑用户输入参数'" width="700">
-    <MkDynamicsFormConstructor
-      ref="constructorRef"
-      v-model="currentField"
-      enable-visibility
-      :left-options="visibilityOptions"
-      label-position="top"
-      require-asterisk-position="right"
-    />
+    <MkDynamicsFormConstructor ref="constructorRef" v-model="currentField" enable-visibility :left-options="visibilityOptions" />
     <template #footer>
       <el-button @click="fieldDialogVisible = false">取消</el-button>
       <el-button type="primary" @click="submitField">{{ editingIndex === undefined ? '添加' : '保存' }}</el-button>
diff --git a/ui/src/workflow-canvas/nodes/base-node/index.vue b/ui/src/workflow-canvas/nodes/base-node/index.vue
index 5a0bcd41d40..edc0aad584c 100644
--- a/ui/src/workflow-canvas/nodes/base-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/base-node/index.vue
@@ -250,41 +250,39 @@ onMounted(() => {
       <ConversationVariable :fields="conversationVariables" @update:fields="updateConversationVariables" />
 
       <!-- 语音输入 -->
-      <div class="flex-between mb-2">
+      <div class="flex-between">
         <span>语音输入</span>
         <span class="flex items-center gap-3">
           <el-checkbox v-if="formData.stt_model_enable" v-model="formData.stt_autosend">自动发送</el-checkbox>
           <el-switch v-model="formData.stt_model_enable" size="small" @change="changeSpeechInputEnabled" />
         </span>
       </div>
-      <el-form-item>
-        <template v-if="formData.stt_model_enable">
-          <el-radio-group v-model="formData.stt_model_id_type" class="mb-2">
-            <el-radio value="default">默认模型</el-radio>
-            <el-radio value="custom">自定义</el-radio>
-          </el-radio-group>
-          <ModelSelect
-            v-if="formData.stt_model_id_type === 'default'"
-            :model-value="defaultSttModelSetting?.model_id ?? ''"
-            :model-params="defaultSttModelSetting?.model_params_setting ?? {}"
-            disabled
-            :options="sttModelOptions"
-            :provider-options="providerOptions"
-            placeholder="未配置默认模型"
-          />
-          <ModelSelect
-            v-else
-            v-model="formData.stt_model_id"
-            v-model:model-params="formData.stt_model_params_setting"
-            can-edit-params
-            :options="sttModelOptions"
-            :provider-options="providerOptions"
-          />
-        </template>
+      <el-form-item class="mt-2" v-if="formData.stt_model_enable">
+        <el-radio-group v-model="formData.stt_model_id_type" class="mb-2">
+          <el-radio value="default">默认模型</el-radio>
+          <el-radio value="custom">自定义</el-radio>
+        </el-radio-group>
+        <ModelSelect
+          v-if="formData.stt_model_id_type === 'default'"
+          :model-value="defaultSttModelSetting?.model_id ?? ''"
+          :model-params="defaultSttModelSetting?.model_params_setting ?? {}"
+          disabled
+          :options="sttModelOptions"
+          :provider-options="providerOptions"
+          placeholder="未配置默认模型"
+        />
+        <ModelSelect
+          v-else
+          v-model="formData.stt_model_id"
+          v-model:model-params="formData.stt_model_params_setting"
+          can-edit-params
+          :options="sttModelOptions"
+          :provider-options="providerOptions"
+        />
       </el-form-item>
 
       <!-- 语音播放 -->
-      <div class="flex-between mb-2">
+      <div class="flex-between mt-4">
         <span>语音播放</span>
         <span class="flex items-center gap-3">
           <el-checkbox v-if="formData.tts_model_enable" v-model="formData.tts_autoplay">自动播放</el-checkbox>
@@ -292,31 +290,29 @@ onMounted(() => {
         </span>
       </div>
 
-      <el-form-item class="mb-0!">
-        <template v-if="formData.tts_model_enable">
-          <el-radio-group v-model="formData.tts_type" class="mb-2">
-            <el-radio value="BROWSER">浏览器播放(免费)</el-radio>
-            <el-radio value="DEFAULT">默认模型</el-radio>
-            <el-radio value="CUSTOM">自定义</el-radio>
-          </el-radio-group>
-          <ModelSelect
-            v-if="formData.tts_type === 'DEFAULT'"
-            :model-value="defaultTtsModelSetting?.model_id ?? ''"
-            :model-params="defaultTtsModelSetting?.model_params_setting ?? {}"
-            disabled
-            :options="ttsModelOptions"
-            :provider-options="providerOptions"
-            placeholder="未配置默认模型"
-          />
-          <ModelSelect
-            v-else-if="formData.tts_type === 'CUSTOM'"
-            v-model="formData.tts_model_id"
-            v-model:model-params="formData.tts_model_params_setting"
-            can-edit-params
-            :options="ttsModelOptions"
-            :provider-options="providerOptions"
-          />
-        </template>
+      <el-form-item class="mt-2" v-if="formData.tts_model_enable">
+        <el-radio-group v-model="formData.tts_type" class="mb-2">
+          <el-radio value="BROWSER">浏览器播放(免费)</el-radio>
+          <el-radio value="DEFAULT">默认模型</el-radio>
+          <el-radio value="CUSTOM">自定义</el-radio>
+        </el-radio-group>
+        <ModelSelect
+          v-if="formData.tts_type === 'DEFAULT'"
+          :model-value="defaultTtsModelSetting?.model_id ?? ''"
+          :model-params="defaultTtsModelSetting?.model_params_setting ?? {}"
+          disabled
+          :options="ttsModelOptions"
+          :provider-options="providerOptions"
+          placeholder="未配置默认模型"
+        />
+        <ModelSelect
+          v-else-if="formData.tts_type === 'CUSTOM'"
+          v-model="formData.tts_model_id"
+          v-model:model-params="formData.tts_model_params_setting"
+          can-edit-params
+          :options="ttsModelOptions"
+          :provider-options="providerOptions"
+        />
       </el-form-item>
     </el-form>
   </NodeContainer>
diff --git a/ui/src/workflow-canvas/nodes/form-node/component/form-setting/FormFieldDialog.vue b/ui/src/workflow-canvas/nodes/form-node/component/form-setting/FormFieldDialog.vue
new file mode 100644
index 00000000000..ac09085de59
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/form-node/component/form-setting/FormFieldDialog.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+import { cloneDeep } from 'lodash'
+import { MkDynamicsFormConstructor, type FormField, type VisibilityFieldOption } from '@/components/mk-dynamics-form'
+
+defineOptions({ name: 'WorkflowFormFieldDialog' })
+
+const props = defineProps<{ formFields: FormField[]; upstreamFieldOptions: VisibilityFieldOption[]; nodeId: string; nodeName: string }>()
+const emit = defineEmits<{ submit: [data: FormField, index?: number] }>()
+const dynamicsFormConstructorRef = useTemplateRef<InstanceType<typeof MkDynamicsFormConstructor>>('dynamicsFormConstructorRef')
+const visible = ref(false)
+const currentIndex = ref<number>()
+const formData = ref<Partial<FormField>>({})
+
+// 当前表单只能选择编辑字段之前的字段，上游变量由节点入口提供。
+const visibilityFieldOptions = computed<VisibilityFieldOption[]>(() => {
+  const selfFields = props.formFields
+    .filter((_, index) => currentIndex.value === undefined || index < currentIndex.value)
+    .map((field) => ({
+      label: typeof field.label === 'string' ? field.label : (field.label?.label ?? ''),
+      value: field.field,
+      input_type: field.input_type,
+      option_list: field.option_list,
+      attrs: field.attrs,
+    }))
+  return [
+    ...props.upstreamFieldOptions,
+    ...(selfFields.length ? [{ label: props.nodeName, value: props.nodeId, self: true, children: selfFields }] : []),
+  ]
+})
+
+function open(data?: FormField, index?: number) {
+  if (data) {
+    formData.value = cloneDeep(data)
+    currentIndex.value = index
+  }
+  visible.value = true
+}
+
+function handleSubmit() {
+  const dynamicsFormConstructor = dynamicsFormConstructorRef.value
+  if (!dynamicsFormConstructor) return
+
+  dynamicsFormConstructor
+    .validate()
+    .then(() => emit('submit', cloneDeep(dynamicsFormConstructor.getData()), currentIndex.value))
+    .catch(() => {})
+}
+
+function close() {
+  visible.value = false
+}
+
+function resetData() {
+  currentIndex.value = undefined
+  formData.value = {}
+}
+
+defineExpose({ close, open })
+</script>
+
+<template>
+  <MkDialog v-model="visible" :title="currentIndex === undefined ? '添加参数' : '编辑参数'" @closed="resetData" align-center>
+    <MkDynamicsFormConstructor ref="dynamicsFormConstructorRef" v-model="formData" enable-visibility :left-options="visibilityFieldOptions" />
+    <template #footer>
+      <el-button plain @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ currentIndex === undefined ? '添加' : '保存' }}</el-button>
+    </template>
+  </MkDialog>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/form-node/component/form-setting/FormSettingTable.vue b/ui/src/workflow-canvas/nodes/form-node/component/form-setting/FormSettingTable.vue
new file mode 100644
index 00000000000..46dcd00d7ec
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/form-node/component/form-setting/FormSettingTable.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { cloneDeep } from 'lodash'
+import { dynamicFormTypeOptions, type FormField, type VisibilityFieldOption } from '@/components/mk-dynamics-form'
+import { MsgError } from '@/utils/message'
+import FormFieldDialog from './FormFieldDialog.vue'
+
+defineOptions({ name: 'WorkflowFormFieldTable' })
+
+const props = defineProps<{ upstreamFieldOptions: VisibilityFieldOption[]; nodeId: string; nodeName: string }>()
+const formFields = defineModel<FormField[]>({ required: true })
+const formFieldDialogRef = useTemplateRef<InstanceType<typeof FormFieldDialog>>('formFieldDialogRef')
+
+// 字段展示兼容复合标签与多选默认值。
+function getTypeLabel(inputType: string) {
+  return dynamicFormTypeOptions.find((option) => option.value === inputType)?.label ?? inputType
+}
+
+function getDefaultValue(field: FormField): string {
+  const defaultValue: unknown = field.default_value
+  if (defaultValue === undefined || defaultValue === null) return ''
+  if (Array.isArray(defaultValue) && field.option_list) {
+    return field.option_list
+      .filter((option) => defaultValue.includes(option.value))
+      .map((option) => option.label)
+      .join(',')
+  }
+  return String(defaultValue)
+}
+
+// 添加与编辑共用提交入口，重名时保留弹窗内容。
+function openFieldDialog(data?: FormField, index?: number) {
+  formFieldDialogRef.value?.open(data, index)
+}
+
+function deleteField(index: number) {
+  formFields.value = cloneDeep(formFields.value.filter((_, fieldIndex) => fieldIndex !== index))
+}
+
+function saveField(data: FormField, index?: number) {
+  if (formFields.value.some((field, fieldIndex) => field.field === data.field && fieldIndex !== index)) {
+    MsgError(`参数 "${data.field}" 已存在`)
+    return
+  }
+
+  const fields = cloneDeep(formFields.value)
+  if (index === undefined) {
+    fields.push(cloneDeep(data))
+  } else {
+    fields.splice(index, 1, cloneDeep(data))
+  }
+  formFields.value = fields
+  formFieldDialogRef.value?.close()
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex-between mb-2">
+      <span>表单配置</span>
+      <el-button text type="primary" @click="openFieldDialog()">
+        <MkIcon name="icon_add_outlined" />
+      </el-button>
+    </div>
+
+    <MkTable v-model:data="formFields" sortable size="small" row-key="field" :max-height="undefined" class="border">
+      <el-table-column prop="field" label="参数">
+        <template #default="{ row }">
+          <span :title="row.field" class="block truncate">{{ row.field }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="显示名称">
+        <template #default="{ row }">
+          <span class="block truncate" :title="row.label.label" v-if="row.label && row.label.input_type === 'TooltipLabel'">{{
+            row.label.label
+          }}</span>
+          <span class="block truncate" :title="row.label" v-else>{{ row.label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="组件类型" width="110">
+        <template #default="{ row }">
+          <el-tag size="small" type="info">{{ getTypeLabel(row.input_type) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="默认值">
+        <template #default="{ row }">
+          <span :title="getDefaultValue(row)" class="block truncate">{{ getDefaultValue(row) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="必填" width="55">
+        <template #default="{ row }">
+          <div @click.stop>
+            <el-switch disabled size="small" :model-value="Boolean(row.required)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="80">
+        <template #default="{ row, $index }">
+          <el-button text type="primary" aria-label="编辑" @click="openFieldDialog(row, $index)">
+            <MkIcon name="icon_edit_outlined" />
+          </el-button>
+          <el-button text type="primary" aria-label="删除" @click="deleteField($index)">
+            <MkIcon name="icon_delete-trash_outlined" />
+          </el-button>
+        </template>
+      </el-table-column>
+    </MkTable>
+
+    <FormFieldDialog
+      ref="formFieldDialogRef"
+      :form-fields="formFields"
+      :upstream-field-options="props.upstreamFieldOptions"
+      :node-id="props.nodeId"
+      :node-name="props.nodeName"
+      @submit="saveField"
+    />
+  </div>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/form-node/index.ts b/ui/src/workflow-canvas/nodes/form-node/index.ts
index 2f948d84ba7..90a63bf82bf 100644
--- a/ui/src/workflow-canvas/nodes/form-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/form-node/index.ts
@@ -8,4 +8,12 @@ class FormNodeView extends WorkflowNodeView {
   }
 }
 
-export default { type: WorkflowNodeType.FormNode, model: WorkflowNodeModel, view: FormNodeView }
+class FormNodeModel extends WorkflowNodeModel {
+  override setAttributes() {
+    super.setAttributes()
+    this.width = 680
+    this.properties.width = 680
+  }
+}
+
+export default { type: WorkflowNodeType.FormNode, model: FormNodeModel, view: FormNodeView }
diff --git a/ui/src/workflow-canvas/nodes/form-node/index.vue b/ui/src/workflow-canvas/nodes/form-node/index.vue
index 3bdb94904d6..1b8626e5b3d 100644
--- a/ui/src/workflow-canvas/nodes/form-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/form-node/index.vue
@@ -1,288 +1,129 @@
-<template>
-  <NodeContainer :node-model="model">
-    <h6 class="mb-3">节点设置</h6>
-    <el-card shadow="never" class="card-never">
-      <el-form
-        ref="formNodeFormRef"
-        :model="form_data"
-        label-position="top"
-        require-asterisk-position="right"
-        label-width="auto"
-        hide-required-asterisk
-        @submit.prevent
-      >
-        <el-form-item prop="form_content_format" :rules="{ required: true, message: '请填写表单内容', trigger: 'blur' }">
-          <template #label>
-            <div class="flex items-center">
-              <span class="text-N900">表单内容<span class="text-danger">*</span></span>
-              <el-tooltip effect="dark" placement="right">
-                <template #content>表单内容中可使用 { form } 占位符来动态插入表单</template>
-                <MkIcon name="icon_info_outlined" class="ml-1 cursor-pointer align-middle" />
-              </el-tooltip>
-            </div>
-          </template>
-          <el-input
-            v-model="form_data.form_content_format"
-            :rows="5"
-            type="textarea"
-            placeholder="请输入表单内容，如：你好，请先填写下面表单内容：
-{{form}}"
-          />
-        </el-form-item>
-
-        <el-form-item @click.prevent>
-          <template #label>
-            <div class="flex w-full items-center justify-between gap-3">
-              <h6 class="font-medium">表单设置</h6>
-              <el-button link type="primary" @click="openAddDialog">
-                <MkIcon name="icon_add_outlined" class="mr-1" />
-                添加
-              </el-button>
-            </div>
-          </template>
-
-          <MkTable
-            v-if="form_data.form_field_list.length > 0"
-            v-model:data="sortableFields"
-            sortable
-            row-key="field"
-            :max-height="undefined"
-            class="border"
-          >
-            <el-table-column prop="field" :label="'参数'" width="100" show-overflow-tooltip>
-              <template #default="{ row }">
-                <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="'显示名称'">
-              <template #default="{ row }">
-                <span :title="getFieldLabel(row)" class="ellipsis-1">{{ getFieldLabel(row) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="'组件类型'" width="100">
-              <template #default="{ row }">
-                <el-tag size="small" type="info" class="info-tag">{{ getTypeLabel(row.input_type) }}</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column :label="'默认值'">
-              <template #default="{ row }">
-                <span :title="getDefaultValue(row)" class="ellipsis-1">{{ getDefaultValue(row) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="'必填'" width="55">
-              <template #default="{ row }">
-                <div @click.stop>
-                  <el-switch size="small" :model-value="Boolean(row.required)" />
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column :label="'操作'" width="90">
-              <template #default="{ row, $index }">
-                <el-button link type="primary" @click="openEditDialog(row, $index)">
-                  <MkIcon name="icon_edit_outlined" />
-                </el-button>
-                <el-button link type="info" @click="deleteField($index)">
-                  <MkIcon name="icon_delete-trash_outlined" />
-                </el-button>
-              </template>
-            </el-table-column>
-          </MkTable>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <MkDialog v-model="dialogVisible" :title="isEdit ? '编辑字段' : '添加字段'" width="600px" append-to-body destroy-on-close>
-      <MkDynamicsFormConstructor
-        ref="constructorRef"
-        v-model="currentField"
-        :enable-visibility="true"
-        :left-options="visibilityFieldOptions"
-        label-position="top"
-        require-asterisk-position="right"
-      />
-      <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitField">确定</el-button>
-      </template>
-    </MkDialog>
-  </NodeContainer>
-</template>
 <script setup lang="ts">
-import { ref, inject, computed, onMounted, useTemplateRef } from 'vue'
+import { computed, inject, onMounted, useTemplateRef } from 'vue'
 import { cloneDeep } from 'lodash'
 import type { FormInstance } from 'element-plus'
-
+import type { FormField, VisibilityFieldOption } from '@/components/mk-dynamics-form'
 import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
-import { MkDynamicsFormConstructor, dynamicFormTypeOptions, type FormField, type VisibilityFieldOption } from '@/components/mk-dynamics-form'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
-import type { BaseNodeModel } from '@logicflow/core'
-import { MsgError } from '@/utils/message'
+import { handleNodeWheel } from '@/workflow-canvas/core/utils'
+import FormSettingTable from './component/form-setting/FormSettingTable.vue'
 
 defineOptions({ name: 'WorkflowFormNode' })
-const getModel = inject('getModel') as () => BaseNodeModel
-const model = getModel() as WorkflowNodeModel
 
-const dialogVisible = ref(false)
-const isEdit = ref(false)
-const editIndex = ref(-1)
-const currentField = ref<Partial<FormField>>({})
+const getModel = inject<() => WorkflowNodeModel>('getModel')!
+const model = getModel()
 
-const getFieldLabel = (row: FormField) => {
-  if (typeof row.label !== 'string') {
-    return row.label?.label || ''
-  }
-  return row.label || ''
+interface FormNodeForm {
+  is_result: boolean
+  form_field_list: FormField[]
+  form_content_format: string
 }
 
-const getTypeLabel = (inputType: string) => {
-  const item = dynamicFormTypeOptions.find((i) => i.value === inputType)
-  return item ? item.label : inputType
-}
+const formNodeFormRef = useTemplateRef<FormInstance>('formNodeFormRef')
 
-const getDefaultValue = (row: FormField) => {
-  if (row.default_value === undefined || row.default_value === null) return ''
-  if (Array.isArray(row.default_value)) {
-    if (!row.option_list) return String(row.default_value)
-    return row.option_list
-      .filter((v) => (row.default_value as Array<unknown>).includes(v.value))
-      .map((v) => v.label)
-      .join(',')
+// 初始化时一次性补齐旧节点缺失的表单配置。
+const defaultForm: FormNodeForm = { is_result: true, form_content_format: '', form_field_list: [] }
+const savedForm = model.properties.node_data as Partial<FormNodeForm> | undefined
+// 当前表单引用统一使用真实节点 ID，兼容旧占位标识与 v2 未保存 self 的条件。
+const savedFields = cloneDeep(Array.isArray(savedForm?.form_field_list) ? savedForm.form_field_list : defaultForm.form_field_list)
+for (const field of savedFields) {
+  for (const condition of field.visibility_rules?.conditions ?? []) {
+    if (condition.field?.length === 2 && (condition.self || condition.field[0] === 'self-form' || condition.field[0] === model.id)) {
+      condition.field[0] = model.id
+      condition.self = true
+    }
   }
-  return String(row.default_value)
 }
-
-const visibilityFieldOptions = computed<VisibilityFieldOption[]>(() => {
-  const selfChildren = form_data.value.form_field_list
-    .filter((_, index) => (editIndex.value < 0 ? true : index < editIndex.value))
-    .map((field) => ({
-      label: getFieldLabel(field),
-      value: field.field,
-      input_type: field.input_type,
-      option_list: field.option_list,
-      attrs: field.attrs,
-    }))
-  return [
-    ...model.getUpNodeFieldList(false, true).filter((field) => Boolean(field.children?.length)),
-    ...(selfChildren.length
-      ? [
-          {
-            label: String(model.properties.stepName || '表单收集'),
-            value: 'self-form',
-            self: true,
-            children: selfChildren,
-          },
-        ]
-      : []),
-  ]
-})
-
-// 节点初始化时补齐默认值和兼容旧数据，computed 只读取表单。
-if (!model.properties.node_data) {
-  model.properties.node_data = { is_result: true, form_content_format: '', form_field_list: [] }
+model.properties.node_data = {
+  ...defaultForm,
+  ...savedForm,
+  is_result: savedForm?.is_result ?? defaultForm.is_result,
+  form_content_format: savedForm?.form_content_format ?? defaultForm.form_content_format,
+  form_field_list: savedFields,
 }
 
-const form_data = computed<{ is_result: boolean; form_field_list: FormField[]; form_content_format: string }>({
-  get: () => model.properties.node_data as { is_result: boolean; form_field_list: FormField[]; form_content_format: string },
-  set: (value) => {
-    model.properties.node_data = value
-  },
+const formData = computed<FormNodeForm>({
+  get: () => model.properties.node_data as FormNodeForm,
+  set: (value) => (model.properties.node_data = value),
 })
 
-const formNodeFormRef = useTemplateRef<FormInstance>('formNodeFormRef')
-const constructorRef = useTemplateRef<InstanceType<typeof MkDynamicsFormConstructor>>('constructorRef')
-// 排序后的工作流字段独立写回，并同步下游可引用字段。
-const sortableFields = computed({
-  get: () => form_data.value.form_field_list,
+// 字段表格只编辑列表，节点统一写回并同步下游引用。
+const formFields = computed({
+  get: () => formData.value.form_field_list,
   set: (fields: FormField[]) => {
-    form_data.value.form_field_list = cloneDeep(fields)
-    syncFieldList()
+    formData.value.form_field_list = cloneDeep(fields)
+    model.properties.config ??= {}
+    model.properties.config.fields = [
+      { label: '表单全部内容', value: 'form_data' },
+      ...formFields.value.map((field) => ({
+        label: typeof field.label === 'string' ? field.label : (field.label?.label ?? ''),
+        value: field.field,
+      })),
+    ]
+    model.clearNextNodeField(true)
   },
 })
 
-const openAddDialog = () => {
-  isEdit.value = false
-  editIndex.value = -1
-  currentField.value = {}
-  dialogVisible.value = true
-}
-
-const openEditDialog = (row: FormField, index: number) => {
-  isEdit.value = true
-  editIndex.value = index
-  currentField.value = { ...cloneDeep(row) }
-  dialogVisible.value = true
-}
-
-const deleteField = (index: number) => {
-  const list = cloneDeep(form_data.value.form_field_list)
-  list.splice(index, 1)
-  form_data.value.form_field_list = list
-  syncFieldList()
-}
-
-const submitField = async () => {
-  try {
-    await constructorRef.value?.validate()
-    const data = constructorRef.value?.getData()
-    if (!data) return
-
-    const isDuplicate = form_data.value.form_field_list.some((item, index) => item.field === data.field && index !== editIndex.value)
-    if (isDuplicate) {
-      MsgError(`参数 "${data.field}" 已存在`)
-      return
-    }
-
-    const list = cloneDeep(form_data.value.form_field_list)
-    if (isEdit.value && editIndex.value >= 0) {
-      list.splice(editIndex.value, 1, data as FormField)
-    } else {
-      list.push(data as FormField)
-    }
-    form_data.value.form_field_list = list
-    syncFieldList()
-    dialogVisible.value = false
-  } catch {
-    //
-  }
-}
-
-const syncFieldList = () => {
-  const fields = [
-    { label: '表单全部内容', value: 'form_data' },
-    ...form_data.value.form_field_list.map((item) => ({ value: item.field, label: getFieldLabel(item) })),
-  ]
-  if (!model.properties.config) {
-    model.properties.config = {}
-  }
-  model.properties.config!.fields = fields
-  model.clearNextNodeField(true)
-}
+const upstreamFieldOptions = computed<VisibilityFieldOption[]>(() =>
+  model.getUpNodeFieldList(false, true).filter((field) => Boolean(field.children?.length)),
+)
 
-const validate = () => {
-  const vList: Array<Promise<unknown>> = []
+// 节点校验保留表单内容与显隐条件中的失效引用检查。
+function validate() {
+  const validationResults: Array<Promise<unknown>> = []
   const formResult = formNodeFormRef.value?.validate()
-  if (formResult) vList.push(formResult)
+  if (formResult) validationResults.push(formResult)
 
   const upstreamNodeFields = model.getUpNodeFieldList(true, true)
-  for (const field of form_data.value.form_field_list) {
-    for (const cond of field.visibility_rules?.conditions || []) {
-      if (!cond.field || cond.field.length < 2 || !cond.field[0] || !cond.field[1]) continue
-      if (cond.self) {
-        if (!form_data.value.form_field_list.some((f) => f.field === cond.field[1])) {
-          vList.push(Promise.reject('引用变量不存在'))
+  for (const field of formData.value.form_field_list) {
+    for (const condition of field.visibility_rules?.conditions || []) {
+      if (!condition.field || condition.field.length < 2 || !condition.field[0] || !condition.field[1]) continue
+      if (condition.self) {
+        if (!formData.value.form_field_list.some((formField) => formField.field === condition.field[1])) {
+          validationResults.push(Promise.reject('引用变量不存在'))
         }
       } else {
-        const nodeEntry = upstreamNodeFields.find((n) => n.value === cond.field[0])
-        if (!nodeEntry || !nodeEntry.children?.some((c) => c.value === cond.field[1])) {
-          vList.push(Promise.reject('引用变量不存在'))
+        const nodeEntry = upstreamNodeFields.find((node) => node.value === condition.field[0])
+        if (!nodeEntry || !nodeEntry.children?.some((nodeField) => nodeField.value === condition.field[1])) {
+          validationResults.push(Promise.reject('引用变量不存在'))
         }
       }
     }
   }
-  return Promise.all(vList).catch((error) => Promise.reject({ node: model, errMessage: error }))
+  return Promise.all(validationResults).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
 
 onMounted(() => {
   model.validate = validate
 })
 </script>
+
+<template>
+  <NodeContainer :node-model="model">
+    <h6 class="mk-title-decoration mb-2">节点设置</h6>
+    <div class="mk-gray-card">
+      <el-form ref="formNodeFormRef" :model="formData" label-position="top" require-asterisk-position="right" @submit.prevent>
+        <el-form-item prop="form_content_format" class="mk-hide-asterisk" :rules="{ required: true, message: '请填写表单输出内容', trigger: 'blur' }">
+          <template #label>
+            <div class="flex items-center gap-1">
+              <span class="mk-required">表单输出内容</span>
+              <el-tooltip placement="right" content="设置执行该节点输出的内容，{ form } 为表单的占位符">
+                <MkIcon name="icon_info_outlined" class="text-N600!" />
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify v-model="formData.form_content_format" title="表单输出内容" @wheel="handleNodeWheel" />
+        </el-form-item>
+        <!-- 表单配置 -->
+        <el-form-item>
+          <FormSettingTable
+            v-model="formFields"
+            :upstream-field-options="upstreamFieldOptions"
+            :node-id="model.id"
+            :node-name="String(model.properties.stepName || '表单收集')"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+  </NodeContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/variable-aggregation-node/index.ts b/ui/src/workflow-canvas/nodes/variable-aggregation-node/index.ts
index 42bc4ae86df..0dba856be7d 100644
--- a/ui/src/workflow-canvas/nodes/variable-aggregation-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/variable-aggregation-node/index.ts
@@ -10,8 +10,9 @@ class VariableAggregationNodeView extends WorkflowNodeView {
 
 class VariableAggregationNodeModel extends WorkflowNodeModel {
   setAttributes() {
-    this.width = Number(this.properties.width ?? 450)
-    this.height = Number(this.properties.height ?? 300)
+    super.setAttributes()
+    this.width = 455
+    this.properties.width = 455
     this.text.editable = false
   }
 }