From 2f3347feac9a746c2caeda1ebc83c5af15ba8be9 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 27 Aug 2026 19:36:46 +0800
Subject: [PATCH] feat: dynamics-form

---
 ui/src/components/COMPONENT_README.md         |   5 +-
 ui/src/components/mk-dynamics-form/Demo.vue   |   4 +-
 .../components/mk-dynamics-form/FormItem.vue  |   7 +-
 .../constructor/BasicInfoConstructor.vue      |  17 +-
 .../items/DatePickerConstructor.vue           | 134 +++++++------
 .../items/JsonInputConstructor.vue            |  62 +++---
 .../constructor/items/MultiRowConstructor.vue | 165 +++++++---------
 .../items/MultiSelectConstructor.vue          | 166 +++++++---------
 .../items/PasswordInputConstructor.vue        | 120 +++++-------
 .../items/RadioCardConstructor.vue            | 166 ++++++++--------
 .../constructor/items/RadioRowConstructor.vue | 158 +++++++--------
 .../items/SingleSelectConstructor.vue         | 164 +++++++---------
 .../constructor/items/SliderConstructor.vue   |   5 +-
 .../items/SwitchInputConstructor.vue          |   2 +-
 .../items/TextInputConstructor.vue            | 118 +++++-------
 .../items/TextareaInputConstructor.vue        | 117 +++++------
 .../items/TreeSelectConstructor.vue           |  11 +-
 .../items/UploadInputConstructor.vue          |   1 +
 .../constructor/visibility/ConditionRow.vue   | 182 ++++++++----------
 .../constructor/visibility/FieldSelector.vue  |  18 +-
 .../constructor/visibility/index.vue          |  89 ++++-----
 .../visibility/{index.ts => utils.ts}         |   0
 .../mk-dynamics-form/items/JsonInput.vue      | 142 +-------------
 .../mk-dynamics-form/items/MultiRow.vue       |   1 +
 .../items/common/SelectHeader.vue             |  24 ---
 .../items/knowledge/Knowledge.vue             |   5 -
 .../items/label/SettingLabel.vue              |  75 --------
 .../items/label/TooltipLabel.vue              |   2 +-
 .../items/layout/RowLayout.vue                |   7 -
 .../mk-dynamics-form/items/model/Model.vue    |   4 -
 .../items/radio/RadioCard.vue                 | 101 ++++------
 .../mk-dynamics-form/items/radio/RadioRow.vue |   1 +
 .../items/select/MultiSelect.vue              |   5 -
 .../items/select/SingleSelect.vue             |  21 +-
 .../mk-dynamics-form/items/slider/Slider.vue  |   2 +-
 .../items/tree/TreeSelect.vue                 |  10 +-
 ui/src/components/mk-form-list/index.vue      |  19 +-
 ui/src/styles/app.scss                        |   8 +
 ui/src/styles/element-plus.scss               |   3 -
 ui/src/views/VIEW_README.md                   |   2 +-
 .../components/LoginSetting.vue               |   8 +-
 ui/src/workflow-canvas/core/NodeCascader.vue  |   2 +-
 42 files changed, 853 insertions(+), 1300 deletions(-)
 rename ui/src/components/mk-dynamics-form/constructor/visibility/{index.ts => utils.ts} (100%)
 delete mode 100644 ui/src/components/mk-dynamics-form/items/common/SelectHeader.vue
 delete mode 100644 ui/src/components/mk-dynamics-form/items/label/SettingLabel.vue
 delete mode 100644 ui/src/components/mk-dynamics-form/items/layout/RowLayout.vue

diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index d522c4ee0bd..fc4a29e6bf9 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -712,7 +712,10 @@ const roleSettings = defineModel<{ roleId: string; workspaceIds: string[] }[]>({
 </MkFormList>
 ```
 
-`addText` 设置添加按钮文案。删除按钮及第一行与后续行的对齐由组件统一处理。
+`addText` 设置添加按钮文案，`showAddButton` 默认为 `true`；添加入口由业务布局单独提供时传入
+`:show-add-button="false"`。`firstRowHasLabel` 默认为 `true`：第一行删除按钮使用 `mt-8`，后续行
+使用 `mt-0.5`；并列表单项没有 label 时传入 `:first-row-has-label="false"`。删除成功后通过
+`remove(item, index)` 返回被删除的行数据和原索引，业务组件可处理关联状态，不需要再次修改列表。
 
 ### MkSearchList
 
diff --git a/ui/src/components/mk-dynamics-form/Demo.vue b/ui/src/components/mk-dynamics-form/Demo.vue
index 0e5f1ed6599..5f683ceb31b 100644
--- a/ui/src/components/mk-dynamics-form/Demo.vue
+++ b/ui/src/components/mk-dynamics-form/Demo.vue
@@ -177,7 +177,7 @@ const validateForm = async () => {
   </div>
 
   <!-- 添加/编辑字段弹窗 -->
-  <el-dialog
+  <MkDialog
     v-model="dialogVisible"
     :title="isEdit ? '编辑字段' : '添加字段'"
     width="600px"
@@ -196,5 +196,5 @@ const validateForm = async () => {
       <el-button @click="dialogVisible = false">取消</el-button>
       <el-button type="primary" @click="submitField">确定</el-button>
     </template>
-  </el-dialog>
+  </MkDialog>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/FormItem.vue b/ui/src/components/mk-dynamics-form/FormItem.vue
index 975ee969a66..62d2c7064c3 100644
--- a/ui/src/components/mk-dynamics-form/FormItem.vue
+++ b/ui/src/components/mk-dynamics-form/FormItem.vue
@@ -59,7 +59,7 @@ const emit = defineEmits<{
 }>()
 
 const loading = ref(false)
-const fieldComponentRef = ref<DynamicFieldComponent>()
+const componentFormRef = ref<DynamicFieldComponent>()
 const triggerSubscriptions: Array<{
   event: string
   handler: (value: unknown) => void
@@ -188,7 +188,7 @@ onBeforeUnmount(() => {
 
 function validate() {
   if (props.formField.trigger_type === 'CHILD_FORMS') {
-    return fieldComponentRef.value?.validate?.() ?? Promise.resolve()
+    return componentFormRef.value?.validate?.() ?? Promise.resolve()
   }
   return Promise.resolve()
 }
@@ -203,7 +203,6 @@ defineExpose({ validate })
     :style="formItemStyle"
     :prop="formField.field"
     :rules="validationRules"
-    :class="formField.required_asterisk ? 'hide-asterisk' : ''"
   >
     <template v-if="formField.label" #label>
       <FormItemLabel v-if="isString(formField.label)" :form-field="formField" />
@@ -219,7 +218,7 @@ defineExpose({ validate })
     <component
       :is="getFieldComponent(formField.input_type)"
       v-if="getFieldComponent(formField.input_type)"
-      ref="fieldComponentRef"
+      ref="componentFormRef"
       v-model="itemValue"
       :view="view"
       :form-field="formField"
diff --git a/ui/src/components/mk-dynamics-form/constructor/BasicInfoConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/BasicInfoConstructor.vue
index f7ca5ee6974..f58cc31d790 100644
--- a/ui/src/components/mk-dynamics-form/constructor/BasicInfoConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/BasicInfoConstructor.vue
@@ -44,10 +44,9 @@ const ruleFormRef = ref<FormInstance>()
 const componentFormRef = ref<DynamicFormConstructorExpose>()
 
 const rules: FormRules<DynamicFormConstructorState> = {
-  label: [{ required: true, message: '显示名称 为必填属性' }],
-  field: [{ required: true, message: '参数 为必填属性' }],
-  required: [{ required: true, message: '是否必填 为必填属性' }],
-  input_type: [{ required: true, message: '组建类型 为必填属性' }],
+  label: [{ required: true, message: '请输入显示名称' }],
+  field: [{ required: true, message: '请输入参数' }],
+  input_type: [{ required: true, message: '请选择组件类型' }],
 }
 
 const validate = () => (ruleFormRef.value ? ruleFormRef.value.validate() : Promise.resolve())
@@ -102,7 +101,7 @@ const updateForm = (value: DynamicFormConstructorState) => {
 defineExpose({ validate, getData, render })
 </script>
 <template>
-  <el-form @submit.prevent ref="ruleFormRef" class="mb-24" label-width="auto" :model="form">
+  <el-form @submit.prevent ref="ruleFormRef" label-width="auto" :model="form">
     <el-form-item label="参数" :required="true" prop="field" :rules="rules.field">
       <el-input v-model="form.field" :maxlength="64" placeholder="请输入参数" show-word-limit />
     </el-form-item>
@@ -117,13 +116,7 @@ defineExpose({ validate, getData, render })
         placeholder="请输入参数提示说明"
       />
     </el-form-item>
-    <el-form-item
-      label="是否必填"
-      :required="true"
-      prop="required"
-      :rules="rules.required"
-      @click.prevent
-    >
+    <el-form-item label="是否必填" prop="required" @click.prevent>
       <el-switch v-model="form.required" :active-value="true" :inactive-value="false" />
     </el-form-item>
     <el-form-item label="组件类型" :required="true" prop="input_type" :rules="rules.input_type">
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/DatePickerConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/DatePickerConstructor.vue
index 7cb1858320d..b68cfed2d03 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/DatePickerConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/DatePickerConstructor.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import type { DynamicFormValue } from '../../type'
 import { computed, onBeforeMount } from 'vue'
-const dateTypeOptions = [
+import { dateFormat, datetimeFormat } from '@/utils/time'
+import type { DynamicFormConstructorOption, DynamicFormValue } from '../../type'
+
+type DatePickerType = 'year' | 'month' | 'date' | 'datetime'
+type DateFormatOption = Pick<DynamicFormConstructorOption, 'value'>
+
+const defaultDatePickerType: DatePickerType = 'datetime'
+
+const dateTypeOptions: DynamicFormConstructorOption[] = [
   {
     label: '年',
     value: 'year',
@@ -19,28 +26,32 @@ const dateTypeOptions = [
     value: 'datetime',
   },
 ]
-const dateFormatOptions: DynamicFormValue = {
+const dateFormatOptions: Record<DatePickerType, DateFormatOption[]> = {
   year: [{ value: 'YYYY' }],
   month: [{ value: 'YYYY-MM' }],
   date: [{ value: 'YYYY-MM-DD' }],
   datetime: [{ value: 'YYYY-MM-DD HH:mm:ss' }],
 }
 
-const padDatePart = (value: number) => String(value).padStart(2, '0')
-const formatCurrentDate = (format: string) => {
+const getCurrentDateValue = (type: DatePickerType) => {
   const now = new Date()
-  return format
-    .replace('YYYY', String(now.getFullYear()))
-    .replace('MM', padDatePart(now.getMonth() + 1))
-    .replace('DD', padDatePart(now.getDate()))
-    .replace('HH', padDatePart(now.getHours()))
-    .replace('mm', padDatePart(now.getMinutes()))
-    .replace('ss', padDatePart(now.getSeconds()))
+  if (type === 'datetime') {
+    return datetimeFormat(now) as string
+  }
+
+  const currentDate = dateFormat(now) as string
+  if (type === 'year') return currentDate.slice(0, 4)
+  if (type === 'month') return currentDate.slice(0, 7)
+  return currentDate
 }
 
 const handleDateTypeChange = () => {
-  formValue.value.format = dateFormatOptions[formValue.value.type][0].value
-  formValue.value.default_value = formatCurrentDate(formValue.value.format)
+  const datePickerType = formValue.value.type as DatePickerType
+  const defaultFormat = dateFormatOptions[datePickerType][0]?.value
+  if (!defaultFormat) return
+
+  formValue.value.format = defaultFormat
+  formValue.value.default_value = getCurrentDateValue(datePickerType)
 }
 const props = defineProps<{
   modelValue: DynamicFormValue
@@ -55,6 +66,13 @@ const formValue = computed({
   },
 })
 
+const defaultValueUnselected = computed({
+  get: () => formValue.value.show_default_value === false,
+  set: (value: boolean) => {
+    formValue.value.show_default_value = !value
+  },
+})
+
 const getData = () => {
   return {
     input_type: 'DatePicker',
@@ -74,9 +92,9 @@ const render = (formData: DynamicFormValue) => {
 }
 defineExpose({ getData, render })
 onBeforeMount(() => {
-  formValue.value.type = 'datetime'
+  formValue.value.type = defaultDatePickerType
   formValue.value.format = 'YYYY-MM-DD HH:mm:ss'
-  formValue.value.default_value = formatCurrentDate(formValue.value.format)
+  formValue.value.default_value = getCurrentDateValue(defaultDatePickerType)
   if (formValue.value.show_default_value === undefined) {
     formValue.value.show_default_value = true
   }
@@ -84,67 +102,67 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <el-form-item label="时间类型" required>
-    <el-select @change="handleDateTypeChange" v-model="formValue.type" placeholder="请选择时间类型">
-      <el-option
-        v-for="inputTypeOption in dateTypeOptions"
-        :key="inputTypeOption.value"
-        :label="inputTypeOption.label"
-        :value="inputTypeOption.value"
-      />
-    </el-select>
-  </el-form-item>
-  <el-form-item label="格式" required>
-    <el-select
-      v-model="formValue.format"
-      filterable
-      default-first-option
-      allow-create
-      placeholder="请选择格式"
-    >
-      <el-option
-        v-for="inputTypeOption in dateFormatOptions[formValue.type]"
-        :key="inputTypeOption.value"
-        :label="inputTypeOption.value"
-        :value="inputTypeOption.value"
-      />
-    </el-select>
-  </el-form-item>
+  <div class="flex gap-4">
+    <el-form-item class="min-w-0 flex-1" label="时间类型" required>
+      <el-select
+        v-model="formValue.type"
+        placeholder="请选择时间类型"
+        @change="handleDateTypeChange"
+      >
+        <el-option
+          v-for="inputTypeOption in dateTypeOptions"
+          :key="inputTypeOption.value"
+          :label="inputTypeOption.label"
+          :value="inputTypeOption.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item class="min-w-0 flex-1" label="格式" required>
+      <el-select
+        v-model="formValue.format"
+        filterable
+        default-first-option
+        allow-create
+        placeholder="请选择格式"
+      >
+        <el-option
+          v-for="inputTypeOption in dateFormatOptions[formValue.type as DatePickerType]"
+          :key="inputTypeOption.value"
+          :label="inputTypeOption.value"
+          :value="inputTypeOption.value"
+        />
+      </el-select>
+    </el-form-item>
+  </div>
   <el-form-item
-    class="defaultValueItem"
+    class="mk-hide-asterisk"
     :required="formValue.required"
     prop="default_value"
-    label="默认值"
     :rules="
       formValue.required
         ? [
             {
               required: true,
-              message: '默认值为必填属性',
+              message: '请输入默认值',
             },
           ]
         : []
     "
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="defaultValueUnselected" label="未选中项" />
+      </div>
+    </template>
     <el-date-picker
       v-model="formValue.default_value"
       :type="formValue.type"
       placeholder="选择日期"
       :format="formValue.format"
       :value-format="formValue.format"
+      class="w-full!"
     />
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
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 4c447e52577..ad263aa345e 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/JsonInputConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/JsonInputConstructor.vue
@@ -75,7 +75,7 @@ const referenceVariableRule = {
   required: true,
   validator: (_rule: unknown, value: DynamicFormValue, callback: DynamicFormValidatorCallback) => {
     if (!(Array.isArray(value) && value.length > 1)) {
-      callback('引用变量必填')
+      callback('请输入引用变量')
     }
 
     return true
@@ -99,30 +99,20 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form-item v-if="getModel">
-    <template #label>
-      <div class="flex-between">赋值方式</div>
-    </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">
+          {{ item.label }}
 
-    <el-row class="w-full">
-      <el-radio-group v-model="formValue.default_value_assignment_method">
-        <el-radio
-          :value="item.value"
-          size="large"
-          v-for="(item, index) in assignmentMethodOptions"
-          :key="index"
-        >
-          <span class="flex align-center">
-            {{ item.label }}
-
-            <el-tooltip effect="dark" placement="right" v-if="item.value === 'ref_variables'">
-              <template #content> 变量的值必须符合: JSON 格式 </template>
-              <MkIcon name="icon_warning_filled" class="app-warning-icon ml-4"></MkIcon>
-            </el-tooltip>
-          </span>
-        </el-radio>
-      </el-radio-group>
-    </el-row>
+          <el-tooltip placement="right" v-if="item.value === 'ref_variables'">
+            <template #content> 变量的值必须符合: JSON 格式 </template>
+            <MkIcon name="icon_info_outlined"></MkIcon>
+          </el-tooltip>
+        </span>
+      </el-radio>
+    </el-radio-group>
   </el-form-item>
   <el-form-item
     v-if="formValue.default_value_assignment_method === 'ref_variables'"
@@ -140,26 +130,20 @@ onMounted(() => {
   </el-form-item>
 
   <el-form-item
-    class="defaultValueItem"
-    label="默认值"
+    class="mk-hide-asterisk"
     :required="formValue.required"
     v-if="formValue.default_value_assignment_method === 'custom'"
     prop="default_value"
     :rules="[defaultValueRule]"
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
     <JsonInput ref="jsonInputRef" v-model="formValue.default_value"> </JsonInput>
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+
+<style lang="scss" scoped></style>
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 7bc61332816..76cb52c2b25 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/MultiRowConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/MultiRowConstructor.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import type { DynamicFormValidatorCallback, DynamicFormValue } from '../../type'
 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'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import type { FormField } from '@/components/mk-dynamics-form/type'
+import type {
+  DynamicFormConstructorOption,
+  DynamicFormValidatorCallback,
+  DynamicFormValue,
+  FormField,
+} from '../../type'
 const getModel = inject<() => DynamicFormValue>('getModel')
 
 const assignmentMethodOptions = computed(() => {
@@ -46,7 +51,7 @@ const referenceVariableRule = {
   required: true,
   validator: (_rule: unknown, value: DynamicFormValue, callback: DynamicFormValidatorCallback) => {
     if (!(Array.isArray(value) && value.length > 1)) {
-      callback('引用变量必填')
+      callback('请输入引用变量')
     }
 
     return true
@@ -57,12 +62,12 @@ const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }
 
-const delOption = (index: number) => {
-  const option = formValue.value.option_list[index]
-  if (option.value && formValue.value.default_value === option.value) {
-    formValue.value.default_value = ''
+const handleOptionRemove = (option: DynamicFormConstructorOption) => {
+  if (Array.isArray(formValue.value.default_value)) {
+    formValue.value.default_value = formValue.value.default_value.filter(
+      (value: DynamicFormValue) => value !== option.value,
+    )
   }
-  formValue.value.option_list.splice(index, 1)
 }
 const formField = computed<FormField>(() => {
   return { field: '', ...getData() }
@@ -97,42 +102,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form-item v-if="getModel">
-    <template #label>
-      <div class="flex-between">赋值方式</div>
-    </template>
-
-    <el-row class="w-full">
-      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
-        <el-radio
-          :value="item.value"
-          size="large"
-          v-for="(item, index) in assignmentMethodOptions"
-          :key="index"
-        >
-          <span class="flex align-center">
-            {{ item.label }}
+  <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">
+          {{ item.label }}
 
-            <el-tooltip effect="dark" 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: 是否为默认值
-              </template>
-              <MkIcon name="icon_warning_filled" class="app-warning-icon ml-4"></MkIcon>
-            </el-tooltip>
-          </span>
-        </el-radio>
-      </el-radio-group>
-    </el-row>
+          <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: 是否为默认值
+            </template>
+            <MkIcon name="icon_info_outlined"></MkIcon>
+          </el-tooltip>
+        </span>
+      </el-radio>
+    </el-radio-group>
   </el-form-item>
   <el-form-item
     v-if="formValue.assignment_method === 'ref_variables'"
@@ -148,45 +143,35 @@ onMounted(() => {
       v-model="formValue.option_list"
     />
   </el-form-item>
-  <el-form-item v-if="formValue.assignment_method === 'custom'">
-    <template #label>
-      <div class="flex-between">
-        选项值
-        <el-button link type="primary" @click.stop="addOption()">
-          <MkIcon name="icon_add_outlined" class="mr-4"></MkIcon>
-          添加
-        </el-button>
-      </div>
-    </template>
+  <div v-if="formValue.assignment_method === 'custom'" class="mb-4">
+    <div class="flex-between mb-2">
+      <span>选项值</span>
+      <el-button text type="primary" @click.stop="addOption()">
+        <MkIcon name="icon_add_outlined"></MkIcon>
+      </el-button>
+    </div>
 
-    <el-row style="width: 100%" :gutter="10">
-      <el-col :span="10"> 标签 </el-col>
-      <el-col :span="12"> 选项值 </el-col>
-    </el-row>
-    <el-row
-      style="width: 100%"
-      v-for="(option, $index) in formValue.option_list"
-      :key="$index"
-      :gutter="10"
-      class="mb-8"
-    >
-      <el-col :span="10">
-        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签" />
-      </el-col>
-      <el-col :span="12">
-        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值" />
-      </el-col>
-      <el-col :span="1">
-        <el-button link class="ml-8" @click.stop="delOption(Number($index))">
-          <MkIcon name="icon_delete-trash_outlined"></MkIcon>
-        </el-button>
-      </el-col>
-    </el-row>
-  </el-form-item>
+    <div class="w-full rounded-md bg-N100 p-3">
+      <MkFormList
+        v-model="formValue.option_list"
+        :default-item="{ label: '', value: '' }"
+        :show-add-button="false"
+        @remove="handleOptionRemove"
+      >
+        <template #default="{ index, item: option }">
+          <el-form-item :label="index === 0 ? '标签' : ''" class="flex-1">
+            <el-input v-model="option.label" placeholder="请输入选项标签" />
+          </el-form-item>
+          <el-form-item :label="index === 0 ? '选项值' : ''" class="flex-1">
+            <el-input v-model="option.value" placeholder="请输入选项值" />
+          </el-form-item>
+        </template>
+      </MkFormList>
+    </div>
+  </div>
   <el-form-item
+    class="mk-hide-asterisk"
     v-if="formValue.assignment_method === 'custom'"
-    class="defaultValueItem"
-    label="默认值"
     :required="formValue.required"
     prop="default_value"
     :rules="
@@ -194,15 +179,18 @@ onMounted(() => {
         ? [
             {
               required: true,
-              message: '默认值为必填属性',
+              message: '请输入默认值',
             },
           ]
         : []
     "
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
     <MultiRow
       :form-field="formField"
       v-model="formValue.default_value"
@@ -212,13 +200,4 @@ onMounted(() => {
     </MultiRow>
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
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 354a4b08d48..2d37f082e7a 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/MultiSelectConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { computed, onMounted, inject } from 'vue'
+import MkFormList from '@/components/mk-form-list/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import type { DynamicFormValidatorCallback, DynamicFormValue } from '../../type'
+import type {
+  DynamicFormConstructorOption,
+  DynamicFormValidatorCallback,
+  DynamicFormValue,
+} from '../../type'
 const getModel = inject<() => DynamicFormValue>('getModel')
 
 const assignmentMethodOptions = computed(() => {
@@ -44,7 +49,7 @@ const referenceVariableRule = {
   required: true,
   validator: (_rule: unknown, value: DynamicFormValue, callback: DynamicFormValidatorCallback) => {
     if (!(Array.isArray(value) && value.length > 1)) {
-      callback('引用变量必填')
+      callback('请输入引用变量')
     }
 
     return true
@@ -55,12 +60,12 @@ const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }
 
-const delOption = (index: number) => {
-  const option = formValue.value.option_list[index]
-  if (option.value && formValue.value.default_value === option.value) {
-    formValue.value.default_value = ''
+const handleOptionRemove = (option: DynamicFormConstructorOption) => {
+  if (Array.isArray(formValue.value.default_value)) {
+    formValue.value.default_value = formValue.value.default_value.filter(
+      (value: DynamicFormValue) => value !== option.value,
+    )
   }
-  formValue.value.option_list.splice(index, 1)
 }
 
 const getData = () => {
@@ -94,42 +99,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form-item v-if="getModel">
-    <template #label>
-      <div class="flex-between">赋值方式</div>
-    </template>
-
-    <el-row class="w-full">
-      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
-        <el-radio
-          :value="item.value"
-          size="large"
-          v-for="(item, index) in assignmentMethodOptions"
-          :key="index"
-        >
-          <span class="flex align-center">
-            {{ item.label }}
+  <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">
+          {{ item.label }}
 
-            <el-tooltip effect="dark" 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: 是否为默认值
-              </template>
-              <MkIcon name="icon_warning_filled" class="app-warning-icon ml-4"></MkIcon>
-            </el-tooltip>
-          </span>
-        </el-radio>
-      </el-radio-group>
-    </el-row>
+          <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: 是否为默认值
+            </template>
+            <MkIcon name="icon_info_outlined"></MkIcon>
+          </el-tooltip>
+        </span>
+      </el-radio>
+    </el-radio-group>
   </el-form-item>
   <el-form-item
     v-if="formValue.assignment_method === 'ref_variables'"
@@ -146,44 +141,35 @@ onMounted(() => {
     />
   </el-form-item>
 
-  <el-form-item v-if="formValue.assignment_method === 'custom'">
-    <template #label>
-      <div class="flex-between">
-        选项值
-        <el-button link type="primary" @click.stop="addOption()">
-          <MkIcon name="icon_add_outlined" class="mr-4"></MkIcon>
-          添加
-        </el-button>
-      </div>
-    </template>
-    <el-row style="width: 100%" :gutter="10">
-      <el-col :span="10"> 标签 </el-col>
-      <el-col :span="12"> 选项值 </el-col>
-    </el-row>
-    <el-row
-      style="width: 100%"
-      v-for="(option, $index) in formValue.option_list"
-      :key="$index"
-      :gutter="10"
-      class="mb-8"
-    >
-      <el-col :span="10">
-        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签" />
-      </el-col>
-      <el-col :span="12">
-        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值" />
-      </el-col>
-      <el-col :span="1">
-        <el-button link class="ml-8" @click.stop="delOption(Number($index))">
-          <MkIcon name="icon_delete-trash_outlined"></MkIcon>
-        </el-button>
-      </el-col>
-    </el-row>
-  </el-form-item>
+  <div v-if="formValue.assignment_method === 'custom'" class="mb-4">
+    <div class="flex-between mb-2">
+      <span>选项值</span>
+      <el-button text type="primary" @click.stop="addOption()">
+        <MkIcon name="icon_add_outlined"></MkIcon>
+      </el-button>
+    </div>
+
+    <div class="w-full rounded-md bg-N100 p-3">
+      <MkFormList
+        v-model="formValue.option_list"
+        :default-item="{ label: '', value: '' }"
+        :show-add-button="false"
+        @remove="handleOptionRemove"
+      >
+        <template #default="{ index, item: option }">
+          <el-form-item :label="index === 0 ? '标签' : ''" class="flex-1">
+            <el-input v-model="option.label" placeholder="请输入选项标签" />
+          </el-form-item>
+          <el-form-item :label="index === 0 ? '选项值' : ''" class="flex-1">
+            <el-input v-model="option.value" placeholder="请输入选项值" />
+          </el-form-item>
+        </template>
+      </MkFormList>
+    </div>
+  </div>
   <el-form-item
+    class="mk-hide-asterisk"
     v-if="formValue.assignment_method === 'custom'"
-    class="defaultValueItem"
-    label="默认值"
     :required="formValue.required"
     prop="default_value"
     :rules="
@@ -191,17 +177,19 @@ onMounted(() => {
         ? [
             {
               required: true,
-              message: '默认值为必填属性',
+              message: '请输入默认值',
             },
           ]
         : []
     "
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
     <el-select
-      class="m-2"
       multiple
       collapse-tags
       filterable
@@ -209,7 +197,6 @@ onMounted(() => {
       :reserve-keyword="false"
       v-model="formValue.default_value"
       :teleported="false"
-      popper-class="custom-select-popper"
     >
       <el-option
         v-for="(option, index) in formValue.option_list"
@@ -220,13 +207,4 @@ onMounted(() => {
     </el-select>
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/PasswordInputConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/PasswordInputConstructor.vue
index d1f85009ac9..635e021fca2 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/PasswordInputConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/PasswordInputConstructor.vue
@@ -39,7 +39,7 @@ const getData = () => {
         ? [
             {
               required: true,
-              message: `${formValue.value.label} 为必填属性`,
+              message: `请输入 ${formValue.value.label}`,
             },
             {
               min: formValue.value.minlength,
@@ -91,67 +91,63 @@ onMounted(() => {
 
 <template>
   <el-form-item label="文本长度" required>
-    <el-row class="w-full">
-      <el-col :span="11">
-        <el-form-item
-          :rules="[
-            {
-              required: true,
-              message: '最小长度必填',
-              trigger: 'change',
-            },
-          ]"
-          prop="minlength"
-        >
-          <el-input-number
-            style="width: 100%"
-            :min="1"
-            :step="1"
-            step-strictly
-            v-model="formValue.minlength"
-            controls-position="right"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col :span="2" class="text-center">
-        <span>-</span>
-      </el-col>
-      <el-col :span="11">
-        <el-form-item
-          :rules="[
-            {
-              required: true,
-              message: '最大长度必填',
-              trigger: 'change',
-            },
-          ]"
-          prop="maxlength"
-        >
-          <el-input-number
-            style="width: 100%"
-            :min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
-            step-strictly
-            :step="1"
-            v-model="formValue.maxlength"
-            controls-position="right"
-          />
-        </el-form-item>
-      </el-col>
-    </el-row>
+    <div class="flex w-full items-start gap-2">
+      <el-form-item
+        class="min-w-0 flex-1"
+        :rules="[
+          {
+            required: true,
+            message: '请输入最小长度',
+            trigger: 'change',
+          },
+        ]"
+        prop="minlength"
+      >
+        <el-input-number
+          v-model="formValue.minlength"
+          class="w-full!"
+          :min="1"
+          :step="1"
+          controls-position="right"
+          step-strictly
+        />
+      </el-form-item>
+      <span class="flex-center shrink-0">-</span>
+      <el-form-item
+        class="min-w-0 flex-1"
+        :rules="[
+          {
+            required: true,
+            message: '请输入最大长度',
+            trigger: 'change',
+          },
+        ]"
+        prop="maxlength"
+      >
+        <el-input-number
+          v-model="formValue.maxlength"
+          class="w-full!"
+          :min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
+          :step="1"
+          controls-position="right"
+          step-strictly
+        />
+      </el-form-item>
+    </div>
   </el-form-item>
 
   <el-form-item
-    class="defaultValueItem"
+    class="mk-hide-asterisk"
     :required="formValue.required"
     prop="default_value"
-    label="默认值"
-    :rules="
-      formValue.required ? [{ required: true, message: '默认值为必填属性' }, ...rules] : rules
-    "
+    :rules="formValue.required ? [{ required: true, message: '请输入默认值' }, ...rules] : rules"
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
 
     <el-input
       v-model="formValue.default_value"
@@ -164,14 +160,4 @@ onMounted(() => {
     />
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
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 e4a2e616a63..7926182cb42 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/RadioCardConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/RadioCardConstructor.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
 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'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import type { DynamicFormValidatorCallback, DynamicFormValue, FormField } from '../../type'
+import type {
+  DynamicFormConstructorOption,
+  DynamicFormValidatorCallback,
+  DynamicFormValue,
+  FormField,
+} from '../../type'
 const getModel = inject<() => DynamicFormValue>('getModel')
 
 const assignmentMethodOptions = computed(() => {
@@ -40,11 +46,17 @@ const formValue = computed({
     return props.modelValue
   },
 })
+const hasOptionValue = computed(
+  () =>
+    formValue.value.option_list?.some((option: DynamicFormConstructorOption) =>
+      Boolean(option.value),
+    ) ?? false,
+)
 const referenceVariableRule = {
   required: true,
   validator: (_rule: unknown, value: DynamicFormValue, callback: DynamicFormValidatorCallback) => {
     if (!(Array.isArray(value) && value.length > 1)) {
-      callback('引用变量必填')
+      callback('请输入引用变量')
     }
 
     return true
@@ -55,12 +67,10 @@ const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }
 
-const delOption = (index: number) => {
-  const option = formValue.value.option_list[index]
+const handleOptionRemove = (option: DynamicFormConstructorOption) => {
   if (option.value && formValue.value.default_value === option.value) {
     formValue.value.default_value = ''
   }
-  formValue.value.option_list.splice(index, 1)
 }
 const formField = computed<FormField>(() => {
   return { field: '', ...getData() }
@@ -96,42 +106,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form-item v-if="getModel">
-    <template #label>
-      <div class="flex-between">赋值方式</div>
-    </template>
-
-    <el-row class="w-full">
-      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
-        <el-radio
-          :value="item.value"
-          size="large"
-          v-for="(item, index) in assignmentMethodOptions"
-          :key="index"
-        >
-          <span class="flex align-center">
-            {{ item.label }}
+  <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">
+          {{ item.label }}
 
-            <el-tooltip effect="dark" 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: 是否为默认值
-              </template>
-              <MkIcon name="icon_warning_filled" class="app-warning-icon ml-4"></MkIcon>
-            </el-tooltip>
-          </span>
-        </el-radio>
-      </el-radio-group>
-    </el-row>
+          <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: 是否为默认值
+            </template>
+            <MkIcon name="icon_info_outlined"></MkIcon>
+          </el-tooltip>
+        </span>
+      </el-radio>
+    </el-radio-group>
   </el-form-item>
   <el-form-item
     v-if="formValue.assignment_method === 'ref_variables'"
@@ -147,46 +147,36 @@ onMounted(() => {
       v-model="formValue.option_list"
     />
   </el-form-item>
-  <el-form-item v-if="formValue.assignment_method === 'custom'">
-    <template #label>
-      <div class="flex-between">
-        选项值
-        <el-button link type="primary" @click.stop="addOption()">
-          <MkIcon name="icon_add_outlined" class="mr-4"></MkIcon>
-          添加
-        </el-button>
-      </div>
-    </template>
+  <div v-if="formValue.assignment_method === 'custom'" class="mb-4">
+    <div class="flex-between mb-2">
+      <span>选项值</span>
+      <el-button text type="primary" @click.stop="addOption()">
+        <MkIcon name="icon_add_outlined"></MkIcon>
+      </el-button>
+    </div>
 
-    <el-row style="width: 100%" :gutter="10">
-      <el-col :span="10"> 标签 </el-col>
-      <el-col :span="12"> 选项值 </el-col>
-    </el-row>
-    <el-row
-      style="width: 100%"
-      v-for="(option, $index) in formValue.option_list"
-      :key="$index"
-      :gutter="10"
-      class="mb-8"
-    >
-      <el-col :span="10">
-        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签" />
-      </el-col>
-      <el-col :span="12">
-        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值" />
-      </el-col>
-      <el-col :span="1">
-        <el-button link class="ml-8" @click.stop="delOption(Number($index))">
-          <MkIcon name="icon_delete-trash_outlined"></MkIcon>
-        </el-button>
-      </el-col>
-    </el-row>
-  </el-form-item>
+    <div class="w-full rounded-md bg-N100 p-3">
+      <MkFormList
+        v-model="formValue.option_list"
+        :default-item="{ label: '', value: '' }"
+        :show-add-button="false"
+        @remove="handleOptionRemove"
+      >
+        <template #default="{ index, item: option }">
+          <el-form-item :label="index === 0 ? '标签' : ''" class="flex-1">
+            <el-input v-model="option.label" placeholder="请输入选项标签" />
+          </el-form-item>
+          <el-form-item :label="index === 0 ? '选项值' : ''" class="flex-1">
+            <el-input v-model="option.value" placeholder="请输入选项值" />
+          </el-form-item>
+        </template>
+      </MkFormList>
+    </div>
+  </div>
 
   <el-form-item
-    v-if="formValue.assignment_method === 'custom'"
-    class="defaultValueItem"
-    label="默认值"
+    class="mk-hide-asterisk"
+    v-if="formValue.assignment_method === 'custom' && hasOptionValue"
     :required="formValue.required"
     prop="default_value"
     :rules="
@@ -194,15 +184,18 @@ onMounted(() => {
         ? [
             {
               required: true,
-              message: '默认值为必填属性',
+              message: '请输入默认值',
             },
           ]
         : []
     "
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
     <RadioCard
       :form-field="formField"
       v-model="formValue.default_value"
@@ -212,13 +205,4 @@ onMounted(() => {
     </RadioCard>
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
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 a8655a17ffd..58e744003ee 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/RadioRowConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/RadioRowConstructor.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
 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'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import type { DynamicFormValidatorCallback, DynamicFormValue, FormField } from '../../type'
+import type {
+  DynamicFormConstructorOption,
+  DynamicFormValidatorCallback,
+  DynamicFormValue,
+  FormField,
+} from '../../type'
 
 const getModel = inject<() => DynamicFormValue>('getModel')
 
@@ -46,7 +52,7 @@ const referenceVariableRule = {
   required: true,
   validator: (_rule: unknown, value: DynamicFormValue, callback: DynamicFormValidatorCallback) => {
     if (!(Array.isArray(value) && value.length > 1)) {
-      callback('引用变量必填')
+      callback('请输入引用变量')
     }
 
     return true
@@ -57,12 +63,10 @@ const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }
 
-const delOption = (index: number) => {
-  const option = formValue.value.option_list[index]
+const handleOptionRemove = (option: DynamicFormConstructorOption) => {
   if (option.value && formValue.value.default_value === option.value) {
     formValue.value.default_value = ''
   }
-  formValue.value.option_list.splice(index, 1)
 }
 const formField = computed<FormField>(() => {
   return { field: '', ...getData() }
@@ -97,42 +101,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form-item v-if="getModel">
-    <template #label>
-      <div class="flex-between">赋值方式</div>
-    </template>
-
-    <el-row class="w-full">
-      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
-        <el-radio
-          :value="item.value"
-          size="large"
-          v-for="(item, index) in assignmentMethodOptions"
-          :key="index"
-        >
-          <span class="flex align-center">
-            {{ item.label }}
+  <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">
+          {{ item.label }}
 
-            <el-tooltip effect="dark" 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: 是否为默认值
-              </template>
-              <MkIcon name="icon_warning_filled" class="app-warning-icon ml-4"></MkIcon>
-            </el-tooltip>
-          </span>
-        </el-radio>
-      </el-radio-group>
-    </el-row>
+          <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: 是否为默认值
+            </template>
+            <MkIcon name="icon_info_outlined"></MkIcon>
+          </el-tooltip>
+        </span>
+      </el-radio>
+    </el-radio-group>
   </el-form-item>
   <el-form-item
     v-if="formValue.assignment_method === 'ref_variables'"
@@ -148,45 +142,35 @@ onMounted(() => {
       v-model="formValue.option_list"
     />
   </el-form-item>
-  <el-form-item v-if="formValue.assignment_method === 'custom'">
-    <template #label>
-      <div class="flex-between">
-        选项值
-        <el-button link type="primary" @click.stop="addOption()">
-          <MkIcon name="icon_add_outlined" class="mr-4"></MkIcon>
-          添加
-        </el-button>
-      </div>
-    </template>
+  <div v-if="formValue.assignment_method === 'custom'" class="mb-4">
+    <div class="flex-between mb-2">
+      <span>选项值</span>
+      <el-button text type="primary" @click.stop="addOption()">
+        <MkIcon name="icon_add_outlined"></MkIcon>
+      </el-button>
+    </div>
 
-    <el-row style="width: 100%" :gutter="10">
-      <el-col :span="10"> 标签 </el-col>
-      <el-col :span="12"> 选项值 </el-col>
-    </el-row>
-    <el-row
-      style="width: 100%"
-      v-for="(option, $index) in formValue.option_list"
-      :key="$index"
-      :gutter="10"
-      class="mb-8"
-    >
-      <el-col :span="10">
-        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签" />
-      </el-col>
-      <el-col :span="12">
-        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值" />
-      </el-col>
-      <el-col :span="1">
-        <el-button link class="ml-8" @click.stop="delOption(Number($index))">
-          <MkIcon name="icon_delete-trash_outlined"></MkIcon>
-        </el-button>
-      </el-col>
-    </el-row>
-  </el-form-item>
+    <div class="w-full rounded-md bg-N100 p-3">
+      <MkFormList
+        v-model="formValue.option_list"
+        :default-item="{ label: '', value: '' }"
+        :show-add-button="false"
+        @remove="handleOptionRemove"
+      >
+        <template #default="{ index, item: option }">
+          <el-form-item :label="index === 0 ? '标签' : ''" class="flex-1">
+            <el-input v-model="option.label" placeholder="请输入选项标签" />
+          </el-form-item>
+          <el-form-item :label="index === 0 ? '选项值' : ''" class="flex-1">
+            <el-input v-model="option.value" placeholder="请输入选项值" />
+          </el-form-item>
+        </template>
+      </MkFormList>
+    </div>
+  </div>
   <el-form-item
+    class="mk-hide-asterisk"
     v-if="formValue.assignment_method === 'custom'"
-    class="defaultValueItem"
-    label="默认值"
     :required="formValue.required"
     prop="default_value"
     :rules="
@@ -194,15 +178,18 @@ onMounted(() => {
         ? [
             {
               required: true,
-              message: '默认值为必填属性',
+              message: '请输入默认值',
             },
           ]
         : []
     "
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
     <RadioRow
       :form-field="formField"
       v-model="formValue.default_value"
@@ -212,13 +199,4 @@ onMounted(() => {
     </RadioRow>
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
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 496b0b0ff58..bcffda249c0 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/SingleSelectConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/SingleSelectConstructor.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { DynamicFormValidatorCallback, DynamicFormValue } from '../../type'
+import type {
+  DynamicFormConstructorOption,
+  DynamicFormValidatorCallback,
+  DynamicFormValue,
+} from '../../type'
 import { computed, onMounted, inject } from 'vue'
+import MkFormList from '@/components/mk-form-list/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
 const getModel = inject<() => DynamicFormValue>('getModel')
 
@@ -44,7 +49,7 @@ const referenceVariableRule = {
   required: true,
   validator: (_rule: unknown, value: DynamicFormValue, callback: DynamicFormValidatorCallback) => {
     if (!(Array.isArray(value) && value.length > 1)) {
-      callback('引用变量 必填')
+      callback('请输入引用变量')
     }
 
     return true
@@ -55,12 +60,10 @@ const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }
 
-const delOption = (index: number) => {
-  const option = formValue.value.option_list[index]
+const handleOptionRemove = (option: DynamicFormConstructorOption) => {
   if (option.value && formValue.value.default_value === option.value) {
     formValue.value.default_value = ''
   }
-  formValue.value.option_list.splice(index, 1)
 }
 
 const getData = () => {
@@ -95,42 +98,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form-item v-if="getModel">
-    <template #label>
-      <div class="flex-between">赋值方式</div>
-    </template>
-
-    <el-row class="w-full">
-      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
-        <el-radio
-          :value="item.value"
-          size="large"
-          v-for="(item, index) in assignmentMethodOptions"
-          :key="index"
-        >
-          <span class="flex align-center">
-            {{ item.label }}
+  <el-form-item v-if="getModel" label="赋值方式">
+    <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
+      <!-- // TODO 赋值方式待调整 -->
+      <el-radio :value="item.value" v-for="(item, index) in assignmentMethodOptions" :key="index">
+        <span class="flex align-center">
+          {{ item.label }}
 
-            <el-tooltip effect="dark" 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: 是否为默认值
-              </template>
-              <MkIcon name="icon_warning_filled" class="app-warning-icon ml-4"></MkIcon>
-            </el-tooltip>
-          </span>
-        </el-radio>
-      </el-radio-group>
-    </el-row>
+          <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: 是否为默认值
+            </template>
+            <MkIcon name="icon_info_outlined"></MkIcon>
+          </el-tooltip>
+        </span>
+      </el-radio>
+    </el-radio-group>
   </el-form-item>
   <el-form-item
     v-if="formValue.assignment_method === 'ref_variables'"
@@ -146,67 +139,55 @@ onMounted(() => {
       v-model="formValue.option_list"
     />
   </el-form-item>
-  <el-form-item v-if="formValue.assignment_method === 'custom'">
-    <template #label>
-      <div class="flex-between">
-        选项值
-        <el-button link type="primary" @click.stop="addOption()">
-          <MkIcon name="icon_add_outlined" class="mr-4"></MkIcon>
-          添加
-        </el-button>
-      </div>
-    </template>
+  <div v-if="formValue.assignment_method === 'custom'" class="mb-4">
+    <div class="flex-between mb-2">
+      <span>选项值</span>
+      <el-button text type="primary" @click.stop="addOption()">
+        <MkIcon name="icon_add_outlined"></MkIcon>
+      </el-button>
+    </div>
 
-    <el-row style="width: 100%" :gutter="10">
-      <el-col :span="10"> 标签 </el-col>
-      <el-col :span="12"> 选项值 </el-col>
-    </el-row>
-    <el-row
-      style="width: 100%"
-      v-for="(option, $index) in formValue.option_list"
-      :key="$index"
-      :gutter="10"
-      class="mb-8"
-    >
-      <el-col :span="10">
-        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签" />
-      </el-col>
-      <el-col :span="12">
-        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值" />
-      </el-col>
-      <el-col :span="1">
-        <el-button link class="ml-8" @click.stop="delOption(Number($index))">
-          <MkIcon name="icon_delete-trash_outlined"></MkIcon>
-        </el-button>
-      </el-col>
-    </el-row>
-  </el-form-item>
+    <div class="w-full rounded-md bg-N100 p-3">
+      <MkFormList
+        v-model="formValue.option_list"
+        :default-item="{ label: '', value: '' }"
+        :show-add-button="false"
+        @remove="handleOptionRemove"
+      >
+        <template #default="{ index, item: option }">
+          <el-form-item :label="index === 0 ? '标签' : ''" class="flex-1">
+            <el-input v-model="option.label" placeholder="请输入选项标签" />
+          </el-form-item>
+          <el-form-item :label="index === 0 ? '选项值' : ''" class="flex-1">
+            <el-input v-model="option.value" placeholder="请输入选项值" />
+          </el-form-item>
+        </template>
+      </MkFormList>
+    </div>
+  </div>
   <el-form-item
+    class="mk-hide-asterisk"
     v-if="formValue.assignment_method === 'custom'"
-    class="defaultValueItem"
     :required="formValue.required"
     prop="default_value"
-    label="默认值"
     :rules="
       formValue.required
         ? [
             {
               required: true,
-              message: '默认值 为必填属性',
+              message: '请输入默认值',
             },
           ]
         : []
     "
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
-
-    <el-select
-      v-model="formValue.default_value"
-      :teleported="false"
-      popper-class="custom-select-popper"
-    >
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
+    <el-select v-model="formValue.default_value" :teleported="false">
       <el-option
         v-for="(option, index) in formValue.option_list"
         :key="index"
@@ -216,13 +197,4 @@ onMounted(() => {
     </el-select>
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/SliderConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/SliderConstructor.vue
index b8bad501284..6dcd786cc1c 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/SliderConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/SliderConstructor.vue
@@ -28,7 +28,7 @@ const getData = () => {
     props_info: {
       rules: [
         {
-          message: formValue.value.label + ' ' + '不能为空',
+          message: `请输入 ${formValue.value.label}`,
           trigger: 'blur',
           required: formValue.value.required,
         },
@@ -68,7 +68,7 @@ const stepRules = [
         return false
       }
       if (!value) {
-        callback(new Error('步长值必填'))
+        callback(new Error('请输入步长值'))
         return false
       }
 
@@ -91,6 +91,7 @@ onBeforeMount(() => {
   <el-form-item label="是否带输入框" required prop="showInput" @click.prevent>
     <el-switch v-model="formValue.showInput" />
   </el-form-item>
+  <!-- // TODO 待调整 -->
   <el-form-item label="取值范围" required>
     <el-col :span="11" style="padding-left: 0">
       <el-form-item
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/SwitchInputConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/SwitchInputConstructor.vue
index 3b71f1f3378..e97a5370afd 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/SwitchInputConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/SwitchInputConstructor.vue
@@ -43,7 +43,7 @@ onMounted(() => {
         ? [
             {
               required: true,
-              message: '默认值为必填属性',
+              message: '请选择默认值',
             },
           ]
         : []
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/TextInputConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/TextInputConstructor.vue
index 6ae8f169410..7832cbf678a 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/TextInputConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/TextInputConstructor.vue
@@ -34,7 +34,7 @@ const getData = () => {
     props_info: {
       rules: formValue.value.required
         ? [
-            { required: true, message: `${formValue.value.label} 为必填属性` },
+            { required: true, message: `请输入 ${formValue.value.label}` },
             {
               min: formValue.value.minlength,
               max: formValue.value.maxlength,
@@ -82,66 +82,63 @@ onMounted(() => {
 
 <template>
   <el-form-item label="文本长度" required>
-    <el-row class="w-full">
-      <el-col :span="11">
-        <el-form-item
-          :rules="[
-            {
-              required: true,
-              message: '最小长度必填',
-              trigger: 'change',
-            },
-          ]"
-          prop="minlength"
-        >
-          <el-input-number
-            style="width: 100%"
-            :min="1"
-            :step="1"
-            step-strictly
-            v-model="formValue.minlength"
-            controls-position="right"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col :span="2" class="text-center">
-        <span>-</span>
-      </el-col>
-      <el-col :span="11">
-        <el-form-item
-          :rules="[
-            {
-              required: true,
-              message: '最大长度必填',
-              trigger: 'change',
-            },
-          ]"
-          prop="maxlength"
-        >
-          <el-input-number
-            style="width: 100%"
-            :min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
-            step-strictly
-            :step="1"
-            v-model="formValue.maxlength"
-            controls-position="right"
-        /></el-form-item>
-      </el-col>
-    </el-row>
+    <div class="flex w-full items-start gap-2">
+      <el-form-item
+        class="min-w-0 flex-1"
+        :rules="[
+          {
+            required: true,
+            message: '请输入最小长度',
+            trigger: 'change',
+          },
+        ]"
+        prop="minlength"
+      >
+        <el-input-number
+          v-model="formValue.minlength"
+          class="w-full!"
+          :min="1"
+          :step="1"
+          controls-position="right"
+          step-strictly
+        />
+      </el-form-item>
+      <span class="flex-center shrink-0">-</span>
+      <el-form-item
+        class="min-w-0 flex-1"
+        :rules="[
+          {
+            required: true,
+            message: '请输入最大长度',
+            trigger: 'change',
+          },
+        ]"
+        prop="maxlength"
+      >
+        <el-input-number
+          v-model="formValue.maxlength"
+          class="w-full!"
+          :min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
+          :step="1"
+          controls-position="right"
+          step-strictly
+        />
+      </el-form-item>
+    </div>
   </el-form-item>
 
   <el-form-item
-    class="defaultValueItem"
+    class="mk-hide-asterisk"
     :required="formValue.required"
     prop="default_value"
-    label="默认值"
-    :rules="
-      formValue.required ? [{ required: true, message: '默认值 为必填属性' }, ...rules] : rules
-    "
+    :rules="formValue.required ? [{ required: true, message: '请输入默认值' }, ...rules] : rules"
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
 
     <el-input
       v-model="formValue.default_value"
@@ -153,13 +150,4 @@ onMounted(() => {
     />
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/TextareaInputConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/TextareaInputConstructor.vue
index 8cb269f1638..df0113a30e7 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/TextareaInputConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/TextareaInputConstructor.vue
@@ -37,7 +37,7 @@ const getData = () => {
         ? [
             {
               required: true,
-              message: `${formValue.value.label} 为必填属性`,
+              message: `请输入 ${formValue.value.label}`,
             },
             {
               min: formValue.value.minlength,
@@ -86,75 +86,73 @@ onMounted(() => {
 
 <template>
   <el-form-item label="文本长度" required>
-    <el-row class="w-full">
-      <el-col :span="11">
-        <el-form-item
-          :rules="[
-            {
-              required: true,
-              message: '最小长度必填',
-              trigger: 'change',
-            },
-          ]"
-          prop="minlength"
-        >
-          <el-input-number
-            style="width: 100%"
-            :min="1"
-            :step="1"
-            step-strictly
-            v-model="formValue.minlength"
-            controls-position="right"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col :span="2" class="text-center">
-        <span>-</span>
-      </el-col>
-      <el-col :span="11">
-        <el-form-item
-          :rules="[
-            {
-              required: true,
-              message: '最大长度必填',
-              trigger: 'change',
-            },
-          ]"
-          prop="maxlength"
-        >
-          <el-input-number
-            style="width: 100%"
-            :min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
-            step-strictly
-            :step="1"
-            v-model="formValue.maxlength"
-            controls-position="right"
-        /></el-form-item>
-      </el-col>
-    </el-row>
+    <div class="flex w-full items-start gap-2">
+      <el-form-item
+        class="min-w-0 flex-1"
+        :rules="[
+          {
+            required: true,
+            message: '请输入最小长度',
+            trigger: 'change',
+          },
+        ]"
+        prop="minlength"
+      >
+        <el-input-number
+          v-model="formValue.minlength"
+          class="w-full!"
+          :min="1"
+          :step="1"
+          controls-position="right"
+          step-strictly
+        />
+      </el-form-item>
+      <span class="flex-center shrink-0">-</span>
+      <el-form-item
+        class="min-w-0 flex-1"
+        :rules="[
+          {
+            required: true,
+            message: '请输入最大长度',
+            trigger: 'change',
+          },
+        ]"
+        prop="maxlength"
+      >
+        <el-input-number
+          v-model="formValue.maxlength"
+          class="w-full!"
+          :min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
+          :step="1"
+          controls-position="right"
+          step-strictly
+        />
+      </el-form-item>
+    </div>
   </el-form-item>
 
   <el-form-item
-    class="defaultValueItem"
+    class="mk-hide-asterisk"
     :required="formValue.required"
     prop="default_value"
-    label="默认值"
     :rules="
       formValue.required
         ? [
             {
               required: true,
-              message: '默认值 为必填属性',
+              message: '请输入默认值',
             },
             ...rules,
           ]
         : rules
     "
   >
-    <div class="defaultValueCheckbox">
-      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-    </div>
-
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
     <el-input
       v-model="formValue.default_value"
       :maxlength="formValue.maxlength"
@@ -166,13 +164,4 @@ onMounted(() => {
     />
   </el-form-item>
 </template>
-<style lang="scss" scoped>
-.defaultValueItem {
-  position: relative;
-  .defaultValueCheckbox {
-    position: absolute;
-    right: 0;
-    top: -35px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/TreeSelectConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/TreeSelectConstructor.vue
index 13d164bbdbc..07a508576c6 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/TreeSelectConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/TreeSelectConstructor.vue
@@ -313,21 +313,26 @@ function removeNodeById(list: TreeNode[], targetId: string): boolean {
   </el-form-item>
 
   <el-form-item
-    class="defaultValueItem"
+    class="mk-hide-asterisk"
     :required="formValue.required"
     prop="default_value"
-    label="默认值"
     :rules="
       formValue.required
         ? [
             {
               required: true,
-              message: '默认值为必填属性',
+              message: '请输入默认值',
             },
           ]
         : []
     "
   >
+    <template #label>
+      <div class="flex-between">
+        <span :class="formValue.required ? 'mk-required' : ''">默认值</span>
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
     <el-tree-select
       v-model="formValue.default_value"
       :data="formValue.treeData"
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/UploadInputConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/UploadInputConstructor.vue
index 47612b975c0..b4d2e29bfb1 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/UploadInputConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/UploadInputConstructor.vue
@@ -76,6 +76,7 @@ onMounted(() => {
 </script>
 
 <template>
+  <!-- // TODO 待设计 -->
   <el-form-item label="单次上传最多文件数" required prop="limit">
     <el-input-number
       style="width: 100%"
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 effdcb6c25a..d1705dd99da 100644
--- a/ui/src/components/mk-dynamics-form/constructor/visibility/ConditionRow.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/visibility/ConditionRow.vue
@@ -2,7 +2,7 @@
 import { compareList } from '@/workflow-canvas/config/constants'
 import type { VisibilityConditionState, VisibilityFieldOption } from '../../type'
 import FieldSelector from './FieldSelector.vue'
-import { inferFieldType, getAllowedOps, getFieldConfig } from './index'
+import { getAllowedOps, getFieldConfig, inferFieldType } from './utils'
 
 const condition = defineModel<VisibilityConditionState>({ required: true })
 
@@ -10,31 +10,26 @@ const props = defineProps<{
   leftOptions?: VisibilityFieldOption[]
 }>()
 
-defineEmits<{
-  (e: 'delete'): void
-}>()
-
-function onFieldChange() {
+function handleFieldChange() {
   condition.value._fieldError = ''
   condition.value._compareError = ''
   condition.value._valueError = ''
 
   const fieldType = inferFieldType(condition.value.field, props.leftOptions)
   const fieldConfig = getFieldConfig(condition.value.field, props.leftOptions)
-
   const isTreeMultiple = fieldType === 'TreeSelect' && fieldConfig?.attrs?.multiple
-  const allowed = isTreeMultiple ? ['contain', 'not_contain'] : getAllowedOps(fieldType)
+  const allowedOperations = isTreeMultiple ? ['contain', 'not_contain'] : getAllowedOps(fieldType)
 
-  condition.value._ops = compareList.filter((op) => allowed.includes(op.value))
+  condition.value._ops = compareList.filter((operation) =>
+    allowedOperations.includes(operation.value),
+  )
   condition.value._fieldType = fieldType
   condition.value._options = fieldConfig?.option_list ?? []
   condition.value._treeData = fieldConfig?.attrs?.data ?? []
   condition.value._treeMultiple = isTreeMultiple
 
-  // 类型切换时重置 value
-  const isMultiple = ['MultiSelect'].includes(fieldType || '') || isTreeMultiple
-
-  if (!allowed.includes(condition.value.compare)) {
+  const isMultiple = fieldType === 'MultiSelect' || isTreeMultiple
+  if (!allowedOperations.includes(condition.value.compare)) {
     condition.value.compare = ''
     condition.value.value = isMultiple ? [] : ''
   }
@@ -42,91 +37,84 @@ function onFieldChange() {
 </script>
 
 <template>
-  <el-row :gutter="8" class="w-full">
-    <el-col :span="10">
-      <el-form-item :error="condition._fieldError">
-        <FieldSelector
-          v-model="condition.field"
-          @change="onFieldChange"
-          :left-options="leftOptions"
-          class="w-full"
-          placeholder="请选择变量"
-        />
-      </el-form-item>
-    </el-col>
-    <el-col :span="6">
-      <el-form-item :error="condition._compareError">
-        <el-select
-          v-model="condition.compare"
-          @change="condition._compareError = ''"
-          clearable
-          placeholder="请选择比较方式"
-        >
-          <el-option
-            v-for="op in condition._ops || compareList"
-            :key="op.value"
-            :label="op.label"
-            :value="op.value"
-          />
-        </el-select>
-      </el-form-item>
-    </el-col>
-    <el-col :span="6" v-if="!['is_true', 'is_not_true'].includes(condition.compare)">
-      <el-form-item :error="condition._valueError">
-        <el-select
-          v-if="['SingleSelect', 'RadioCard', 'RadioRow'].includes(condition._fieldType || '')"
-          v-model="condition.value"
-          @change="condition._valueError = ''"
-          clearable
-          placeholder="请输入比较值"
-        >
-          <el-option
-            v-for="o in condition._options || []"
-            :key="o.value"
-            :label="`${o.label} (${o.value})`"
-            :value="o.value"
-          />
-        </el-select>
+  <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>
+
+  <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-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-select
+      v-if="['SingleSelect', 'RadioCard', 'RadioRow'].includes(condition._fieldType || '')"
+      v-model="condition.value"
+      clearable
+      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"
-          @change="condition._valueError = ''"
-          multiple
-          clearable
-          placeholder="请输入比较值"
-        >
-          <el-option
-            v-for="o in condition._options || []"
-            :key="o.value"
-            :label="`${o.label} (${o.value})`"
-            :value="o.value"
-          />
-        </el-select>
+    <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>
 
-        <el-tree-select
-          v-else-if="condition._fieldType === 'TreeSelect'"
-          v-model="condition.value"
-          @change="condition._valueError = ''"
-          :data="condition._treeData || []"
-          :multiple="condition._treeMultiple"
-          :render-after-expand="false"
-          clearable
-          placeholder="请输入比较值"
-        />
+    <el-tree-select
+      v-else-if="condition._fieldType === 'TreeSelect'"
+      v-model="condition.value"
+      :data="condition._treeData || []"
+      :multiple="condition._treeMultiple"
+      :render-after-expand="false"
+      clearable
+      placeholder="请输入比较值"
+      @change="condition._valueError = ''"
+    />
 
-        <el-input
-          v-else
-          v-model="condition.value"
-          @input="condition._valueError = ''"
-          placeholder="请输入比较值"
-        />
-      </el-form-item>
-    </el-col>
-    <el-col :span="1">
-      <el-button link type="info" @click="$emit('delete')" class="mt-4">
-        <MkIcon name="icon_delete-trash_outlined" />
-      </el-button>
-    </el-col>
-  </el-row>
+    <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 b56aae0b337..cca507b79f0 100644
--- a/ui/src/components/mk-dynamics-form/constructor/visibility/FieldSelector.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/visibility/FieldSelector.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { VisibilityFieldOption } from '../../type'
 import { computed } from 'vue'
+import type { VisibilityFieldOption } from '../../type'
+import { handleNodeWheel } from '@/workflow-canvas/core/utils'
 const props = defineProps<{
   modelValue: string[]
   leftOptions?: VisibilityFieldOption[]
@@ -18,16 +19,6 @@ const data = computed({
 })
 const options = computed<VisibilityFieldOption[]>(() => props.leftOptions ?? [])
 
-const wheel = (event: WheelEvent) => {
-  if (event.ctrlKey) {
-    event.preventDefault()
-    return true
-  } else {
-    event.stopPropagation()
-    return true
-  }
-}
-
 const validate = () => {
   if (!data.value || data.value.length === 0) {
     return Promise.reject('请选择引用变量')
@@ -53,7 +44,7 @@ defineExpose({ validate })
 
 <template>
   <el-cascader
-    @wheel="wheel"
+    @wheel="handleNodeWheel"
     :teleported="true"
     :options="options"
     v-bind="$attrs"
@@ -62,7 +53,8 @@ defineExpose({ validate })
     clearable
   >
     <template #default="{ data }">
-      <span class="flex align-center" @wheel="wheel">
+      <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
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 0f40c2f96c6..c1d0868b55d 100644
--- a/ui/src/components/mk-dynamics-form/constructor/visibility/index.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/visibility/index.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, ref } from 'vue'
 import { randomId } from '@/utils/common'
+import MkFormList from '@/components/mk-form-list/index.vue'
 import type { VisibilityConditionState, VisibilityFieldOption, VisibilityRules } from '../../type'
-import { inferFieldType, getAllowedOps, getFieldConfig } from './index'
+import { inferFieldType, getAllowedOps, getFieldConfig } from './utils'
 import { compareList } from '@/workflow-canvas/config/constants'
 import ConditionRow from './ConditionRow.vue'
 
@@ -13,28 +14,35 @@ const props = defineProps<{
   leftOptions?: VisibilityFieldOption[]
 }>()
 
+const defaultCondition: VisibilityConditionState = {
+  id: '',
+  field: ['', ''],
+  compare: '',
+  value: '',
+}
+
 const formData = ref({
   action: 'show' as 'show' | 'hide',
   condition: 'and' as 'and' | 'or',
-  conditions: [] as VisibilityConditionState[],
+  conditions: [
+    { ...defaultCondition, id: randomId(), field: ['', ''] },
+  ] as VisibilityConditionState[],
 })
 
-function addCondition() {
-  formData.value.conditions.push({
-    id: randomId(),
-    field: ['', ''] as [string, string],
-    compare: '',
-    value: '',
-  })
-}
-
-function removeCondition(idx: number) {
-  formData.value.conditions.splice(idx, 1)
-}
-
-function updateCondition(index: number, condition: VisibilityConditionState) {
-  formData.value.conditions.splice(index, 1, condition)
-}
+const conditionRows = computed<VisibilityConditionState[]>({
+  get: () => formData.value.conditions,
+  set: (conditions) => {
+    formData.value.conditions = conditions.map((condition) =>
+      condition.id
+        ? condition
+        : {
+            ...condition,
+            id: randomId(),
+            field: [...condition.field] as [string, string],
+          },
+    )
+  },
+})
 
 function validate(): Promise<void> {
   let hasError = false
@@ -118,30 +126,19 @@ function render(rules: VisibilityRules | null) {
   }
 }
 
-onMounted(() => {
-  formData.value.conditions = [
-    {
-      id: randomId(),
-      field: ['', ''] as [string, string],
-      compare: '',
-      value: '',
-    },
-  ]
-})
-
 defineExpose({ getData, render, validate })
 </script>
 
 <template>
-  <div>
-    <el-radio-group v-model="formData.action" class="mb-8">
+  <div class="flex flex-col gap-4 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 mb-8">
+    <div class="flex align-center gap-2">
       <span class="lighter">满足</span>
-      <el-select v-model="formData.condition" size="small" style="width: 60px; margin: 0 8px">
+      <el-select v-model="formData.condition" size="small" class="w-20!">
         <el-option label="且" value="and" />
         <el-option label="或" value="or" />
       </el-select>
@@ -149,21 +146,17 @@ defineExpose({ getData, render, validate })
     </div>
 
     <el-scrollbar>
-      <div style="max-height: calc(100vh - 319px)">
-        <ConditionRow
-          v-for="(cond, idx) in formData.conditions"
-          :key="cond.id"
-          :model-value="cond"
-          @update:model-value="updateCondition(idx, $event)"
-          :left-options="leftOptions"
-          @delete="removeCondition(idx)"
-        />
+      <div style="max-height: calc(100vh - 400px)">
+        <MkFormList
+          v-model="conditionRows"
+          :default-item="defaultCondition"
+          :first-row-has-label="false"
+        >
+          <template #default="{ item: condition }">
+            <ConditionRow :model-value="condition" :left-options="leftOptions" />
+          </template>
+        </MkFormList>
       </div>
     </el-scrollbar>
-
-    <el-button link type="primary" @click="addCondition">
-      <MkIcon name="icon_add_outlined" class="mr-4" />
-      添加
-    </el-button>
   </div>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/constructor/visibility/index.ts b/ui/src/components/mk-dynamics-form/constructor/visibility/utils.ts
similarity index 100%
rename from ui/src/components/mk-dynamics-form/constructor/visibility/index.ts
rename to ui/src/components/mk-dynamics-form/constructor/visibility/utils.ts
diff --git a/ui/src/components/mk-dynamics-form/items/JsonInput.vue b/ui/src/components/mk-dynamics-form/items/JsonInput.vue
index d4e158d2ae6..a1c08e73cae 100644
--- a/ui/src/components/mk-dynamics-form/items/JsonInput.vue
+++ b/ui/src/components/mk-dynamics-form/items/JsonInput.vue
@@ -1,147 +1,23 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import JsonEditor from '@/components/codemirror-editor/Json.vue'
 import type { DynamicFormValue } from '../type'
-import { json, jsonParseLinter } from '@codemirror/lang-json'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { Codemirror } from 'vue-codemirror'
-import { linter } from '@codemirror/lint'
-import { computed, ref } from 'vue'
-const props = withDefaults(defineProps<{ modelValue?: DynamicFormValue }>(), {
-  modelValue: () => ({}),
-})
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: DynamicFormValue): void
-}>()
 
-const cachedModelValue = ref<string>()
+defineOptions({ name: 'DynamicFormJsonInput', inheritAttrs: false })
 
-const modelValueProxy = computed({
-  get: () => {
-    if (cachedModelValue.value) {
-      return cachedModelValue.value
-    }
-    return JSON.stringify(props.modelValue, null, 4) ?? '{}'
-  },
-  set: (v: string) => {
-    if (!v) {
-      emit('update:modelValue', JSON.parse('{}'))
-    } else {
-      try {
-        cachedModelValue.value = v
-        const result = JSON.parse(v)
-        emit('update:modelValue', result)
-      } catch {}
-    }
-  },
+const modelValue = defineModel<DynamicFormValue>({
+  default: () => ({}),
 })
 
-const extensions = [json(), linter(jsonParseLinter()), oneDark]
-
-const codemirrorStyle = {
-  height: '210px!important',
-  width: '100%',
-}
-
-// 弹出框相关代码
-const dialogVisible = ref<boolean>(false)
-
-const cloneContent = ref<string>('')
-
-const openCodemirrorDialog = () => {
-  cloneContent.value = modelValueProxy.value
-  dialogVisible.value = true
-}
+const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>()
 
-const format = () => {
-  try {
-    const jsonValue = JSON.parse(modelValueProxy.value)
-    modelValueProxy.value = JSON.stringify(jsonValue, null, 4)
-  } catch {}
-}
-
-function submitDialog() {
-  modelValueProxy.value = cloneContent.value
-  dialogVisible.value = false
-}
-/**
- * 校验格式
- * @param rule
- * @param value
- * @param callback
- */
-const validateRules = (
-  _rule: unknown,
-  _value: DynamicFormValue,
-  callback: (error?: Error) => void,
-) => {
-  if (modelValueProxy.value) {
-    try {
-      JSON.parse(modelValueProxy.value)
-    } catch {
-      callback(new Error('JSON 格式不正确'))
-      return false
-    }
-  }
-  return true
+function validateRules(rule: unknown, value: DynamicFormValue, callback: (error?: Error) => void) {
+  return jsonEditorRef.value?.validateRules(rule, value, callback)
 }
 
 defineExpose({ validateRules })
 </script>
 
 <template>
-  <div style="width: 100%" class="function-CodemirrorEditor">
-    <Codemirror
-      v-bind="$attrs"
-      ref="cmRef"
-      v-model="modelValueProxy"
-      :extensions="extensions"
-      :style="codemirrorStyle"
-      :tab-size="4"
-      :autofocus="true"
-    />
-    <div class="function-CodemirrorEditor__format">
-      <el-button text type="info" @click="format" class="magnify">
-        <el-icon><DocumentChecked /></el-icon>
-      </el-button>
-    </div>
-    <div class="function-CodemirrorEditor__footer">
-      <el-button text type="info" @click="openCodemirrorDialog" class="magnify">
-        <MkIcon name="icon_magnify_outlined" style="font-size: 16px"></MkIcon>
-      </el-button>
-    </div>
-    <!-- Codemirror 弹出层 -->
-    <el-dialog v-model="dialogVisible" title="默认值" append-to-body fullscreen>
-      <Codemirror
-        v-model="cloneContent"
-        :extensions="extensions"
-        :style="codemirrorStyle"
-        :tab-size="4"
-        :autofocus="true"
-        style="
-          height: calc(100vh - 160px) !important;
-          border: 1px solid #bbbfc4;
-          border-radius: 4px;
-        "
-      />
-      <template #footer>
-        <div class="dialog-footer mt-24">
-          <el-button type="primary" @click="submitDialog"> 确定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
+  <JsonEditor ref="jsonEditorRef" v-model="modelValue" v-bind="$attrs" />
 </template>
-<style lang="scss">
-.function-CodemirrorEditor__footer {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-}
-.function-CodemirrorEditor {
-  position: relative;
-}
-.function-CodemirrorEditor__format {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-</style>
diff --git a/ui/src/components/mk-dynamics-form/items/MultiRow.vue b/ui/src/components/mk-dynamics-form/items/MultiRow.vue
index 9ac756e9fba..93edde7d2a2 100644
--- a/ui/src/components/mk-dynamics-form/items/MultiRow.vue
+++ b/ui/src/components/mk-dynamics-form/items/MultiRow.vue
@@ -54,6 +54,7 @@ const options = computed(() => {
 </script>
 
 <template>
+  <!-- // TODO 重新设计 -->
   <div class="multi_row">
     <div
       v-for="item in options"
diff --git a/ui/src/components/mk-dynamics-form/items/common/SelectHeader.vue b/ui/src/components/mk-dynamics-form/items/common/SelectHeader.vue
deleted file mode 100644
index 9484ca6d2b9..00000000000
--- a/ui/src/components/mk-dynamics-form/items/common/SelectHeader.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { DynamicFormValue } from '../../type'
-defineProps<{
-  header: DynamicFormValue
-}>()
-</script>
-
-<template>
-  <div v-if="header">
-    <span>{{ header.label }}</span>
-    <span v-if="header.required" style="color: #f54a45; margin-left: 4px">*</span>
-    <el-tooltip v-if="header.tooltip" effect="dark" placement="right">
-      <template #content>
-        <div>{{ header.tooltip }}</div>
-      </template>
-      <MkIcon
-        name="icon_warning_filled"
-        class="app-warning-icon"
-        style="margin-left: 4px; flex-shrink: 0"
-      ></MkIcon>
-    </el-tooltip>
-  </div>
-</template>
-<style lang="scss"></style>
diff --git a/ui/src/components/mk-dynamics-form/items/knowledge/Knowledge.vue b/ui/src/components/mk-dynamics-form/items/knowledge/Knowledge.vue
index c6cc2334797..0f53a6b9acd 100644
--- a/ui/src/components/mk-dynamics-form/items/knowledge/Knowledge.vue
+++ b/ui/src/components/mk-dynamics-form/items/knowledge/Knowledge.vue
@@ -2,8 +2,6 @@
 import type { DynamicFormValue } from '../../type'
 import { computed } from 'vue'
 import type { FormField } from '../../type'
-
-import SelectHeader from '@/components/mk-dynamics-form/items/common/SelectHeader.vue'
 const props = withDefaults(
   defineProps<{
     modelValue?: string[]
@@ -47,9 +45,6 @@ const selectedIds = computed({
       class="w-full"
       placeholder="请选择知识库"
     >
-      <template #header v-if="$attrs.popperHeader">
-        <SelectHeader :header="$attrs.popperHeader" />
-      </template>
       <el-option v-for="item in availableList" :key="item.id" :label="item.name" :value="item.id">
         <el-space :size="8">
           <KnowledgeIcon :type="item.type" :size="20" style="--el-avatar-border-radius: 6px" />
diff --git a/ui/src/components/mk-dynamics-form/items/label/SettingLabel.vue b/ui/src/components/mk-dynamics-form/items/label/SettingLabel.vue
deleted file mode 100644
index d00e841d6d0..00000000000
--- a/ui/src/components/mk-dynamics-form/items/label/SettingLabel.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import type { DynamicFormValue } from '../../type'
-import { Setting } from '@element-plus/icons-vue'
-import DynamicsForm from '@/components/mk-dynamics-form/index.vue'
-import { ref } from 'vue'
-import { cloneDeep } from 'lodash'
-const props = defineProps<{
-  label: DynamicFormValue
-  modelValue?: DynamicFormValue
-  formValue: DynamicFormValue
-  view?: boolean
-}>()
-const emit = defineEmits(['update:modelValue'])
-const dialogVisible = ref<boolean>(false)
-const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
-const formData = ref<DynamicFormValue>(undefined)
-const open = () => {
-  if (props.modelValue) {
-    formData.value = cloneDeep(props.modelValue)
-  }
-  dialogVisible.value = true
-}
-const close = () => {
-  dialogVisible.value = false
-  formData.value = undefined
-}
-const submit = () => {
-  dynamicsFormRef.value?.validate().then(() => {
-    dialogVisible.value = false
-    emit('update:modelValue', formData.value)
-    formData.value = undefined
-  })
-}
-</script>
-
-<template>
-  <div class="flex-between w-full my-required">
-    <div>
-      <span> {{ label.label }}<span class="color-danger">*</span></span>
-    </div>
-
-    <el-tooltip v-if="label.attrs?.tooltip" effect="dark" placement="right">
-      <template #content
-        ><div style="max-width: 200px">{{ label.attrs.tooltip }}</div></template
-      >
-      <MkIcon name="icon_warning_filled" class="app-warning-icon" style="flex-shrink: 0"></MkIcon>
-    </el-tooltip>
-    <el-button type="primary" link @click="open()">
-      <MkIcon :icon="Setting"></MkIcon>
-    </el-button>
-    <el-dialog
-      destroy-on-close
-      v-model="dialogVisible"
-      title="Tips"
-      width="500"
-      :before-close="close"
-    >
-      <DynamicsForm
-        :read-only="view"
-        ref="dynamicsFormRef"
-        :render-data="label.children ? label.children : []"
-        label-position="top"
-        v-model="formData"
-        require-asterisk-position="right"
-        :model="formData"
-      ></DynamicsForm>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="close">取消</el-button>
-          <el-button type="primary" @click="submit"> 确定 </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
diff --git a/ui/src/components/mk-dynamics-form/items/label/TooltipLabel.vue b/ui/src/components/mk-dynamics-form/items/label/TooltipLabel.vue
index 7b199c1af46..9eccce6d9e6 100644
--- a/ui/src/components/mk-dynamics-form/items/label/TooltipLabel.vue
+++ b/ui/src/components/mk-dynamics-form/items/label/TooltipLabel.vue
@@ -14,7 +14,7 @@ defineProps<{
       <template #content
         ><div style="max-width: 200px">{{ label.attrs.tooltip }}</div></template
       >
-      <MkIcon name="icon_warning_filled" class="app-warning-icon" style="flex-shrink: 0"></MkIcon>
+      <MkIcon name="icon_info_outlined"></MkIcon>
     </el-tooltip>
   </div>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/items/layout/RowLayout.vue b/ui/src/components/mk-dynamics-form/items/layout/RowLayout.vue
deleted file mode 100644
index 054f15c8e08..00000000000
--- a/ui/src/components/mk-dynamics-form/items/layout/RowLayout.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-defineOptions({ name: 'DynamicFormRowLayout' })
-</script>
-
-<template>
-  <el-row />
-</template>
diff --git a/ui/src/components/mk-dynamics-form/items/model/Model.vue b/ui/src/components/mk-dynamics-form/items/model/Model.vue
index b788713b863..b91d3a41592 100644
--- a/ui/src/components/mk-dynamics-form/items/model/Model.vue
+++ b/ui/src/components/mk-dynamics-form/items/model/Model.vue
@@ -2,7 +2,6 @@
 import type { DynamicFormValue } from '../../type'
 import { computed } from 'vue'
 import { groupBy, flatMap } from 'lodash'
-import SelectHeader from '@/components/mk-dynamics-form/items/common/SelectHeader.vue'
 import { relatedObject } from '@/utils/common'
 import type { FormField } from '../../type'
 import { providerList } from './provider-data'
@@ -65,9 +64,6 @@ const handleModelChange = (selectedId: string) => {
       v-bind="$attrs"
       popper-class="select-model"
     >
-      <template #header v-if="$attrs.popperHeader">
-        <SelectHeader :header="$attrs.popperHeader" />
-      </template>
       <el-option-group
         v-for="(modelList, providerName) in groupedOptions"
         :key="providerName"
diff --git a/ui/src/components/mk-dynamics-form/items/radio/RadioCard.vue b/ui/src/components/mk-dynamics-form/items/radio/RadioCard.vue
index 77dead1c3b7..0cc07e255a9 100644
--- a/ui/src/components/mk-dynamics-form/items/radio/RadioCard.vue
+++ b/ui/src/components/mk-dynamics-form/items/radio/RadioCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DynamicFormValue } from '../../type'
-import { computed, ref, inject } from 'vue'
+import { computed, inject } from 'vue'
 import type { FormField } from '@/components/mk-dynamics-form/type'
 import { useFormDisabled, formItemContextKey } from 'element-plus'
 
@@ -18,26 +18,32 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 const elFormItem = inject(formItemContextKey, void 0)
-const selected = (activeValue: string | number) => {
+const emit = defineEmits<{
+  change: [value: DynamicFormValue]
+  'update:modelValue': [value: DynamicFormValue]
+}>()
+
+const isOptionActive = (optionValue: DynamicFormValue) => {
+  if (props.modelValue === optionValue) return true
+
+  return (
+    props.modelValue !== undefined &&
+    props.modelValue !== null &&
+    optionValue !== undefined &&
+    optionValue !== null &&
+    String(props.modelValue) === String(optionValue)
+  )
+}
+
+const selectOption = (activeValue: string | number) => {
+  if (inputDisabled.value) return
+
   emit('update:modelValue', activeValue)
+  emit('change', activeValue)
   if (elFormItem?.validate) {
     elFormItem.validate('change')
   }
 }
-const emit = defineEmits(['update:modelValue', 'change'])
-const width = ref<number>()
-const radioContentStyle = computed(() => {
-  if (width.value) {
-    if (width.value < 350) {
-      return { '--maxkb-radio-card-width': '316px' }
-    } else if (width.value > 770) {
-      return { '--maxkb-radio-card-width': '378px' }
-    } else {
-      return { '--maxkb-radio-card-width': '100%' }
-    }
-  }
-  return {}
-})
 
 const textField = computed(() => {
   return props.formField.text_field ? props.formField.text_field : 'key'
@@ -53,55 +59,18 @@ const options = computed(() => {
 </script>
 
 <template>
-  <div class="radio-card" :style="radioContentStyle">
-    <el-row :gutter="12" class="w-full">
-      <template v-for="(item, index) in options" :key="index">
-        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-          <el-card
-            :key="item.value"
-            class="item break-all"
-            shadow="never"
-            style="--el-card-padding: 12px 16px"
-            :class="[
-              inputDisabled ? 'is-disabled' : '',
-              modelValue === item[valueField] ? 'active' : '',
-            ]"
-            @click="inputDisabled ? () => {} : selected(item[valueField])"
-            :innerHTML="item[textField] ? item[textField] : '\u200D'"
-          >
-          </el-card>
-        </el-col>
-      </template>
-    </el-row>
+  <div class="grid w-full grid-cols-1 gap-2 lg:grid-cols-2">
+    <div
+      v-for="(item, index) in options"
+      :key="item[valueField] ?? index"
+      class="cursor-pointer break-all rounded-md border px-4 py-[3px] text-center"
+      :class="[
+        inputDisabled ? 'cursor-not-allowed! bg-N100! text-N600!' : '',
+        isOptionActive(item[valueField]) ? 'border-primary! text-primary!' : '',
+      ]"
+      @click="selectOption(item[valueField])"
+    >
+      <span v-html="item[textField] || '\u200D'"></span>
+    </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.radio-card {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  width: 100%;
-
-  .is-disabled {
-    border: 1px solid var(--el-card-border-color);
-    background-color: var(--el-fill-color-light);
-    color: var(--el-text-color-placeholder);
-    cursor: not-allowed;
-    &:hover {
-      cursor: not-allowed;
-    }
-  }
-  .active {
-    border: 1px solid var(--el-color-primary);
-    color: var(--el-color-primary);
-  }
-  .item {
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: var(--maxkb-radio-card-width, 100%);
-    margin: 4px;
-  }
-}
-</style>
diff --git a/ui/src/components/mk-dynamics-form/items/radio/RadioRow.vue b/ui/src/components/mk-dynamics-form/items/radio/RadioRow.vue
index 56f7c5ece38..384d3c8e9c6 100644
--- a/ui/src/components/mk-dynamics-form/items/radio/RadioRow.vue
+++ b/ui/src/components/mk-dynamics-form/items/radio/RadioRow.vue
@@ -37,6 +37,7 @@ const options = computed(() => {
 </script>
 
 <template>
+  <!-- // TODO 重新设计 -->
   <div class="radio-row">
     <div
       v-for="item in options"
diff --git a/ui/src/components/mk-dynamics-form/items/select/MultiSelect.vue b/ui/src/components/mk-dynamics-form/items/select/MultiSelect.vue
index 118ca172a4b..553836bdaad 100644
--- a/ui/src/components/mk-dynamics-form/items/select/MultiSelect.vue
+++ b/ui/src/components/mk-dynamics-form/items/select/MultiSelect.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DynamicFormValue } from '../../type'
 import type { FormField } from '@/components/mk-dynamics-form/type'
-import SelectHeader from '@/components/mk-dynamics-form/items/common/SelectHeader.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -46,7 +45,6 @@ const label = (option: DynamicFormValue) => {
 
 <template>
   <el-select
-    class="m-2"
     multiple
     filterable
     allow-create
@@ -56,9 +54,6 @@ const label = (option: DynamicFormValue) => {
     v-bind="$attrs"
     v-model="_modelValue"
   >
-    <template #header v-if="$attrs.popperHeader">
-      <SelectHeader :header="$attrs.popperHeader" />
-    </template>
     <el-option
       v-for="(item, index) in options"
       :key="index"
diff --git a/ui/src/components/mk-dynamics-form/items/select/SingleSelect.vue b/ui/src/components/mk-dynamics-form/items/select/SingleSelect.vue
index 86dcd9825e8..789b97b8de8 100644
--- a/ui/src/components/mk-dynamics-form/items/select/SingleSelect.vue
+++ b/ui/src/components/mk-dynamics-form/items/select/SingleSelect.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DynamicFormValue } from '../../type'
 import type { FormField } from '@/components/mk-dynamics-form/type'
-import SelectHeader from '@/components/mk-dynamics-form/items/common/SelectHeader.vue'
 import { computed, useAttrs } from 'vue'
 const attrs = useAttrs() as DynamicFormValue
 
@@ -52,17 +51,7 @@ const label = (option: DynamicFormValue) => {
 </script>
 
 <template>
-  <el-select
-    filterable
-    :teleported="true"
-    popper-class="dynamics-single-select"
-    clearable
-    v-bind="$attrs"
-    v-model="_modelValue"
-  >
-    <template #header v-if="$attrs.popperHeader">
-      <SelectHeader :header="$attrs.popperHeader" />
-    </template>
+  <el-select filterable :teleported="true" clearable v-bind="$attrs" v-model="_modelValue">
     <el-option
       v-for="(item, index) in options"
       :key="index"
@@ -73,10 +62,4 @@ const label = (option: DynamicFormValue) => {
     </el-option>
   </el-select>
 </template>
-<style lang="scss">
-.dynamics-single-select {
-  .el-select-dropdown {
-    max-width: 1px;
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/ui/src/components/mk-dynamics-form/items/slider/Slider.vue b/ui/src/components/mk-dynamics-form/items/slider/Slider.vue
index 2e27e11cec6..2d467becbed 100644
--- a/ui/src/components/mk-dynamics-form/items/slider/Slider.vue
+++ b/ui/src/components/mk-dynamics-form/items/slider/Slider.vue
@@ -3,5 +3,5 @@ defineOptions({ name: 'DynamicFormSlider' })
 </script>
 
 <template>
-  <el-slider v-bind="$attrs" show-input :show-input-controls="false" class="custom-slider" />
+  <el-slider v-bind="$attrs" show-input :show-input-controls="false"/>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/items/tree/TreeSelect.vue b/ui/src/components/mk-dynamics-form/items/tree/TreeSelect.vue
index 594ecc03088..db6a164154e 100644
--- a/ui/src/components/mk-dynamics-form/items/tree/TreeSelect.vue
+++ b/ui/src/components/mk-dynamics-form/items/tree/TreeSelect.vue
@@ -1,11 +1,5 @@
-<script setup lang="ts">
-import SelectHeader from '@/components/mk-dynamics-form/items/common/SelectHeader.vue'
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <el-tree-select v-bind="$attrs">
-    <template #header v-if="$attrs.popperHeader">
-      <SelectHeader :header="$attrs.popperHeader" />
-    </template>
-  </el-tree-select>
+  <el-tree-select v-bind="$attrs"> </el-tree-select>
 </template>
diff --git a/ui/src/components/mk-form-list/index.vue b/ui/src/components/mk-form-list/index.vue
index a023b249475..febaceaf0f8 100644
--- a/ui/src/components/mk-form-list/index.vue
+++ b/ui/src/components/mk-form-list/index.vue
@@ -3,15 +3,23 @@ defineOptions({ name: 'MkFormList' })
 
 const props = withDefaults(
   defineProps<{
-    addText: string
+    addText?: string
     defaultItem: T
+    firstRowHasLabel?: boolean
+    showAddButton?: boolean
   }>(),
   {
     addText: '添加',
+    firstRowHasLabel: true,
+    showAddButton: true,
   },
 )
 const formRows = defineModel<T[]>({ required: true })
 
+const emit = defineEmits<{
+  remove: [item: T, index: number]
+}>()
+
 defineSlots<{
   default(props: { index: number; item: T }): unknown
 }>()
@@ -22,21 +30,26 @@ function addRow() {
 
 function removeRow(index: number) {
   if (formRows.value.length === 1) return
+  const removedItem = formRows.value[index] as T
   formRows.value = formRows.value.filter((_, rowIndex) => rowIndex !== index)
+  emit('remove', removedItem, index)
 }
 </script>
 
 <template>
   <div v-for="(item, index) in formRows" :key="index" class="flex w-full gap-2">
     <slot :index="index" :item="item" />
-    <el-form-item class="shrink-0" :class="index === 0 ? 'mt-8' : 'mt-0.5'">
+    <el-form-item
+      class="shrink-0"
+      :class="firstRowHasLabel ? (index === 0 ? 'mt-8' : 'mt-0.5') : '-mt-4'"
+    >
       <el-button :disabled="formRows.length === 1" text @click="removeRow(index)">
         <MkIcon name="icon_delete-trash_outlined" class="text-N600" />
       </el-button>
     </el-form-item>
   </div>
 
-  <el-button class="-mt-1 mb-6" link type="primary" @click="addRow">
+  <el-button v-if="showAddButton" class="-mt-1 mb-6" link type="primary" @click="addRow">
     <MkIcon name="icon_add_outlined" />
     <span>{{ addText }}</span>
   </el-button>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index f1b03d12cf3..8220b5d3284 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -169,6 +169,14 @@ h6 {
     margin-left: 4px;
   }
 }
+/*
+  隐藏自带星号
+*/
+.mk-hide-asterisk {
+  .el-form-item__label::after {
+    display: none;
+  }
+}
 
 // 资源的card grid布局
 .mk-resource-card-grid {
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index a70a5f7d517..948dc339ba0 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -173,9 +173,6 @@
   &.is-always-shadow {
     border: none;
   }
-  &.is-never-shadow {
-    border: none;
-  }
   &.is-hover-shadow {
     cursor: pointer;
     &:hover {
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index e00ff1c0156..04680f0235a 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -94,7 +94,7 @@ Dialog。新增或重命名文件时，应同步更新所有导入和页面功
 | `login/LoginView.vue`                                                  | Admin 登录页面                         |
 | `login/ForgotPasswordView.vue`                                         | 忘记密码页面                           |
 | `model/ModelView.vue`                                                  | 工作空间模型目录与模型卡片页面         |
-| `system/SystemView.vue`                                                | System 模块通用占位页面                |
+             |
 | `system/identity/groups/UserGroupListView.vue`                         | 用户组列表页面                         |
 | `system/identity/resource-authorization/ResourceAuthorizationView.vue` | 工作空间用户组与用户的分类资源授权页面 |
 | `system/identity/roles/RoleListView.vue`                               | 角色列表页面                           |
diff --git a/ui/src/views/system/settings/authentication/components/LoginSetting.vue b/ui/src/views/system/settings/authentication/components/LoginSetting.vue
index b5bc3b356d4..cb091e65db1 100644
--- a/ui/src/views/system/settings/authentication/components/LoginSetting.vue
+++ b/ui/src/views/system/settings/authentication/components/LoginSetting.vue
@@ -183,7 +183,7 @@ onMounted(() => {
     </el-form-item>
 
     <el-form-item label="账号登录验证码设置" required>
-      <el-card shadow="never" class="bg-N100! w-full">
+      <div class="w-full rounded-md bg-N100 p-4">
         <div class="flex items-center gap-2">
           <span>登录失败</span>
           <el-input-number
@@ -218,10 +218,10 @@ onMounted(() => {
           />
           <span>分钟</span>
         </div>
-      </el-card>
+      </div>
     </el-form-item>
     <p class="mb-2">第三方用户默认角色分配</p>
-    <el-card shadow="never" class="bg-N100!">
+    <div class="w-full rounded-md bg-N100 p-4">
       <el-form-item label="角色" prop="role_id">
         <el-select
           v-model="form.role_id"
@@ -273,7 +273,7 @@ onMounted(() => {
           />
         </el-select>
       </el-form-item>
-    </el-card>
+    </div>
     <el-button class="mt-4" type="primary" @click="submit">保存</el-button>
   </el-form>
 </template>
diff --git a/ui/src/workflow-canvas/core/NodeCascader.vue b/ui/src/workflow-canvas/core/NodeCascader.vue
index 446aef4da2e..dd85fe76b8b 100644
--- a/ui/src/workflow-canvas/core/NodeCascader.vue
+++ b/ui/src/workflow-canvas/core/NodeCascader.vue
@@ -73,7 +73,7 @@ function refreshOptions(visible = true) {
 }
 
 function validate() {
-  if (selectedValue.value.length === 0) return Promise.reject('引用变量必填')
+  if (selectedValue.value.length === 0) return Promise.reject('请输入引用变量')
   if (selectedValue.value.length < 2) return Promise.reject('引用变量错误')
 
   const [nodeId, fieldValue] = selectedValue.value