diff --git a/src/views/flow/components/NodeTitle.vue b/src/views/flow/components/NodeTitle.vue
index 73d1b68..82022b3 100644
--- a/src/views/flow/components/NodeTitle.vue
+++ b/src/views/flow/components/NodeTitle.vue
@@ -174,7 +174,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  console.log(34566)
   emitter.off("deleteNode");
 })
 </script>
diff --git a/src/views/flow/components/ParamsDrawer.vue b/src/views/flow/components/ParamsDrawer.vue
index 5502a5f..7cb660d 100644
--- a/src/views/flow/components/ParamsDrawer.vue
+++ b/src/views/flow/components/ParamsDrawer.vue
@@ -1,1799 +1,80 @@
 <template>
   <el-drawer
-      v-model="props.drawer"
-      custom-class="custom-drawer-header"
-      :title="props.data.properties?.name || '参数配置'"
-      class="no-header-margin"
-
-      :before-close="confirm"
+    v-model="props.drawer"
+    custom-class="custom-drawer-header"
+    :title="props.data.properties?.name || '参数配置'"
+    class="no-header-margin"
+    :before-close="confirmSave"
   >
-    <div class="input__container" v-if="props.data.type === 'start'">
-      <el-collapse v-model="activeNames">
-        <el-collapse-item name="1" icon-position="left">
-          <template #title>
-            输入参数
-            <el-button
-              :circle="true"
-              size="small"
-              @click="(e) => addFormItem(e, 'nodeParams')"
-              class="addFormItem"
-            >
-              <el-icon :size="14"><Plus /></el-icon>
-            </el-button>
-          </template>
-          <el-form
-            :inline="true"
-            :model="formData"
-            :rules="rules"
-            ref="dynamicForm"
-            label-position="top"
-            label-width="auto"
-          >
-            <FormItemRecursive
-              formType="input"
-              :current-list="formData.inputParams"
-              prop-path="inputParams"
-              :depth="0"
-              :is-first-level="true"
-              :endDepth="2"
-              :parent-path="[]"
-              @delete-item="(path) => deleteTopLevelItem(path, 'inputParams')"
-            />
-          </el-form>
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-
-    <div v-if="['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(props.data.type)">
-      <el-collapse v-model="activeNames">
-        <el-collapse-item name="1" icon-position="left">
-          <template #title>
-            输入参数
-            <el-button
-              :circle="true"
-              size="small"
-              @click="(e) => addFormItem(e, 'nodeParams')"
-              class="addFormItem"
-            >
-              <el-icon :size="14"><Plus /></el-icon>
-            </el-button>
-          </template>
-          <div class="form__container">
-            <el-form
-              :inline="true"
-              :model="formData"
-              :rules="rules"
-              ref="dynamicForm"
-              label-position="top"
-              label-width="auto"
-            >
-              <div v-for="(property, index) in formData.nodeParams" :key="index">
-                <el-row>
-                  <el-form-item
-                    :label="index === 0 ? '参数名' : ''"
-                    :prop="`nodeParams.${index}.name`"
-                    :rules="[
-                      { required: true, message: '请输入参数名', trigger: 'blur' },
-                    ]"
-                  >
-                    <el-input
-                      :disabled="property?.disabled || false"
-                      class="param-name"
-                      v-model="property.name"
-                      placeholder="请输入"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    :label="index === 0 ? '参数值' : ''"
-                    :prop="`nodeParams.${index}.type`"
-                  >
-                    <el-select
-                      v-model="property.type"
-                      class="param-type"
-                      @change="handleTypeChange(index)"
-                    >
-                      <el-option label="引用" value="quote" />
-                      <el-option label="输入" value="input" />
-                    </el-select>
-                    <el-form-item
-                      v-if="property.type === 'input'"
-                      :rules="[
-                        {
-                          required: property?.required ?? true,
-                          message: '请输入参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`nodeParams.${index}.input`"
-                    >
-                      <el-input-number
-                        class="param-value"
-                        v-if="property.componentType === 'number'"
-                        v-model="property.input"
-                        :min="0"
-                        :max="property.max || Infinity"
-                        :controls="false"
-                        :step-strictly="true"
-                        placeholder="请输入"
-                        clearable
-                      />
-                      <el-select
-                        v-model="property.input"
-                        class="param-value"
-                        v-else-if="property.componentType === 'select'"
-                      >
-                        <el-option
-                          v-for="item in property.selectOptions"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
-                      </el-select>
-                      <el-input
-                        class="param-value"
-                        v-else
-                        v-model="property.input"
-                        placeholder="请输入"
-                        clearable
-                      />
-                    </el-form-item>
-                    <el-form-item
-                      v-if="property.type === 'quote'"
-                      :rules="[
-                        {
-                          required: true,
-                          message: '请选择参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`nodeParams.${index}.quote`"
-                    >
-                      <el-cascader
-                        :ref="
-                          (el) => {
-                            if (el) cascaderRefs[index] = el;
-                          }
-                        "
-                        v-model="property.quote"
-                        :checkStrictly="true"
-                        :options="quoteOptions"
-                        placeholder="请选择"
-                        @visible-change="
-                          (visible) => visibleChange(visible, index, property.quote)
-                        "
-                        @change="(value) => cascaderChange(value, index)"
-                      />
-                    </el-form-item>
-                  </el-form-item>
-                  <el-button
-                    :icon="Minus"
-                    circle
-                    size="small"
-                    :disabled="property?.disabled || false"
-                    @click="handleDelete(index)"
-                    class="deleteBtn"
-                  />
-                </el-row>
-              </div>
-            </el-form>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="2" icon-position="left">
-          <template #title>
-            输出参数
-            <el-button
-              :circle="true"
-              size="small"
-              @click="(e) => addFormItem(e, 'outputParams')"
-              class="addFormItem"
-            >
-              <el-icon :size="14"><Plus /></el-icon>
-            </el-button>
-          </template>
-          <div class="form__container">
-            <el-form
-              :inline="true"
-              :model="formData"
-              label-position="top"
-              label-width="auto"
-              :rules="outputRules"
-              ref="outputFormRef"
-            >
-              <FormItemRecursive
-                formType="output"
-                :current-list="formData.outputParams"
-                prop-path="outputParams"
-                :depth="0"
-                :is-first-level="true"
-                :endDepth="2"
-                :parent-path="[]"
-                @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
-              />
-            </el-form>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-    
-    <div v-if="props.data.type === 'code'">
-      <el-collapse v-model="activeNames">
-        <el-collapse-item name="1" icon-position="left">
-          <template #title>
-            输入参数
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              content="这里输入的变量可以被下方的代码引用。"
-              placement="top"
-            >
-              <el-icon class="header-icon" style="margin-left: 6px">
-                <info-filled />
-              </el-icon>
-            </el-tooltip>
-          </template>
-          <div class="form__container">
-            <el-form
-              :inline="true"
-              :model="formData"
-              :rules="rules"
-              ref="dynamicForm"
-              label-position="top"
-              label-width="auto"
-            >
-              <div v-for="(property, index) in formData.nodeParams" :key="index">
-                <el-row v-if="property.name !== 'code'">
-                  <el-form-item
-                    :label="index === 0 ? '参数名' : ''"
-                    :prop="`nodeParams.${index}.name`"
-                    :rules="[
-                      { required: true, message: '请输入参数名', trigger: 'blur' },
-                    ]"
-                  >
-                    <el-input
-                      :disabled="property?.disabled || false"
-                      class="param-name"
-                      v-model="property.name"
-                      placeholder="请输入"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    :label="index === 0 ? '参数值' : ''"
-                    :prop="`nodeParams.${index}.type`"
-                  >
-                    <el-select
-                      v-model="property.type"
-                      class="param-type"
-                      @change="handleTypeChange(index)"
-                    >
-                      <el-option label="引用" value="quote" />
-                      <el-option label="输入" value="input" />
-                    </el-select>
-                    <el-form-item
-                      v-if="property.type === 'input'"
-                      :rules="[
-                        {
-                          required: property?.required ?? true,
-                          message: '请输入参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`nodeParams.${index}.input`"
-                    >
-                      <el-input-number
-                        class="param-value"
-                        v-if="property.componentType === 'number'"
-                        v-model="property.input"
-                        :min="0"
-                        :max="property.max || Infinity"
-                        :controls="false"
-                        :step-strictly="true"
-                        placeholder="请输入"
-                        clearable
-                      />
-                      <el-select
-                        v-model="property.input"
-                        class="param-value"
-                        v-else-if="property.componentType === 'select'"
-                      >
-                        <el-option
-                          v-for="item in property.selectOptions"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
-                      </el-select>
-                      <el-input
-                        class="param-value"
-                        v-else
-                        v-model="property.input"
-                        placeholder="请输入"
-                        clearable
-                      />
-                    </el-form-item>
-                    <el-form-item
-                      v-if="property.type === 'quote'"
-                      :rules="[
-                        {
-                          required: true,
-                          message: '请选择参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`nodeParams.${index}.quote`"
-                    >
-                      <el-cascader
-                        :ref="
-                          (el) => {
-                            if (el) cascaderRefs[index] = el;
-                          }
-                        "
-                        v-model="property.quote"
-                        :checkStrictly="true"
-                        :options="quoteOptions"
-                        placeholder="请选择"
-                        @visible-change="
-                          (visible) => visibleChange(visible, index, property.quote)
-                        "
-                        @change="(value) => cascaderChange(value, index)"
-                      />
-                    </el-form-item>
-                  </el-form-item>
-                  <el-button
-                    :icon="Minus"
-                    circle
-                    size="small"
-                    @click="handleDelete(index)"
-                    :disabled="property?.disabled || false"
-                    class="deleteBtn"
-                  />
-                </el-row>
-              </div>
-            </el-form>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item title="代码" name="2" icon-position="left">
-          <div class="code__container">
-            <div ref="codeRef" style="width: 100%; height: 100%"></div>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="3" icon-position="left">
-          <template #title>
-            输出参数
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              content="这里定义的输出变量可以被后续节点引用。"
-              placement="top"
-            >
-              <el-icon class="header-icon" style="margin-left: 6px">
-                <info-filled />
-              </el-icon>
-            </el-tooltip>
-            <el-button
-              :circle="true"
-              size="small"
-              @click="(e) => addFormItem(e, 'outputParams')"
-              class="addFormItem"
-            >
-              <el-icon :size="14"><Plus /></el-icon>
-            </el-button>
-          </template>
-          <div class="form__container">
-            <el-form
-              :inline="true"
-              :model="formData"
-              label-position="top"
-              label-width="auto"
-              :rules="outputRules"
-              ref="outputFormRef"
-            >
-              <FormItemRecursive
-                formType="output"
-                :current-list="formData.outputParams"
-                prop-path="outputParams"
-                :depth="0"
-                :is-first-level="true"
-                :endDepth="2"
-                :parent-path="[]"
-                @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
-              />
-            </el-form>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-
-    </div>
-
-    <div v-if="props.data.type === 'http'">
-      <el-form
-        :inline="true"
-        :model="httpNodeData"
-        :rules="rules"
-        class="http-form"
-        ref="dynamicForm"
-        label-position="top"
-        label-width="auto"
-      >
-        <el-collapse v-model="activeNames">
-          <el-collapse-item name="1" icon-position="left">
-            <template #title>
-              请求配置
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                content="支持HTTP/HTTPS协议"
-                placement="top"
-              >
-                <el-icon class="header-icon" style="margin-left: 6px">
-                  <info-filled />
-                </el-icon>
-              </el-tooltip>
-            </template>
-            <div class="form__container">
-              <div v-for="(property, index) in httpNodeData.config" :key="index">
-                <el-row>
-                  <el-form-item
-                    :label="index === 0 ? '参数名' : ''"
-                    :prop="`config.${index}.name`"
-                    :rules="[
-                      { required: true, message: '请输入参数名', trigger: 'blur' },
-                    ]"
-                  >
-                    <el-input
-                      :disabled="true"
-                      class="param-name"
-                      v-model="property.name"
-                      placeholder="请输入"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    :label="index === 0 ? '参数值' : ''"
-                    :prop="`config.${index}.input`"
-                  >
-                    <el-select
-                      v-model="property.type"
-                      class="param-type"
-                      @change="handleTypeChange(index)"
-                    >
-                      <el-option label="引用" value="quote" />
-                      <el-option label="输入" value="input" />
-                    </el-select>
-                    <el-form-item
-                      v-if="property.type === 'input'"
-                      :rules="[
-                        {
-                          required: property?.required ?? true,
-                          message: '请输入参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`config.${index}.input`"
-                    >
-                      <el-input-number
-                        class="param-value"
-                        v-if="property.componentType === 'number'"
-                        v-model="property.input"
-                        :min="0"
-                        :max="property.max || Infinity"
-                        :controls="false"
-                        :step-strictly="true"
-                        placeholder="请输入"
-                        clearable
-                      />
-                      <el-select
-                        v-model="property.input"
-                        class="param-value"
-                        v-else-if="property.componentType === 'select'"
-                      >
-                        <el-option
-                          v-for="item in property.selectOptions"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
-                      </el-select>
-                      <el-input
-                        class="param-value"
-                        v-else
-                        v-model="property.input"
-                        placeholder="请输入"
-                        clearable
-                      />
-                    </el-form-item>
-                    <el-form-item
-                      v-if="property.type === 'quote'"
-                      :rules="[
-                        {
-                          required: true,
-                          message: '请选择参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`config.${index}.quote`"
-                    >
-                      <el-cascader
-                        :ref="
-                          (el) => {
-                            if (el) cascaderRefs[index] = el;
-                          }
-                        "
-                        v-model="property.quote"
-                        :checkStrictly="true"
-                        :options="quoteOptions"
-                        placeholder="请选择"
-                        @visible-change="
-                          (visible) => visibleChange(visible, index, property.quote)
-                        "
-                        @change="(value) => cascaderChange(value, index)"
-                      />
-                    </el-form-item>
-                  </el-form-item>
-                </el-row>
-              </div>
-            </div>
-          </el-collapse-item>
-          <el-collapse-item name="2" icon-position="left">
-            <template #title>
-              Header配置
-              <el-button
-                :circle="true"
-                size="small"
-                @click="(e) => addHttpNodeFormItem(e, 'headers')"
-                class="addFormItem"
-              >
-                <el-icon :size="14"><Plus /></el-icon>
-              </el-button>
-            </template>
-            <div class="form__container">
-              <div v-for="(property, index) in httpNodeData.headers" :key="index">
-                <el-row>
-                  <el-form-item
-                    :label="index === 0 ? '参数名' : ''"
-                    :prop="httpNodeData.headers.length > index ? `headers.${index}.name` : undefined"
-                    :rules="[
-                      { required: true, message: '请输入参数名', trigger: 'blur' },
-                    ]"
-                  >
-                    <el-input
-                      class="param-name"
-                      v-model="property.name"
-                      placeholder="请输入"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    :label="index === 0 ? '参数值' : ''"
-                    :prop="httpNodeData.headers.length > index ? `headers.${index}.input` : undefined"
-                  >
-                    <el-select
-                      v-model="property.type"
-                      class="param-type"
-                      @change="handleTypeChange(index)"
-                    >
-                      <el-option label="引用" value="quote" />
-                      <el-option label="输入" value="input" />
-                    </el-select>
-                    <el-form-item
-                      v-if="property.type === 'input'"
-                      :rules="[
-                        {
-                          required: property?.required ?? true,
-                          message: '请输入参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`headers.${index}.input`"
-                    >
-                      <el-input-number
-                        class="param-value"
-                        v-if="property.componentType === 'number'"
-                        v-model="property.input"
-                        :min="0"
-                        :max="property.max || Infinity"
-                        :controls="false"
-                        :step-strictly="true"
-                        placeholder="请输入"
-                        clearable
-                      />
-                      <el-select
-                        v-model="property.input"
-                        class="param-value"
-                        v-else-if="property.componentType === 'select'"
-                      >
-                        <el-option
-                          v-for="item in property.selectOptions"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
-                      </el-select>
-                      <el-input
-                        class="param-value"
-                        v-else
-                        v-model="property.input"
-                        placeholder="请输入"
-                        clearable
-                      />
-                    </el-form-item>
-                    <el-form-item
-                      v-if="property.type === 'quote'"
-                      :rules="[
-                        {
-                          required: true,
-                          message: '请选择参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`headers.${index}.quote`"
-                    >
-                      <el-cascader
-                        :ref="
-                          (el) => {
-                            if (el) cascaderRefs[index] = el;
-                          }
-                        "
-                        v-model="property.quote"
-                        :checkStrictly="true"
-                        :options="quoteOptions"
-                        placeholder="请选择"
-                        @visible-change="
-                          (visible) => visibleChange(visible, index, property.quote)
-                        "
-                        @change="(value) => cascaderChange(value, index)"
-                      />
-                    </el-form-item>
-                  </el-form-item>
-                  <el-button
-                    :icon="Minus"
-                    circle
-                    size="small"
-                    @click="handleHttpNodeDelete('headers', index)"
-                    class="deleteBtn"
-                  />
-                </el-row>
-              </div>
-            </div>
-          </el-collapse-item>
-          <el-collapse-item name="3" icon-position="left">
-            <template #title>
-              Param配置
-              <el-button
-                :circle="true"
-                size="small"
-                @click="(e) => addHttpNodeFormItem(e, 'params')"
-                class="addFormItem"
-              >
-                <el-icon :size="14"><Plus /></el-icon>
-              </el-button>
-            </template>
-            <div class="form__container">
-              <div v-for="(property, index) in httpNodeData.params" :key="index">
-                <el-row>
-                  <el-form-item
-                    :label="index === 0 ? '参数名' : ''"
-                    :prop="httpNodeData.params.length > index ? `params.${index}.name` : undefined"
-                    :rules="[
-                      { required: true, message: '请输入参数名123', trigger: 'blur' },
-                    ]"
-                  >
-                    <el-input
-                      class="param-name"
-                      v-model="property.name"
-                      placeholder="请输入"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    :label="index === 0 ? '参数值' : ''"
-                    :prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined"
-                  >
-                    <el-select
-                      v-model="property.type"
-                      class="param-type"
-                      @change="handleTypeChange(index)"
-                    >
-                      <el-option label="引用" value="quote" />
-                      <el-option label="输入" value="input" />
-                    </el-select>
-                    <el-form-item
-                      v-if="property.type === 'input'"
-                      :rules="[
-                        {
-                          required: property?.required ?? true,
-                          message: '请输入参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined"
-                    >
-                      <el-input-number
-                        class="param-value"
-                        v-if="property.componentType === 'number'"
-                        v-model="property.input"
-                        :min="0"
-                        :max="property.max || Infinity"
-                        :controls="false"
-                        :step-strictly="true"
-                        placeholder="请输入"
-                        clearable
-                      />
-                      <el-select
-                        v-model="property.input"
-                        class="param-value"
-                        v-else-if="property.componentType === 'select'"
-                      >
-                        <el-option
-                          v-for="item in property.selectOptions"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
-                      </el-select>
-                      <el-input
-                        class="param-value"
-                        v-else
-                        v-model="property.input"
-                        placeholder="请输入"
-                        clearable
-                      />
-                    </el-form-item>
-                    <el-form-item
-                      v-if="property.type === 'quote'"
-                      :rules="[
-                        {
-                          required: true,
-                          message: '请选择参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`params.${index}.quote`"
-                    >
-                      <el-cascader
-                        :ref="
-                          (el) => {
-                            if (el) cascaderRefs[index] = el;
-                          }
-                        "
-                        v-model="property.quote"
-                        :checkStrictly="true"
-                        :options="quoteOptions"
-                        placeholder="请选择"
-                        @visible-change="
-                          (visible) => visibleChange(visible, index, property.quote)
-                        "
-                        @change="(value) => cascaderChange(value, index)"
-                      />
-                    </el-form-item>
-                  </el-form-item>
-                  <el-button
-                    :icon="Minus"
-                    circle
-                    size="small"
-                    @click="handleHttpNodeDelete('params', index)"
-                    class="deleteBtn"
-                  />
-                </el-row>
-              </div>
-            </div>
-          </el-collapse-item>
-          <el-collapse-item name="4" title="Body配置" icon-position="left">
-            <template #title>
-              Body配置
-              <el-button
-                :circle="true"
-                size="small"
-                @click="(e) => addHttpNodeFormItem(e, 'body')"
-                class="addFormItem"
-                v-if="httpNodeData.body.type === 'form-data'"
-              >
-                <el-icon :size="14"><Plus /></el-icon>
-              </el-button>
-            </template>
-            <div class="form__container">
-              <el-select v-model="httpNodeData.body.type">
-                <el-option label="JSON" value="json" />
-                <el-option label="form-data" value="form-data" />
-              </el-select>
-              <div class="code__container" v-show="httpNodeData.body.type === 'json'">
-                <div ref="codeRef" style="width: 100%; height: 100%"></div>
-              </div>
-              <div class="test" v-if="httpNodeData.body.type === 'form-data'">
-                <div v-for="(property, index) in httpNodeData.body.formData" :key="index">
-                  <el-row>
-                    <el-form-item
-                      :label="index === 0 ? '参数名' : ''"
-                      :prop="`body.formData.${index}.name`"
-                      :rules="[
-                        { required: true, message: '请输入参数名', trigger: 'blur' },
-                      ]"
-                    >
-                      <el-input
-                        class="param-name"
-                        v-model="property.name"
-                        placeholder="请输入"
-                        clearable
-                      />
-                    </el-form-item>
-                    <el-form-item
-                      :label="index === 0 ? '参数值' : ''"
-                      :prop="`body.formData.${index}.input`"
-                    >
-                      <el-select
-                        v-model="property.type"
-                        class="param-type"
-                        @change="handleTypeChange(index, 'httpBody')"
-                      >
-                        <el-option label="引用" value="quote" />
-                        <el-option label="输入" value="input" />
-                      </el-select>
-                      <el-form-item
-                        v-if="property.type === 'input'"
-                        :rules="[
-                          {
-                            required: property?.required ?? true,
-                            message: '请输入参数值',
-                            trigger: 'blur',
-                          },
-                        ]"
-                        :prop="`body.formData.${index}.input`"
-                      >
-                        <el-input-number
-                          class="param-value"
-                          v-if="property.componentType === 'number'"
-                          v-model="property.input"
-                          :min="0"
-                          :max="property.max || Infinity"
-                          :controls="false"
-                          :step-strictly="true"
-                          placeholder="请输入"
-                          clearable
-                        />
-                        <el-select
-                          v-model="property.input"
-                          class="param-value"
-                          v-else-if="property.componentType === 'select'"
-                        >
-                          <el-option
-                            v-for="item in property.selectOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                          />
-                        </el-select>
-                        <el-input
-                          class="param-value"
-                          v-else
-                          v-model="property.input"
-                          placeholder="请输入"
-                          clearable
-                        />
-                      </el-form-item>
-                      <el-form-item
-                        v-if="property.type === 'quote'"
-                        :rules="[
-                          {
-                            required: true,
-                            message: '请选择参数值',
-                            trigger: 'blur',
-                          },
-                        ]"
-                        :prop="`body.formData.${index}.quote`"
-                      >
-                        <el-cascader
-                          :ref="
-                            (el) => {
-                              if (el) cascaderRefs[index] = el;
-                            }
-                          "
-                          v-model="property.quote"
-                          :checkStrictly="true"
-                          :options="quoteOptions"
-                          placeholder="请选择"
-                          @visible-change="
-                            (visible) => visibleChange(visible, index, property.quote, 'httpBody')
-                          "
-                          @change="(value) => cascaderChange(value, index, 'httpBody')"
-                        />
-                      </el-form-item>
-                    </el-form-item>
-                    <el-button
-                    :icon="Minus"
-                    circle
-                    size="small"
-                    @click="handleHttpNodeDelete('body', index)"
-                    class="deleteBtn"
-                  />
-                  </el-row>
-                </div>
-              </div>
-            </div>
-          </el-collapse-item>
-        </el-collapse>
-      </el-form>
-    </div>
-
-    <div v-if="props.data.type === 'sdAgent'">
-      <el-form
-        :inline="true"
-        :model="sdAgentNodeData"
-        :rules="rules"
-        ref="dynamicForm"
-        class="http-form"
-        label-position="top"
-        label-width="auto"
-      >
-        <el-collapse v-model="activeNames">
-          <el-collapse-item name="1" title="请求配置" icon-position="left">
-            <div class="form__container">
-              <div v-for="(property, index) in sdAgentNodeData.config" :key="index">
-                <el-row>
-                  <el-form-item
-                    :label="index === 0 ? '参数名' : ''"
-                    :prop="`config.${index}.name`"
-                    :rules="[
-                      { required: true, message: '请输入参数名', trigger: 'blur' },
-                    ]"
-                  >
-                    <el-input
-                      :disabled="true"
-                      class="param-name"
-                      v-model="property.name"
-                      placeholder="请输入"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    :label="index === 0 ? '参数值' : ''"
-                    :prop="`config.${index}.input`"
-                  >
-                    <el-select
-                      v-model="property.type"
-                      class="param-type"
-                      @change="handleTypeChange(index)"
-                    >
-                      <el-option label="引用" value="quote" />
-                      <el-option label="输入" value="input" />
-                    </el-select>
-                    <el-form-item
-                      v-if="property.type === 'input'"
-                      :rules="[
-                        {
-                          required: property?.required ?? true,
-                          message: '请输入参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`config.${index}.input`"
-                    >
-                      <el-input-number
-                        class="param-value"
-                        v-if="property.componentType === 'number'"
-                        v-model="property.input"
-                        :min="0"
-                        :max="property.max || Infinity"
-                        :controls="false"
-                        :step-strictly="true"
-                        placeholder="请输入"
-                        clearable
-                      />
-                      <el-select
-                        v-model="property.input"
-                        class="param-value"
-                        v-else-if="property.componentType === 'select'"
-                      >
-                        <el-option
-                          v-for="item in property.selectOptions"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
-                      </el-select>
-                      <el-input
-                        class="param-value"
-                        v-else
-                        v-model="property.input"
-                        placeholder="请输入"
-                        clearable
-                      />
-                    </el-form-item>
-                    <el-form-item
-                      v-if="property.type === 'quote'"
-                      :rules="[
-                        {
-                          required: true,
-                          message: '请选择参数值',
-                          trigger: 'blur',
-                        },
-                      ]"
-                      :prop="`config.${index}.quote`"
-                    >
-                      <el-cascader
-                        :ref="
-                          (el) => {
-                            if (el) cascaderRefs[index] = el;
-                          }
-                        "
-                        v-model="property.quote"
-                        :checkStrictly="true"
-                        :options="quoteOptions"
-                        placeholder="请选择"
-                        @visible-change="
-                          (visible) => visibleChange(visible, index, property.quote)
-                        "
-                        @change="(value) => cascaderChange(value, index, 'sdAgentConfig')"
-                      />
-                    </el-form-item>
-                  </el-form-item>
-                </el-row>
-              </div>
-              <el-row>
-                <span style="margin-right: 24px">是否调用TTS接口</span>
-                <el-switch size="small" v-model="sdAgentNodeData.invokeTts" @change="handleTtsChange" />
-              </el-row>
-              <div v-if="sdAgentNodeData.invokeTts" >
-                <div style="margin: 10px 0">TTS参数设置</div>
-                <div v-for="(property, index) in sdAgentNodeData.tts" :key="index">
-                  <el-row>
-                    <el-form-item
-                      :label="index === 0 ? '参数名' : ''"
-                      :prop="`tts.${index}.name`"
-                      :rules="[
-                        { required: true, message: '请输入参数名', trigger: 'blur' },
-                      ]"
-                    >
-                      <el-input
-                        :disabled="true"
-                        class="param-name"
-                        v-model="property.name"
-                        placeholder="请输入"
-                        clearable
-                      />
-                    </el-form-item>
-                    <el-form-item
-                      :label="index === 0 ? '参数值' : ''"
-                      :prop="`tts.${index}.input`"
-                    >
-                      <el-select
-                        v-model="property.type"
-                        class="param-type"
-                        @change="handleTypeChange(index)"
-                      >
-                        <el-option label="引用" value="quote" />
-                        <el-option label="输入" value="input" />
-                      </el-select>
-                      <el-form-item
-                        v-if="property.type === 'input'"
-                        :rules="[
-                          {
-                            required: property?.required ?? true,
-                            message: '请输入参数值',
-                            trigger: 'blur',
-                          },
-                        ]"
-                        :prop="`tts.${index}.input`"
-                      >
-                        <el-input-number
-                          class="param-value"
-                          v-if="property.componentType === 'number'"
-                          v-model="property.input"
-                          :min="0"
-                          :max="property.max || Infinity"
-                          :controls="false"
-                          :step-strictly="true"
-                          placeholder="请输入"
-                          clearable
-                        />
-                        <el-select
-                          v-model="property.input"
-                          class="param-value"
-                          v-else-if="property.componentType === 'select'"
-                        >
-                          <el-option
-                            v-for="item in property.selectOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                          />
-                        </el-select>
-                        <el-input
-                          class="param-value"
-                          v-else
-                          v-model="property.input"
-                          placeholder="请输入"
-                          clearable
-                        />
-                      </el-form-item>
-                      <el-form-item
-                        v-if="property.type === 'quote'"
-                        :rules="[
-                          {
-                            required: true,
-                            message: '请选择参数值',
-                            trigger: 'blur',
-                          },
-                        ]"
-                        :prop="`tts.${index}.quote`"
-                      >
-                        <el-cascader
-                          :ref="
-                            (el) => {
-                              if (el) cascaderRefs[index] = el;
-                            }
-                          "
-                          v-model="property.quote"
-                          :checkStrictly="true"
-                          :options="quoteOptions"
-                          placeholder="请选择"
-                          @visible-change="
-                            (visible) => visibleChange(visible, index, property.quote)
-                          "
-                          @change="(value) => cascaderChange(value, index, 'sdAgentTts')"
-                        />
-                      </el-form-item>
-                    </el-form-item>
-                  </el-row>
-                </div>
-              </div>
-            </div>
-          </el-collapse-item>
-          <el-collapse-item name="3" icon-position="left">
-          <template #title>
-            输出参数
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              content="这里定义的输出变量可以被后续节点引用。"
-              placement="top"
-            >
-              <el-icon class="header-icon" style="margin-left: 6px">
-                <info-filled />
-              </el-icon>
-            </el-tooltip>
-            <el-button
-              :circle="true"
-              size="small"
-              @click="(e) => addSdAgentItem(e)"
-              class="addFormItem"
-            >
-              <el-icon :size="14"><Plus /></el-icon>
-            </el-button>
-          </template>
-          <div class="form__container">
-            <el-form
-              :inline="true"
-              :model="sdAgentNodeData"
-              label-position="top"
-              label-width="auto"
-              :rules="outputRules"
-              ref="outputFormRef"
-            >
-              <FormItemRecursive
-                formType="output"
-                :current-list="sdAgentNodeData.outputParams"
-                prop-path="outputParams"
-                :depth="0"
-                :is-first-level="true"
-                :endDepth="2"
-                :parent-path="[]"
-                @delete-item="(path) => deleteSdAgentItem(path, 'outputParams')"
-              />
-            </el-form>
-          </div>
-        </el-collapse-item>
-        </el-collapse>
-      </el-form>
-    </div>
-    <!-- <template #footer>
-      <el-button  @click="cancel">取消</el-button>
-      <el-button type="primary" @click="confirm">保存</el-button>
-    </template> -->
+    <component
+      :is="currentComponent"
+      ref="paramsComponentRef"
+      :data="props.data"
+      @save-success="handleSaveSuccess"
+      @save-error="handleSaveError"
+    />
   </el-drawer>
 </template>
 
 <script setup>
-import FormItemRecursive from "./FormItemRecursive.vue";
-import { Plus, Minus } from "@element-plus/icons-vue";
-import { getInput, transformHttpNodeData, transformSdAgentNodeData } from "@/utils/flow";
-import { emitter } from "@/utils/eventBus";
-import * as monaco from 'monaco-editor';
-import { nextTick, onUnmounted, watch } from "vue";
+import { ref, computed, watch } from 'vue'
+import { emitter } from '@/utils/eventBus'
+
+// 导入各子组件
+import StartParams from './params/StartParams.vue'
+import BasicNodeParams from './params/BasicNodeParams.vue'
+import CodeNodeParams from './params/CodeNodeParams.vue'
+import HttpNodeParams from './params/HttpNodeParams.vue'
+import SdAgentNodeParams from './params/SdAgentNodeParams.vue'
 
 const props = defineProps({
-    drawer: Boolean,
-    data: Object
+  drawer: Boolean,
+  data: Object
 })
 
 const emits = defineEmits(['close'])
+const paramsComponentRef = ref(null)
 
-const formData = reactive({
-  inputParams: [],
-  nodeParams: [],
-  outputParams: [],
-});
+// 根据节点类型决定渲染哪个子组件
+const currentComponent = computed(() => {
+  const type = props.data?.type
+  if (type === 'start') return StartParams
+  if (['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(type)) return BasicNodeParams
+  if (type === 'code') return CodeNodeParams
+  if (type === 'http') return HttpNodeParams
+  if (type === 'sdAgent') return SdAgentNodeParams
+  return null
+})
 
-const rules = reactive({});
-
-const codeRef = ref()
-let editorInstance
-
-const dynamicForm = ref()
-const outputFormRef = ref()
-
-const throwAnError = (flag) => {
-  if (dynamicForm.value) {
-    dynamicForm.value.clearValidate()
+// 这里提供一个公开方法供父组件调用
+const confirmSave = async () => {
+  if (paramsComponentRef.value && typeof paramsComponentRef.value.validateAndSave === 'function') {
+    await paramsComponentRef.value.validateAndSave()
   }
-  if (outputFormRef.value) {
-    outputFormRef.value.clearValidate()
-  }
-  emitter.emit("throwAnError", { id: props.data.id, hasError: flag });
+}
+
+// 暴露给父组件使用
+defineExpose({ confirmSave })
+
+// 保存成功 / 失败处理
+const handleSaveSuccess = () => {
+  emitter.emit('setProperties', { id: props.data.id })
+  emitter.emit("throwAnError", { id: props.data.id, hasError: false });
+  // 无错误，关闭抽屉
   emits('close')
 }
 
-const confirm = async () => {
-  if (props.data.type === 'http') {
-    if (dynamicForm.value) {
-      await dynamicForm.value.validate((valid, fields) => {
-        if (valid) {
-          
-          const nodeParams = []
-          nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
-          if (httpNodeData.value?.headers?.length > 0) {
-            nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
-          }
-          if (httpNodeData.value?.params?.length > 0) {
-            nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
-          }
-          
-          const bodyObj = { 
-            name: "body", type: "input", input: "", children: [
-              { name: 'bodyType', type: "input", input: httpNodeData.value.body.type, disabled: true },
-              { name: 'json', type: "input", input: httpNodeData.value.body.type === 'json' ? editorInstance.getValue() : '' },
-              { name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
-            ]
-          }
-          nodeParams.push(bodyObj)
-          lf.setProperties(props.data.id, {
-            ...props.data.properties,
-            nodeParams
-          });
-
-          emitter.emit("setProperties", { id: props.data.id});
-          if (httpNodeData.value.body.type === 'json') {
-            if (hasErrors()) {
-              throwAnError(true)
-            }
-          }
-          throwAnError(false)
-        } else {
-          throwAnError(true)
-        }
-      });
-    }
-  } else if (props.data.type === 'sdAgent') {
-    // 处理 sdAgent 节点的保存逻辑
-    let inputValidate = true
-    let outputValidate = true
-    if (dynamicForm.value) {
-      await dynamicForm.value.validate((valid) => {
-        if (!valid) {
-          inputValidate = false
-        }
-      });
-    }
-    if (outputFormRef.value) {
-      await outputFormRef.value.validate((valid) => {
-        if (!valid) {
-          outputValidate = false
-        }
-      })
-    }
-
-    const nodeParams = []
-    nodeParams.push({ name: "config", type: "input", input: "", children: sdAgentNodeData.value.config,  required: true })
-    nodeParams.push({ name: "invokeTts", type: "input", input: sdAgentNodeData.value.invokeTts })
-    if (sdAgentNodeData.value.invokeTts) {
-      nodeParams.push({ name: "tts", type: "input", input: "", children: sdAgentNodeData.value.tts })
-    }
-    lf.setProperties(props.data.id, {
-      ...props.data.properties,
-      nodeParams,
-      outputParams: sdAgentNodeData.value.outputParams
-    });
-
-    emitter.emit("setProperties", { id: props.data.id});
-
-    // 验证通过
-    if (inputValidate && outputValidate) {
-      throwAnError(false)
-    } else {
-      throwAnError(true)
-    }
-  } else {
-    if (props.data.type === 'code') {
-      const targetObj = formData.nodeParams.find(item => item.name === 'code');
-      if (targetObj) {
-        // 存在：修改该对象的 input 属性
-        targetObj.input = editorInstance.getValue();
-      } else {
-        formData.nodeParams.push(
-          { name: "code", type: "input", input: editorInstance.getValue() }
-        )
-      }
-
-    }
-    let inputValidate = true
-    let outputValidate = true
-    if (dynamicForm.value) {
-      await dynamicForm.value.validate((valid) => {
-        if (!valid) {
-          inputValidate = false
-        }
-      });
-    }
-    if (outputFormRef.value) {
-      await outputFormRef.value.validate((valid) => {
-        if (!valid) {
-          outputValidate = false
-        }
-      })
-    }
-
-    lf.setProperties(props.data.id, {
-      ...props.data.properties,
-      ...formData
-    });
-    emitter.emit("setProperties", { id: props.data.id});
-
-    // 验证通过
-    if (inputValidate && outputValidate) {
-      if (props.data.type === 'code') {
-        if (hasErrors()) {
-          throwAnError(true)
-        }
-      }
-
-      throwAnError(false)
-    } else {
-      throwAnError(true)
-    }
-  }
+const handleSaveError = () => {
+  emitter.emit('setProperties', { id: props.data.id })
+  emitter.emit("throwAnError", { id: props.data.id, hasError: true });
+  emits('close')
 }
 
-// 删除顶层表单项
-const deleteTopLevelItem = (fullPath, propPath) => {
-  // 从顶层数据开始查找
-  let currentLevel = formData[propPath];
-  
-  // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
-  for (let i = 0; i < fullPath.length - 1; i++) {
-    const index = fullPath[i];
-    // 进入下一层级
-    currentLevel = currentLevel[index].children;
-  }
-  
-  // 最后一个索引是当前层级要删除的项
-  const lastIndex = fullPath[fullPath.length - 1];
-  currentLevel.splice(lastIndex, 1);
-}
-
-const addFormItem = (e, type) => {
-  e.stopPropagation();
-  const obj ={
-    name: "",
-    type: type === 'nodeParams' ? 'input' : 'string',
-    required: false,
-    children: [],
-  }
-  if (type === 'inputParams') {
-    obj.desc = ''
-  } else if (type === 'nodeParams' || type === 'outputParams') {
-    obj.input = ''
-  }
-  if (!formData[type]) {
-    formData[type] = [];
-  }
-  formData[type].push(obj);
-};
-
-const handleDelete = (index) => {
-  formData.nodeParams.splice(index, 1);
-};
-
-const quoteOptions = ref([]);
-const handleTypeChange = (index, type = 'default') => {
-  if (type === 'default') {
-    if (formData.nodeParams[index].type === "input") {
-      formData.nodeParams[index].quote = "";
-    } else {
-      formData.nodeParams[index].input = "";
-      const option = getInput(props.data.id);
-      if (option) {
-        quoteOptions.value = option;
-      }
-    }
-  } else {
-    const bodyItem = formData.nodeParams.find(item => item.name === 'body');
-    if (bodyItem) {
-      const formDataItem = bodyItem.children.find(child => child.name === 'formData');
-      if (formDataItem) {
-        if (formDataItem.children[index].type === "input") {
-          formDataItem.children[index].quote = "";
-        } else {
-          formDataItem.children[index].input = "";
-          const option = getInput(props.data.id);
-          if (option) {
-            quoteOptions.value = option;
-          }
-        }
-      }
-    }
-  }
-};
-
-const cascaderRefs = ref([]);
-const cascaderChange = (value, index, type = 'default') => {
-  const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
-  if (type === 'default') {
-    formData.nodeParams[index].quote = value;
-    formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
-  }else if (type === 'sdAgentConfig') {
-    sdAgentNodeData.value.config[index].quote = value;
-    sdAgentNodeData.value.config[index].quoteType = selectedOptions[0].data.type;
-  } else if (type === 'sdAgentTts') {
-    sdAgentNodeData.value.tts[index].quote = value;
-    sdAgentNodeData.value.tts[index].quoteType = selectedOptions[0].data.type;
-  } else {
-    httpNodeData.value.body.formData[index].quote = value;
-    httpNodeData.value.body.formData[index].quoteType = selectedOptions[0].data.type;
-  }
-};
-
-const visibleChange = (value, index, quote = '', type = 'default') => {
-  if (value) {
-    const option = getInput(props.data.id);
-    if (option) {
-      quoteOptions.value = option;
-      const currentValue = [...quote];
-      // 强制级联选择器重新处理选中值与选项的匹配
-      if (cascaderRefs.value[index]) {
-        // 等待DOM更新后再设置值，确保新options已生效
-        setTimeout(() => {
-          // 如果当前有选中值，重新设置一次以触发重新匹配
-          if (currentValue.length > 0) {
-            if (type === 'default') {
-              formData.nodeParams[index].quote = [];
-              // 确保响应式更新
-              setTimeout(() => {
-                formData.nodeParams[index].quote = currentValue;
-              }, 0);
-            } else {
-              httpNodeData.value.body.formData[index].quote = [];
-              // 确保响应式更新
-              setTimeout(() => {
-                httpNodeData.value.body.formData[index].quote = currentValue;
-              }, 0);
-            }
-          }
-        }, 0);
-      }
-    }
-  }
-};
-
-const activeNames = ref(['1', '2', '3', '4'])
-
-function hasErrors() {
-  const model = editorInstance.getModel();
-  if (!model) return false;
-  
-  // 获取当前模型的所有标记
-  const markers = monaco.editor.getModelMarkers({ resource: model.uri });
-  // 检查是否存在错误级别标记
-  return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
-}
-
-const initEditor = (type) => {
-  monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.ES2020,
-    allowNonTsExtensions: true,          // 允许非 ts 扩展名（.js）
-    checkJs: true,                       // 对 .js 文件进行类型检查
-    strict: true,                        // 启用所有严格检查
-    noImplicitAny: false,                  // 禁止隐式 any
-    noUnusedLocals: true,                 // 未使用的局部变量报错（可选）
-    noUnusedParameters: true,              // 未使用的参数报错（可选）
-  });
-
-  // 确保语义验证开启（默认就是开启的，但可以显式设置）
-  monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-      noSemanticValidation: false,          // 开启语义检查
-      noSyntaxValidation: false,             // 开启语法检查
-  });
-
-  editorInstance = monaco.editor.create(codeRef.value, {
-    value: ['{}'].join('\n'),
-    language: type === 'code' ? 'javascript' : 'json',
-    fontSize: 14,
-    lineNumbers: 'on',
-    roundedSelection: true,
-    scrollBeyondLastLine: false,
-    formatOnPaste: true,
-    formatOnType: true,
-    quickSuggestions: true,
-        suggestOnTriggerCharacters: true,
-        // 自动完成
-        suggest: {
-            showWords: true,
-            showFunctions: true,
-            showVariables: true,
-            showClasses: true,
-            showModules: true,
-        },
-  });
-}
-
-// 设置代码值
-const setValue = (value) => {
-  if (editorInstance) {
-    editorInstance.setValue(value)
-  }
-}
-
-// 销毁编辑器
-const disposeEditor = () => {
-  if (editorInstance) {
-    editorInstance.dispose()
-    editorInstance = null
-  }
-}
-
-watch(
-  () => props.drawer,
-  (newVal) => {
-    if (newVal && ['code', 'http'].includes(props.data.type)) {
-      nextTick(() => {
-        initEditor(props.data.type);
-      });
-    } else {
-      disposeEditor();
-    }
-  }
-);
-
-// HTTP 节点数据
-const httpNodeData = ref({});
-
-const addHttpNodeFormItem = (e, type) => {
-  e.stopPropagation();
-  if (type === 'body') {
-    if (!httpNodeData.value.body.formData) {
-      httpNodeData.value.body.formData = [];
-    }
-    httpNodeData.value.body.formData.push({ name: "", type: "input", input: ""});
-  } else {
-    if (!httpNodeData.value[type]) {
-      httpNodeData.value[type] = [];
-    }
-    httpNodeData.value[type].push({ name: "", type: "input", input: ""});
-  }
-};
-
-const handleHttpNodeDelete = (type, index) => {
-  if (type === 'body') {
-    httpNodeData.value.body.formData.splice(index, 1);
-  } else {
-    httpNodeData.value[type].splice(index, 1);
-  }
-};
-
-// 商道智能体
-const sdAgentNodeData = ref({})
-
-const voiceOptions = () => {
-  return [{
-    value: 'x4_xiaoyan',
-    label: 'x4_xiaoyan'
-  }]
-}
-
-const handleTtsChange = (val) => {
-  if (val) {
-    sdAgentNodeData.value.tts = []
-    if (!sdAgentNodeData.value.tts || sdAgentNodeData.value.tts.length === 0) {
-      sdAgentNodeData.value.tts = [
-        { name: 'url', type: "input", input: "", disabled: true },
-        { name: 'text', type: "input", input: "", disabled: true },
-        { name: 'speed', type: "input", input: "", max: 100, disabled: true },
-        { name: 'voice', type: "input", input: "", componentType: 'select', selectOptions: voiceOptions(), disabled: true },
-        { name: 'volume', type: "input", input: "", componentType: 'number', max: 100, disabled: true }
-      ]
-    }
-  }
-}
-
-const addSdAgentItem = (e) => {
-  e.stopPropagation();
-  sdAgentNodeData.value.outputParams.push({ name: "", type: "string", input: "" });
-}
-
-const deleteSdAgentItem = (fullPath, propPath) => {
-  // 从顶层数据开始查找
-  let currentLevel = sdAgentNodeData.value[propPath];
-  
-  // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
-  for (let i = 0; i < fullPath.length - 1; i++) {
-    const index = fullPath[i];
-    // 进入下一层级
-    currentLevel = currentLevel[index].children;
-  }
-  
-  // 最后一个索引是当前层级要删除的项
-  const lastIndex = fullPath[fullPath.length - 1];
-  currentLevel.splice(lastIndex, 1);
-}
-
-watch(
-  () => props.data,
-  () => {
-    if (props.data.type === "start") {
-      const inputParams = JSON.parse(JSON.stringify(props.data.properties.inputParams || []))
-      formData.inputParams = inputParams;
-    } else if (['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(props.data.type)) {
-      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
-      const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
-      formData.nodeParams = nodeParams;
-      formData.outputParams = outputParams;
-    } else if (props.data.type === "code") {
-      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
-      const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
-      formData.nodeParams = nodeParams;
-      formData.outputParams = outputParams;
-      const codeParams = props.data.properties.nodeParams.find(item => item.name === 'code')
-      if (codeParams) {
-        setTimeout(() => {
-          if (editorInstance) {
-            setValue(codeParams.input)
-          }
-        }, 100)
-      }
-    } else if (props.data.type === 'http') {
-      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
-      const transformedData = transformHttpNodeData(nodeParams);
-      httpNodeData.value = transformedData;
-      if (httpNodeData.value.body.type === 'json') {
-        setTimeout(() => {
-          if (editorInstance) {
-            setValue(httpNodeData.value.body.json || '{}')
-          }
-        }, 100)
-      }
-    } else if (props.data.type === 'sdAgent') {
-      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
-      const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
-      const transformedData = transformSdAgentNodeData(nodeParams);
-      sdAgentNodeData.value = {
-        ...transformedData,
-        outputParams
-      };
-
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-onUnmounted(() => {
-  emitter.off('throwAnError');
-  emitter.off('setProperties');
-  disposeEditor()
-})
+// 组件卸载时清理事件监听
+// 注意：emitter.off 应在各子组件中自行清理，父组件不再重复
 </script>
-<style lang="scss" scoped>
-.drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.addFormItem {
-  margin-left: 12px;
-}
-
-.http-form {
-  width: 100%;
-
-  .el-collapse {
-    width: 100%;
-  }
-}
-
-.form__container {
-  margin: 12px 0;
-
-  :deep(.el-row) {
-    align-items: end;
-
-    .el-form-item {
-      margin-right: 12px;
-    }
-    
-    .param-name {
-      width: 160px;
-    }
-
-    .param-type {
-      width: 80px;
-    }
-
-    .param-value {
-      width: 160px;
-    }
-
-  }
-
-
-
-  .sub-properties {
-    margin-left: 10px;
-    .zw {
-      margin-left: 15px;
-      &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: -4px;
-        width: 10px;
-        border-left: 1px solid gray;
-        border-bottom: 1px solid gray;
-        border-bottom-left-radius: 4px;
-        background-color: transparent;
-        height: 24px;
-      }
-    }
-  }
-
-  .gSon-properties {
-    margin-left: 10px;
-    .zw {
-      margin-left: 15px;
-      &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: -4px;
-        width: 10px;
-        border-left: 1px solid gray;
-        border-bottom: 1px solid gray;
-        border-bottom-left-radius: 4px;
-        background-color: transparent;
-        height: 24px;
-      }
-    }
-  }
-
-  .deleteBtn {
-    margin-bottom: 22px;
-    cursor: pointer;
-  }
-}
-
-.code__container {
-  display: flex;
-  position: relative;
-  text-align: initial;
-  width: 100%;
-  height: 300px;
-  margin: 12px 0;
-}
-</style>
 
 <style lang="scss">
-/* 不加 scoped，全局生效 */
 .no-header-margin .el-drawer__header {
   margin-bottom: 0 !important;
 }
diff --git a/src/views/flow/components/params/BasicNodeParams.vue b/src/views/flow/components/params/BasicNodeParams.vue
new file mode 100644
index 0000000..e78f5ab
--- /dev/null
+++ b/src/views/flow/components/params/BasicNodeParams.vue
@@ -0,0 +1,348 @@
+<template>
+    <el-collapse v-model="activeNames">
+        <!-- 输入参数 -->
+        <el-collapse-item name="1" icon-position="left">
+            <template #title>
+                输入参数
+                <el-button :circle="true" size="small" @click="(e) => addFormItem(e, 'nodeParams')" class="addFormItem">
+                    <el-icon :size="14">
+                        <Plus />
+                    </el-icon>
+                </el-button>
+            </template>
+            <div class="form__container">
+                <el-button type="primary" v-if="['AGV_MOVE_TO_POINT', 'ALM'].includes(props.data.properties.action)" size="small" @click="openRobotForm(props.data.properties.action)">获取位置</el-button>
+                <el-form :inline="true" :model="formData" :rules="rules" ref="dynamicFormRef" label-position="top"
+                    label-width="auto">
+                    <div v-for="(property, index) in formData.nodeParams" :key="index">
+                        <el-row>
+                            <el-form-item :label="index === 0 ? '参数名' : ''" :prop="`nodeParams.${index}.name`"
+                                :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]">
+                                <el-input :disabled="property?.disabled || false" class="param-name"
+                                    v-model="property.name" placeholder="请输入" clearable />
+                            </el-form-item>
+                            <el-form-item :label="index === 0 ? '参数值' : ''" :prop="`nodeParams.${index}.type`">
+                                <el-select v-model="property.type" class="param-type" @change="handleTypeChange(index, formData, property.type)">
+                                    <el-option label="引用" value="quote" />
+                                    <el-option label="输入" value="input" />
+                                </el-select>
+                                <el-form-item v-if="property.type === 'input'"
+                                    :rules="testRule(property)"
+                                    :prop="`nodeParams.${index}.input`">
+                                    <el-input-number class="param-value" v-if="property.componentType === 'number'"
+                                        v-model="property.input" :min="0" :max="property.max || Infinity"
+                                        :controls="property?.controls || true" :step-strictly="true" :step="property.step || 1" placeholder="请输入" clearable />
+                                    <el-select v-model="property.input" class="param-value"
+                                        v-else-if="property.componentType === 'select'">
+                                        <el-option v-for="item in property.selectOptions" :key="item.value"
+                                            :label="item.label" :value="item.value" />
+                                    </el-select>
+                                    <el-input class="param-value" v-else v-model="property.input" placeholder="请输入"
+                                        clearable />
+                                </el-form-item>
+                                <el-form-item v-if="property.type === 'quote'"
+                                    :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
+                                    :prop="`nodeParams.${index}.quote`">
+                                    <el-cascader :ref="(el) => { if (el) cascaderRefs[index] = el }"
+                                        v-model="property.quote" :checkStrictly="true" :options="quoteOptions"
+                                        placeholder="请选择"
+                                        @visible-change="(visible) => visibleChange(visible, index, property.quote)"
+                                        @change="(value) => cascaderChange(value, index, formData, 'nodeParams')" />
+                                </el-form-item>
+                            </el-form-item>
+                            <el-button :icon="Minus" circle size="small" :disabled="property?.disabled || false"
+                                @click="handleDelete(index)" class="deleteBtn" />
+                        </el-row>
+                    </div>
+                </el-form>
+            </div>
+        </el-collapse-item>
+
+        <!-- 输出参数 -->
+        <el-collapse-item name="2" icon-position="left">
+            <template #title>
+                输出参数
+                <el-button :circle="true" size="small" @click="(e) => addFormItem(e, 'outputParams')"
+                    class="addFormItem">
+                    <el-icon :size="14">
+                        <Plus />
+                    </el-icon>
+                </el-button>
+            </template>
+            <div class="form__container">
+                <el-form :inline="true" :model="formData" label-position="top" label-width="auto" :rules="outputRules"
+                    ref="outputFormRef">
+                    <FormItemRecursive formType="output" :current-list="formData.outputParams" prop-path="outputParams"
+                        :depth="0" :is-first-level="true" :endDepth="2" :parent-path="[]"
+                        @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')" />
+                </el-form>
+            </div>
+        </el-collapse-item>
+    </el-collapse>
+
+     <el-dialog
+        v-model="dialogVisible"
+        title="获取位置信息"
+        width="360"
+    >
+        <el-form ref="robotFormRef" :model="robotForm" :rules="robotFormRules"  label-width="auto">
+            <el-form-item label="终端ID" prop="terminalId">
+                <el-input v-model="robotForm.terminalId" />
+            </el-form-item>
+            <el-form-item label="设备ID" prop="deviceId">
+                <el-input v-model="robotForm.deviceId" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="dialogVisible = false">取消</el-button>
+            <el-button type="primary" @click="submitRobotForm">确认</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick } from 'vue'
+import { Plus, Minus } from '@element-plus/icons-vue'
+import FormItemRecursive from '../FormItemRecursive.vue'
+import { getInput } from '@/utils/flow'
+import { useQuote } from './useQuote.js'
+import { getArmStatus } from '@/api/device/flow'
+import { de } from 'element-plus/es/locale/index.mjs'
+
+const props = defineProps({
+    data: Object
+})
+
+const emit = defineEmits(['save-success', 'save-error'])
+
+const formData = reactive({
+    nodeParams: [],
+    outputParams: []
+})
+
+const rules = reactive({})
+const outputRules = reactive({})
+const dynamicFormRef = ref()
+const outputFormRef = ref()
+const activeNames = ref(['1', '2'])
+
+// 使用共享的 quote 逻辑
+const { quoteOptions, cascaderRefs, handleTypeChange, cascaderChange, visibleChange } = useQuote(props.data.id)
+
+// 添加表单项
+const addFormItem = (e, type) => {
+    e.stopPropagation()
+    const obj = {
+        name: '',
+        type: type === 'nodeParams' ? 'input' : 'string',
+        required: false,
+        children: [],
+        input: ''
+    }
+    if (!formData[type]) formData[type] = []
+    formData[type].push(obj)
+}
+
+// 删除输入参数（非递归）
+const handleDelete = (index) => {
+    formData.nodeParams.splice(index, 1)
+}
+
+// 删除顶层输出参数（递归删除通过 FormItemRecursive 的 emit 处理）
+const deleteTopLevelItem = (fullPath, propPath) => {
+    let currentLevel = formData[propPath]
+    for (let i = 0; i < fullPath.length - 1; i++) {
+        currentLevel = currentLevel[fullPath[i]].children
+    }
+    const lastIndex = fullPath[fullPath.length - 1]
+    currentLevel.splice(lastIndex, 1)
+}
+
+// 初始化数据
+const initData = () => {
+    const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
+    const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
+    formData.nodeParams = nodeParams;
+    formData.outputParams = outputParams;
+}
+
+watch(
+    () => props.data,
+    () => {
+        initData()
+    },
+    { immediate: true, deep: true }
+)
+
+// 保存验证
+const validateAndSave = async () => {
+    let inputValid = true
+    let outputValid = true
+    if (dynamicFormRef.value) {
+        await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
+    }
+    if (outputFormRef.value) {
+        await outputFormRef.value.validate((valid) => { if (!valid) outputValid = false })
+    }
+
+    // 保存到 lf
+    lf.setProperties(props.data.id, {
+        ...props.data.properties,
+        ...formData
+    })
+
+    if (inputValid && outputValid) {
+        emit('save-success')
+    } else {
+        emit('save-error')
+    }
+}
+
+const dialogVisible = ref(false)
+const robotFormRef = ref(null)
+const robotFormRules = reactive({
+    terminalId: [{ required: true, message: '终端ID不能为空', trigger: 'blur' }],
+    deviceId: [{ required: true, message: '设备ID不能为空', trigger: 'blur' }]
+})
+const robotForm = reactive({
+    deviceId: '',
+    terminalId: ''
+})
+
+const testRule = (property) => {
+    if (property?.name === 'acceleration') {
+        return [
+            { required: true, message: '请输入参数值', trigger: 'blur' },
+            { validator: () => {
+                if (formData.nodeParams.find(param => param.name === 'acceleration')?.input > formData.nodeParams.find(param => param.name === 'velocity')?.input) {
+                    return Promise.resolve()
+                } else {
+                    return Promise.reject(new Error('加速度必须大于速度'))
+                }
+            }, trigger: 'blur' }
+        ]
+
+    }
+    return [{ required: property?.required ?? true, message: '请输入参数值', trigger: 'blur' }]
+}
+
+const robotFormAction = ref()
+
+const submitRobotForm = () => {
+    if (robotFormAction.value === 'AGV_MOVE_TO_POINT') {
+        
+    } else if (robotFormAction.value === 'ALM') {
+        robotFormRef.value.validate(async (valid) => {
+            if (valid) {
+                try {
+                    const response = await getArmStatus({ deviceId: robotForm.deviceId, terminalId: robotForm.terminalId })
+                    if (response && response.data) {
+                        dialogVisible.value = false
+                        const { x, y, z, rx, ry, rz } = response.data
+                        const testMap = {
+                            x: x,
+                            y: y,
+                            z: z,
+                            rx: rx,
+                            ry: ry,
+                            rz: rz,
+                            deviceId: robotForm.deviceId
+                        }
+                        // 将获取到的位置信息设置到 formData 中
+                        formData.nodeParams.forEach(param => {
+                            if (testMap.hasOwnProperty(param.name)) {
+                                param.input = testMap[param.name]
+                            }
+                        })
+                    }
+                } catch (error) {
+                    console.error('获取位置信息失败:', error)
+                }
+            }
+        })
+    }
+}
+
+const openRobotForm = (action) => {
+    dialogVisible.value = true
+    robotFormAction.value = action
+}
+
+defineExpose({ validateAndSave })
+</script>
+
+<style lang="scss" scoped>
+.form__container {
+    margin: 12px 0;
+
+    :deep(.el-row) {
+        align-items: end;
+
+        .el-form-item {
+            margin-right: 12px;
+        }
+
+        .param-name {
+            width: 160px;
+        }
+
+        .param-type {
+            width: 80px;
+        }
+
+        .param-value {
+            width: 160px;
+        }
+
+    }
+
+
+
+    .sub-properties {
+        margin-left: 10px;
+
+        .zw {
+            margin-left: 15px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: -4px;
+                width: 10px;
+                border-left: 1px solid gray;
+                border-bottom: 1px solid gray;
+                border-bottom-left-radius: 4px;
+                background-color: transparent;
+                height: 24px;
+            }
+        }
+    }
+
+    .gSon-properties {
+        margin-left: 10px;
+
+        .zw {
+            margin-left: 15px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: -4px;
+                width: 10px;
+                border-left: 1px solid gray;
+                border-bottom: 1px solid gray;
+                border-bottom-left-radius: 4px;
+                background-color: transparent;
+                height: 24px;
+            }
+        }
+    }
+
+    .deleteBtn {
+        margin-bottom: 22px;
+        cursor: pointer;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/flow/components/params/CodeNodeParams.vue b/src/views/flow/components/params/CodeNodeParams.vue
new file mode 100644
index 0000000..6443d53
--- /dev/null
+++ b/src/views/flow/components/params/CodeNodeParams.vue
@@ -0,0 +1,463 @@
+<template>
+  <el-collapse v-model="activeNames">
+    <el-collapse v-model="activeNames">
+        <el-collapse-item name="1" icon-position="left">
+          <template #title>
+            输入参数
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="这里输入的变量可以被下方的代码引用。"
+              placement="top"
+            >
+              <el-icon class="header-icon" style="margin-left: 6px">
+                <info-filled />
+              </el-icon>
+            </el-tooltip>
+          </template>
+          <div class="form__container">
+            <el-form
+              :inline="true"
+              :model="formData"
+              :rules="rules"
+              ref="dynamicFormRef"
+              label-position="top"
+              label-width="auto"
+            >
+              <div v-for="(property, index) in formData.nodeParams" :key="index">
+                <el-row v-if="property.name !== 'code'">
+                  <el-form-item
+                    :label="index === 0 ? '参数名' : ''"
+                    :prop="`nodeParams.${index}.name`"
+                    :rules="[
+                      { required: true, message: '请输入参数名', trigger: 'blur' },
+                    ]"
+                  >
+                    <el-input
+                      :disabled="property?.disabled || false"
+                      class="param-name"
+                      v-model="property.name"
+                      placeholder="请输入"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    :label="index === 0 ? '参数值' : ''"
+                    :prop="`nodeParams.${index}.type`"
+                  >
+                    <el-select
+                      v-model="property.type"
+                      class="param-type"
+                      @change="handleTypeChange(index)"
+                    >
+                      <el-option label="引用" value="quote" />
+                      <el-option label="输入" value="input" />
+                    </el-select>
+                    <el-form-item
+                      v-if="property.type === 'input'"
+                      :rules="[
+                        {
+                          required: property?.required ?? true,
+                          message: '请输入参数值',
+                          trigger: 'blur',
+                        },
+                      ]"
+                      :prop="`nodeParams.${index}.input`"
+                    >
+                      <el-input-number
+                        class="param-value"
+                        v-if="property.componentType === 'number'"
+                        v-model="property.input"
+                        :min="0"
+                        :max="property.max || Infinity"
+                        :controls="false"
+                        :step-strictly="true"
+                        placeholder="请输入"
+                        clearable
+                      />
+                      <el-select
+                        v-model="property.input"
+                        class="param-value"
+                        v-else-if="property.componentType === 'select'"
+                      >
+                        <el-option
+                          v-for="item in property.selectOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                      <el-input
+                        class="param-value"
+                        v-else
+                        v-model="property.input"
+                        placeholder="请输入"
+                        clearable
+                      />
+                    </el-form-item>
+                    <el-form-item
+                      v-if="property.type === 'quote'"
+                      :rules="[
+                        {
+                          required: true,
+                          message: '请选择参数值',
+                          trigger: 'blur',
+                        },
+                      ]"
+                      :prop="`nodeParams.${index}.quote`"
+                    >
+                      <el-cascader
+                        :ref="
+                          (el) => {
+                            if (el) cascaderRefs[index] = el;
+                          }
+                        "
+                        v-model="property.quote"
+                        :checkStrictly="true"
+                        :options="quoteOptions"
+                        placeholder="请选择"
+                        @visible-change="
+                          (visible) => visibleChange(visible, index, property.quote)
+                        "
+                        @change="(value) => cascaderChange(value, index)"
+                      />
+                    </el-form-item>
+                  </el-form-item>
+                  <el-button
+                    :icon="Minus"
+                    circle
+                    size="small"
+                    @click="handleDelete(index)"
+                    :disabled="property?.disabled || false"
+                    class="deleteBtn"
+                  />
+                </el-row>
+              </div>
+            </el-form>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item title="代码" name="2" icon-position="left">
+          <div class="code__container">
+            <div ref="codeRef" style="width: 100%; height: 100%"></div>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item name="3" icon-position="left">
+          <template #title>
+            输出参数
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="这里定义的输出变量可以被后续节点引用。"
+              placement="top"
+            >
+              <el-icon class="header-icon" style="margin-left: 6px">
+                <info-filled />
+              </el-icon>
+            </el-tooltip>
+            <el-button
+              :circle="true"
+              size="small"
+              @click="(e) => addFormItem(e, 'outputParams')"
+              class="addFormItem"
+            >
+              <el-icon :size="14"><Plus /></el-icon>
+            </el-button>
+          </template>
+          <div class="form__container">
+            <el-form
+              :inline="true"
+              :model="formData"
+              label-position="top"
+              label-width="auto"
+              :rules="outputRules"
+              ref="outputFormRef"
+            >
+              <FormItemRecursive
+                formType="output"
+                :current-list="formData.outputParams"
+                prop-path="outputParams"
+                :depth="0"
+                :is-first-level="true"
+                :endDepth="2"
+                :parent-path="[]"
+                @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
+              />
+            </el-form>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+  </el-collapse>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick, onBeforeUnmount, onMounted } from 'vue'
+import { Plus, Minus } from '@element-plus/icons-vue'
+import FormItemRecursive from '../FormItemRecursive.vue'
+import * as monaco from 'monaco-editor';
+import { getInput } from '@/utils/flow'
+import { useQuote } from './useQuote.js'
+
+const props = defineProps({
+  data: Object
+})
+
+const emit = defineEmits(['save-success', 'save-error'])
+
+const formData = reactive({
+  nodeParams: [],
+  outputParams: []
+})
+
+const codeRef = ref()
+let editorInstance
+
+function hasErrors() {
+  const model = editorInstance.getModel();
+  if (!model) return false;
+  
+  // 获取当前模型的所有标记
+  const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+  // 检查是否存在错误级别标记
+  return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
+}
+const initEditor = (type) => {
+  monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,          // 允许非 ts 扩展名（.js）
+    checkJs: true,                       // 对 .js 文件进行类型检查
+    strict: true,                        // 启用所有严格检查
+    noImplicitAny: false,                  // 禁止隐式 any
+    noUnusedLocals: true,                 // 未使用的局部变量报错（可选）
+    noUnusedParameters: true,              // 未使用的参数报错（可选）
+  });
+
+  // 确保语义验证开启（默认就是开启的，但可以显式设置）
+  monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,          // 开启语义检查
+      noSyntaxValidation: false,             // 开启语法检查
+  });
+
+  editorInstance = monaco.editor.create(codeRef.value, {
+    value: ['{}'].join('\n'),
+    language: type === 'code' ? 'javascript' : 'json',
+    fontSize: 14,
+    lineNumbers: 'on',
+    roundedSelection: true,
+    scrollBeyondLastLine: false,
+    formatOnPaste: true,
+    formatOnType: true,
+    quickSuggestions: true,
+        suggestOnTriggerCharacters: true,
+        // 自动完成
+        suggest: {
+            showWords: true,
+            showFunctions: true,
+            showVariables: true,
+            showClasses: true,
+            showModules: true,
+        },
+  });
+}
+
+// 设置代码值
+const setValue = (value) => {
+  if (editorInstance) {
+    editorInstance.setValue(value)
+  }
+}
+
+// 销毁编辑器
+const disposeEditor = () => {
+  if (editorInstance) {
+    editorInstance.dispose()
+    editorInstance = null
+  }
+}
+
+const rules = reactive({})
+const outputRules = reactive({})
+const dynamicFormRef = ref()
+const outputFormRef = ref()
+const activeNames = ref(['1', '2'])
+
+// 使用共享的 quote 逻辑
+const { quoteOptions, cascaderRefs, handleTypeChange, cascaderChange, visibleChange } = useQuote(props.data.id)
+
+// 添加表单项
+const addFormItem = (e, type) => {
+  e.stopPropagation()
+  const obj = {
+    name: '',
+    type: type === 'nodeParams' ? 'input' : 'string',
+    required: false,
+    children: [],
+    input: ''
+  }
+  if (!formData[type]) formData[type] = []
+  formData[type].push(obj)
+}
+
+// 删除输入参数（非递归）
+const handleDelete = (index) => {
+  formData.nodeParams.splice(index, 1)
+}
+
+// 删除顶层输出参数（递归删除通过 FormItemRecursive 的 emit 处理）
+const deleteTopLevelItem = (fullPath, propPath) => {
+  let currentLevel = formData[propPath]
+  for (let i = 0; i < fullPath.length - 1; i++) {
+    currentLevel = currentLevel[fullPath[i]].children
+  }
+  const lastIndex = fullPath[fullPath.length - 1]
+  currentLevel.splice(lastIndex, 1)
+}
+
+// 初始化数据
+const initData = () => {
+    const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
+    const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
+    formData.nodeParams = nodeParams;
+    formData.outputParams = outputParams;
+    const codeParams = props.data.properties.nodeParams.find(item => item.name === 'code')
+    if (codeParams) {
+    setTimeout(() => {
+        if (editorInstance) {
+            setValue(codeParams.input)
+        }
+    }, 100)
+    }
+}
+
+// 保存验证
+const validateAndSave = async () => {
+    const targetObj = formData.nodeParams.find(item => item.name === 'code');
+    if (targetObj) {
+        // 存在：修改该对象的 input 属性
+        targetObj.input = editorInstance.getValue();
+    } else {
+        formData.nodeParams.push(
+            { name: "code", type: "input", input: editorInstance.getValue() }
+        )
+    }
+
+    let inputValid = true
+    let outputValid = true
+    if (dynamicFormRef.value) {
+        await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
+    }
+    if (outputFormRef.value) {
+        await outputFormRef.value.validate((valid) => { if (!valid) outputValid = false })
+    }
+
+    // 保存到 lf
+    lf.setProperties(props.data.id, {
+        ...props.data.properties,
+        ...formData
+    })
+
+    if (hasErrors()) {
+        emit('save-error')
+        return
+    }
+
+    if (inputValid && outputValid) {
+        emit('save-success')
+    } else {
+        emit('save-error')
+    }
+}
+
+onMounted(() => {
+  nextTick(() => {
+    initEditor('code')
+    initData()
+  })
+})
+
+defineExpose({ validateAndSave })
+
+onBeforeUnmount(() => {
+  disposeEditor()
+})
+</script>
+
+<style lang="scss" scoped>
+.form__container {
+  margin: 12px 0;
+
+  :deep(.el-row) {
+    align-items: end;
+
+    .el-form-item {
+      margin-right: 12px;
+    }
+    
+    .param-name {
+      width: 160px;
+    }
+
+    .param-type {
+      width: 80px;
+    }
+
+    .param-value {
+      width: 160px;
+    }
+
+  }
+
+
+
+  .sub-properties {
+    margin-left: 10px;
+    .zw {
+      margin-left: 15px;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: -4px;
+        width: 10px;
+        border-left: 1px solid gray;
+        border-bottom: 1px solid gray;
+        border-bottom-left-radius: 4px;
+        background-color: transparent;
+        height: 24px;
+      }
+    }
+  }
+
+  .gSon-properties {
+    margin-left: 10px;
+    .zw {
+      margin-left: 15px;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: -4px;
+        width: 10px;
+        border-left: 1px solid gray;
+        border-bottom: 1px solid gray;
+        border-bottom-left-radius: 4px;
+        background-color: transparent;
+        height: 24px;
+      }
+    }
+  }
+
+  .deleteBtn {
+    margin-bottom: 22px;
+    cursor: pointer;
+  }
+}
+
+.code__container {
+  display: flex;
+  position: relative;
+  text-align: initial;
+  width: 100%;
+  height: 300px;
+  margin: 12px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/flow/components/params/HttpNodeParams.vue b/src/views/flow/components/params/HttpNodeParams.vue
new file mode 100644
index 0000000..e817440
--- /dev/null
+++ b/src/views/flow/components/params/HttpNodeParams.vue
@@ -0,0 +1,654 @@
+<template>
+    <el-form :inline="true" :model="httpNodeData" :rules="rules" class="http-form" ref="dynamicFormRef"
+        label-position="top" label-width="auto">
+        <el-collapse v-model="activeNames">
+            <el-collapse-item name="1" icon-position="left">
+                <template #title>
+                    请求配置
+                    <el-tooltip class="box-item" effect="dark" content="支持HTTP/HTTPS协议" placement="top">
+                        <el-icon class="header-icon" style="margin-left: 6px">
+                            <info-filled />
+                        </el-icon>
+                    </el-tooltip>
+                </template>
+                <div class="form__container">
+                    <div v-for="(property, index) in httpNodeData.config" :key="index">
+                        <el-row>
+                            <el-form-item :label="index === 0 ? '参数名' : ''" :prop="`config.${index}.name`" :rules="[
+                                { required: true, message: '请输入参数名', trigger: 'blur' },
+                            ]">
+                                <el-input :disabled="true" class="param-name" v-model="property.name" placeholder="请输入"
+                                    clearable />
+                            </el-form-item>
+                            <el-form-item :label="index === 0 ? '参数值' : ''" :prop="`config.${index}.input`">
+                                <el-select v-model="property.type" class="param-type" @change="handleTypeChange(index)">
+                                    <el-option label="引用" value="quote" />
+                                    <el-option label="输入" value="input" />
+                                </el-select>
+                                <el-form-item v-if="property.type === 'input'" :rules="[
+                                    {
+                                        required: property?.required ?? true,
+                                        message: '请输入参数值',
+                                        trigger: 'blur',
+                                    },
+                                ]" :prop="`config.${index}.input`">
+                                    <el-input-number class="param-value" v-if="property.componentType === 'number'"
+                                        v-model="property.input" :min="0" :max="property.max || Infinity"
+                                        :controls="false" :step-strictly="true" placeholder="请输入" clearable />
+                                    <el-select v-model="property.input" class="param-value"
+                                        v-else-if="property.componentType === 'select'">
+                                        <el-option v-for="item in property.selectOptions" :key="item.value"
+                                            :label="item.label" :value="item.value" />
+                                    </el-select>
+                                    <el-input class="param-value" v-else v-model="property.input" placeholder="请输入"
+                                        clearable />
+                                </el-form-item>
+                                <el-form-item v-if="property.type === 'quote'" :rules="[
+                                    {
+                                        required: true,
+                                        message: '请选择参数值',
+                                        trigger: 'blur',
+                                    },
+                                ]" :prop="`config.${index}.quote`">
+                                    <el-cascader :ref="(el) => {
+                                            if (el) cascaderRefs[index] = el;
+                                        }
+                                        " v-model="property.quote" :checkStrictly="true" :options="quoteOptions" placeholder="请选择"
+                                        @visible-change="
+                                            (visible) => visibleChange(visible, index, property.quote)
+                                        " @change="(value) => cascaderChange(value, index)" />
+                                </el-form-item>
+                            </el-form-item>
+                        </el-row>
+                    </div>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item name="2" icon-position="left">
+                <template #title>
+                    Header配置
+                    <el-button :circle="true" size="small" @click="(e) => addHttpNodeFormItem(e, 'headers')"
+                        class="addFormItem">
+                        <el-icon :size="14">
+                            <Plus />
+                        </el-icon>
+                    </el-button>
+                </template>
+                <div class="form__container">
+                    <div v-for="(property, index) in httpNodeData.headers" :key="index">
+                        <el-row>
+                            <el-form-item :label="index === 0 ? '参数名' : ''"
+                                :prop="httpNodeData.headers.length > index ? `headers.${index}.name` : undefined"
+                                :rules="[
+                                    { required: true, message: '请输入参数名', trigger: 'blur' },
+                                ]">
+                                <el-input class="param-name" v-model="property.name" placeholder="请输入" clearable />
+                            </el-form-item>
+                            <el-form-item :label="index === 0 ? '参数值' : ''"
+                                :prop="httpNodeData.headers.length > index ? `headers.${index}.input` : undefined">
+                                <el-select v-model="property.type" class="param-type" @change="handleTypeChange(index)">
+                                    <el-option label="引用" value="quote" />
+                                    <el-option label="输入" value="input" />
+                                </el-select>
+                                <el-form-item v-if="property.type === 'input'" :rules="[
+                                    {
+                                        required: property?.required ?? true,
+                                        message: '请输入参数值',
+                                        trigger: 'blur',
+                                    },
+                                ]" :prop="`headers.${index}.input`">
+                                    <el-input-number class="param-value" v-if="property.componentType === 'number'"
+                                        v-model="property.input" :min="0" :max="property.max || Infinity"
+                                        :controls="false" :step-strictly="true" placeholder="请输入" clearable />
+                                    <el-select v-model="property.input" class="param-value"
+                                        v-else-if="property.componentType === 'select'">
+                                        <el-option v-for="item in property.selectOptions" :key="item.value"
+                                            :label="item.label" :value="item.value" />
+                                    </el-select>
+                                    <el-input class="param-value" v-else v-model="property.input" placeholder="请输入"
+                                        clearable />
+                                </el-form-item>
+                                <el-form-item v-if="property.type === 'quote'" :rules="[
+                                    {
+                                        required: true,
+                                        message: '请选择参数值',
+                                        trigger: 'blur',
+                                    },
+                                ]" :prop="`headers.${index}.quote`">
+                                    <el-cascader :ref="(el) => {
+                                            if (el) cascaderRefs[index] = el;
+                                        }
+                                        " v-model="property.quote" :checkStrictly="true" :options="quoteOptions" placeholder="请选择"
+                                        @visible-change="
+                                            (visible) => visibleChange(visible, index, property.quote)
+                                        " @change="(value) => cascaderChange(value, index)" />
+                                </el-form-item>
+                            </el-form-item>
+                            <el-button :icon="Minus" circle size="small" @click="handleHttpNodeDelete('headers', index)"
+                                class="deleteBtn" />
+                        </el-row>
+                    </div>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item name="3" icon-position="left">
+                <template #title>
+                    Param配置
+                    <el-button :circle="true" size="small" @click="(e) => addHttpNodeFormItem(e, 'params')"
+                        class="addFormItem">
+                        <el-icon :size="14">
+                            <Plus />
+                        </el-icon>
+                    </el-button>
+                </template>
+                <div class="form__container">
+                    <div v-for="(property, index) in httpNodeData.params" :key="index">
+                        <el-row>
+                            <el-form-item :label="index === 0 ? '参数名' : ''"
+                                :prop="httpNodeData.params.length > index ? `params.${index}.name` : undefined" :rules="[
+                                    { required: true, message: '请输入参数名123', trigger: 'blur' },
+                                ]">
+                                <el-input class="param-name" v-model="property.name" placeholder="请输入" clearable />
+                            </el-form-item>
+                            <el-form-item :label="index === 0 ? '参数值' : ''"
+                                :prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined">
+                                <el-select v-model="property.type" class="param-type" @change="handleTypeChange(index)">
+                                    <el-option label="引用" value="quote" />
+                                    <el-option label="输入" value="input" />
+                                </el-select>
+                                <el-form-item v-if="property.type === 'input'" :rules="[
+                                    {
+                                        required: property?.required ?? true,
+                                        message: '请输入参数值',
+                                        trigger: 'blur',
+                                    },
+                                ]" :prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined">
+                                    <el-input-number class="param-value" v-if="property.componentType === 'number'"
+                                        v-model="property.input" :min="0" :max="property.max || Infinity"
+                                        :controls="false" :step-strictly="true" placeholder="请输入" clearable />
+                                    <el-select v-model="property.input" class="param-value"
+                                        v-else-if="property.componentType === 'select'">
+                                        <el-option v-for="item in property.selectOptions" :key="item.value"
+                                            :label="item.label" :value="item.value" />
+                                    </el-select>
+                                    <el-input class="param-value" v-else v-model="property.input" placeholder="请输入"
+                                        clearable />
+                                </el-form-item>
+                                <el-form-item v-if="property.type === 'quote'" :rules="[
+                                    {
+                                        required: true,
+                                        message: '请选择参数值',
+                                        trigger: 'blur',
+                                    },
+                                ]" :prop="`params.${index}.quote`">
+                                    <el-cascader :ref="(el) => {
+                                            if (el) cascaderRefs[index] = el;
+                                        }
+                                        " v-model="property.quote" :checkStrictly="true" :options="quoteOptions" placeholder="请选择"
+                                        @visible-change="
+                                            (visible) => visibleChange(visible, index, property.quote)
+                                        " @change="(value) => cascaderChange(value, index)" />
+                                </el-form-item>
+                            </el-form-item>
+                            <el-button :icon="Minus" circle size="small" @click="handleHttpNodeDelete('params', index)"
+                                class="deleteBtn" />
+                        </el-row>
+                    </div>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item name="4" title="Body配置" icon-position="left">
+                <template #title>
+                Body配置
+                <el-button
+                    :circle="true"
+                    size="small"
+                    @click="(e) => addHttpNodeFormItem(e, 'body')"
+                    class="addFormItem"
+                    v-if="httpNodeData?.body?.type === 'form-data'"
+                >
+                    <el-icon :size="14"><Plus /></el-icon>
+                </el-button>
+                </template>
+                <div class="form__container">
+                <el-select v-model="httpNodeData.body.type">
+                    <el-option label="JSON" value="json" />
+                    <el-option label="form-data" value="form-data" />
+                </el-select>
+                <div class="code__container" v-show="httpNodeData?.body?.type === 'json'">
+                    <div ref="codeRef" style="width: 100%; height: 100%"></div>
+                </div>
+                <div class="test" v-if="httpNodeData?.body?.type === 'form-data'">
+                    <div v-for="(property, index) in httpNodeData.body.formData" :key="index">
+                    <el-row>
+                        <el-form-item
+                        :label="index === 0 ? '参数名' : ''"
+                        :prop="`body.formData.${index}.name`"
+                        :rules="[
+                            { required: true, message: '请输入参数名', trigger: 'blur' },
+                        ]"
+                        >
+                        <el-input
+                            class="param-name"
+                            v-model="property.name"
+                            placeholder="请输入"
+                            clearable
+                        />
+                        </el-form-item>
+                        <el-form-item
+                        :label="index === 0 ? '参数值' : ''"
+                        :prop="`body.formData.${index}.input`"
+                        >
+                        <el-select
+                            v-model="property.type"
+                            class="param-type"
+                            @change="handleTypeChange(index, 'httpBody')"
+                        >
+                            <el-option label="引用" value="quote" />
+                            <el-option label="输入" value="input" />
+                        </el-select>
+                        <el-form-item
+                            v-if="property.type === 'input'"
+                            :rules="[
+                            {
+                                required: property?.required ?? true,
+                                message: '请输入参数值',
+                                trigger: 'blur',
+                            },
+                            ]"
+                            :prop="`body.formData.${index}.input`"
+                        >
+                            <el-input-number
+                            class="param-value"
+                            v-if="property.componentType === 'number'"
+                            v-model="property.input"
+                            :min="0"
+                            :max="property.max || Infinity"
+                            :controls="false"
+                            :step-strictly="true"
+                            placeholder="请输入"
+                            clearable
+                            />
+                            <el-select
+                            v-model="property.input"
+                            class="param-value"
+                            v-else-if="property.componentType === 'select'"
+                            >
+                            <el-option
+                                v-for="item in property.selectOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                            </el-select>
+                            <el-input
+                            class="param-value"
+                            v-else
+                            v-model="property.input"
+                            placeholder="请输入"
+                            clearable
+                            />
+                        </el-form-item>
+                        <el-form-item
+                            v-if="property.type === 'quote'"
+                            :rules="[
+                            {
+                                required: true,
+                                message: '请选择参数值',
+                                trigger: 'blur',
+                            },
+                            ]"
+                            :prop="`body.formData.${index}.quote`"
+                        >
+                            <el-cascader
+                            :ref="
+                                (el) => {
+                                if (el) cascaderRefs[index] = el;
+                                }
+                            "
+                            v-model="property.quote"
+                            :checkStrictly="true"
+                            :options="quoteOptions"
+                            placeholder="请选择"
+                            @visible-change="
+                                (visible) => visibleChange(visible, index, property.quote, 'httpBody')
+                            "
+                            @change="(value) => cascaderChange(value, index, 'httpBody')"
+                            />
+                        </el-form-item>
+                        </el-form-item>
+                        <el-button
+                        :icon="Minus"
+                        circle
+                        size="small"
+                        @click="handleHttpNodeDelete('body', index)"
+                        class="deleteBtn"
+                    />
+                    </el-row>
+                    </div>
+                </div>
+                </div>
+          </el-collapse-item>
+        </el-collapse>
+    </el-form>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { Plus, Minus } from '@element-plus/icons-vue'
+import FormItemRecursive from '../FormItemRecursive.vue'
+import * as monaco from 'monaco-editor';
+import { getInput, transformHttpNodeData } from '@/utils/flow'
+import { useQuote } from './useQuote.js'
+
+const props = defineProps({
+    data: Object
+})
+
+const emit = defineEmits(['save-success', 'save-error'])
+
+const formData = reactive({
+    nodeParams: [],
+    outputParams: []
+})
+
+const codeRef = ref()
+let editorInstance
+
+function hasErrors() {
+  const model = editorInstance.getModel();
+  if (!model) return false;
+  
+  // 获取当前模型的所有标记
+  const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+  // 检查是否存在错误级别标记
+  return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
+}
+
+const initEditor = (type) => {
+  monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,          // 允许非 ts 扩展名（.js）
+    checkJs: true,                       // 对 .js 文件进行类型检查
+    strict: true,                        // 启用所有严格检查
+    noImplicitAny: false,                  // 禁止隐式 any
+    noUnusedLocals: true,                 // 未使用的局部变量报错（可选）
+    noUnusedParameters: true,              // 未使用的参数报错（可选）
+  });
+
+  // 确保语义验证开启（默认就是开启的，但可以显式设置）
+  monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,          // 开启语义检查
+      noSyntaxValidation: false,             // 开启语法检查
+  });
+
+  editorInstance = monaco.editor.create(codeRef.value, {
+    value: ['{}'].join('\n'),
+    language: 'json',
+    fontSize: 14,
+    lineNumbers: 'on',
+    roundedSelection: true,
+    scrollBeyondLastLine: false,
+    formatOnPaste: true,
+    formatOnType: true,
+    quickSuggestions: true,
+        suggestOnTriggerCharacters: true,
+        // 自动完成
+        suggest: {
+            showWords: true,
+            showFunctions: true,
+            showVariables: true,
+            showClasses: true,
+            showModules: true,
+        },
+  });
+}
+
+// 设置代码值
+const setValue = (value) => {
+  if (editorInstance) {
+    editorInstance.setValue(value)
+  }
+}
+
+// 销毁编辑器
+const disposeEditor = () => {
+  if (editorInstance) {
+    editorInstance.dispose()
+    editorInstance = null
+  }
+}
+
+const rules = reactive({})
+const dynamicFormRef = ref()
+const activeNames = ref(['1', '2', '3', '4'])
+
+// 使用共享的 quote 逻辑
+const { quoteOptions, cascaderRefs, handleTypeChange, cascaderChange, visibleChange } = useQuote(props.data.id)
+
+// 添加表单项
+const addFormItem = (e, type) => {
+    e.stopPropagation()
+    const obj = {
+        name: '',
+        type: type === 'nodeParams' ? 'input' : 'string',
+        required: false,
+        children: [],
+        input: ''
+    }
+    if (!formData[type]) formData[type] = []
+    formData[type].push(obj)
+}
+
+// 删除输入参数（非递归）
+const handleDelete = (index) => {
+    formData.nodeParams.splice(index, 1)
+}
+
+// 删除顶层输出参数（递归删除通过 FormItemRecursive 的 emit 处理）
+const deleteTopLevelItem = (fullPath, propPath) => {
+    let currentLevel = formData[propPath]
+    for (let i = 0; i < fullPath.length - 1; i++) {
+        currentLevel = currentLevel[fullPath[i]].children
+    }
+    const lastIndex = fullPath[fullPath.length - 1]
+    currentLevel.splice(lastIndex, 1)
+}
+
+// HTTP 节点数据
+const httpNodeData = ref({
+    body: {
+        bodyType: 'json',
+        json: '{}',
+        formData: []
+    }
+});
+
+const addHttpNodeFormItem = (e, type) => {
+  e.stopPropagation();
+  if (type === 'body') {
+    if (!httpNodeData.value.body.formData) {
+      httpNodeData.value.body.formData = [];
+    }
+    httpNodeData.value.body.formData.push({ name: "", type: "input", input: ""});
+  } else {
+    if (!httpNodeData.value[type]) {
+      httpNodeData.value[type] = [];
+    }
+    httpNodeData.value[type].push({ name: "", type: "input", input: ""});
+  }
+};
+
+const handleHttpNodeDelete = (type, index) => {
+  if (type === 'body') {
+    httpNodeData.value.body.formData.splice(index, 1);
+  } else {
+    httpNodeData.value[type].splice(index, 1);
+  }
+};
+
+// 初始化数据
+const initData = () => {
+    const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
+    const transformedData = transformHttpNodeData(nodeParams);
+
+    httpNodeData.value = transformedData;
+    if (httpNodeData.value.body.type === 'json') {
+        nextTick(() => {
+        initEditor('http');
+      });
+        setTimeout(() => {
+            if (editorInstance) {
+                setValue(httpNodeData.value.body.json || '{}')
+            }
+        }, 200)
+    }
+}
+
+// 保存验证
+const validateAndSave = async () => {
+    let inputValid = true
+    if (dynamicFormRef.value) {
+        await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
+    }
+
+
+    const nodeParams = []
+    nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
+    if (httpNodeData.value?.headers?.length > 0) {
+    nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
+    }
+    if (httpNodeData.value?.params?.length > 0) {
+    nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
+    }
+    
+    const bodyObj = { 
+    name: "body", type: "input", input: "", children: [
+        { name: 'bodyType', type: "input", input: httpNodeData.value.body.type, disabled: true },
+        { name: 'json', type: "input", input: httpNodeData.value.body.type === 'json' ? editorInstance.getValue() : '' },
+        { name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
+    ]
+    }
+    nodeParams.push(bodyObj)
+
+    // 保存到 lf
+    lf.setProperties(props.data.id, {
+        ...props.data.properties,
+        nodeParams
+    })
+
+    if (httpNodeData.value.body.type === 'json') {
+        if (hasErrors()) {
+            emit('save-error')
+            return
+        }
+    }
+
+    if (inputValid) {
+        emit('save-success')
+    } else {
+        emit('save-error')
+    }
+}
+
+
+onMounted(() => {
+  nextTick(() => {
+    initData()
+  })
+})
+
+defineExpose({ validateAndSave })
+
+onBeforeUnmount(() => {
+  disposeEditor()
+})
+</script>
+
+<style lang="scss" scoped>
+.http-form {
+  width: 100%;
+
+  .el-collapse {
+    width: 100%;
+  }
+}
+
+.form__container {
+    margin: 12px 0;
+
+    :deep(.el-row) {
+        align-items: end;
+
+        .el-form-item {
+            margin-right: 12px;
+        }
+
+        .param-name {
+            width: 160px;
+        }
+
+        .param-type {
+            width: 80px;
+        }
+
+        .param-value {
+            width: 160px;
+        }
+
+    }
+
+    .sub-properties {
+        margin-left: 10px;
+
+        .zw {
+            margin-left: 15px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: -4px;
+                width: 10px;
+                border-left: 1px solid gray;
+                border-bottom: 1px solid gray;
+                border-bottom-left-radius: 4px;
+                background-color: transparent;
+                height: 24px;
+            }
+        }
+    }
+
+    .gSon-properties {
+        margin-left: 10px;
+
+        .zw {
+            margin-left: 15px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: -4px;
+                width: 10px;
+                border-left: 1px solid gray;
+                border-bottom: 1px solid gray;
+                border-bottom-left-radius: 4px;
+                background-color: transparent;
+                height: 24px;
+            }
+        }
+    }
+
+    .deleteBtn {
+        margin-bottom: 22px;
+        cursor: pointer;
+    }
+}
+
+.code__container {
+  display: flex;
+  position: relative;
+  text-align: initial;
+  width: 100%;
+  height: 300px;
+  margin: 12px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/flow/components/params/SdAgentNodeParams.vue b/src/views/flow/components/params/SdAgentNodeParams.vue
new file mode 100644
index 0000000..f6969e6
--- /dev/null
+++ b/src/views/flow/components/params/SdAgentNodeParams.vue
@@ -0,0 +1,359 @@
+<template>
+  <el-form :inline="true" :model="sdAgentNodeData" :rules="rules" ref="dynamicFormRef" class="http-form"
+    label-position="top" label-width="auto">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item name="1" title="请求配置" icon-position="left">
+        <div class="form__container">
+          <div v-for="(property, index) in sdAgentNodeData.config" :key="index">
+            <el-row>
+              <el-form-item :label="index === 0 ? '参数名' : ''" :prop="`config.${index}.name`" :rules="[
+                { required: true, message: '请输入参数名', trigger: 'blur' },
+              ]">
+                <el-input :disabled="true" class="param-name" v-model="property.name" placeholder="请输入" clearable />
+              </el-form-item>
+              <el-form-item :label="index === 0 ? '参数值' : ''" :prop="`config.${index}.input`">
+                <el-select v-model="property.type" class="param-type" @change="handleTypeChange(index)">
+                  <el-option label="引用" value="quote" />
+                  <el-option label="输入" value="input" />
+                </el-select>
+                <el-form-item v-if="property.type === 'input'" :rules="[
+                  {
+                    required: property?.required ?? true,
+                    message: '请输入参数值',
+                    trigger: 'blur',
+                  },
+                ]" :prop="`config.${index}.input`">
+                  <el-input-number class="param-value" v-if="property.componentType === 'number'"
+                    v-model="property.input" :min="0" :max="property.max || Infinity" :controls="false"
+                    :step-strictly="true" placeholder="请输入" clearable />
+                  <el-select v-model="property.input" class="param-value"
+                    v-else-if="property.componentType === 'select'">
+                    <el-option v-for="item in property.selectOptions" :key="item.value" :label="item.label"
+                      :value="item.value" />
+                  </el-select>
+                  <el-input class="param-value" v-else v-model="property.input" placeholder="请输入" clearable />
+                </el-form-item>
+                <el-form-item v-if="property.type === 'quote'" :rules="[
+                  {
+                    required: true,
+                    message: '请选择参数值',
+                    trigger: 'blur',
+                  },
+                ]" :prop="`config.${index}.quote`">
+                  <el-cascader :ref="(el) => {
+                    if (el) cascaderRefs[index] = el;
+                  }
+                    " v-model="property.quote" :checkStrictly="true" :options="quoteOptions" placeholder="请选择"
+                    @visible-change="
+                      (visible) => visibleChange(visible, index, property.quote)
+                    " @change="(value) => cascaderChange(value, index, 'sdAgentConfig')" />
+                </el-form-item>
+              </el-form-item>
+            </el-row>
+          </div>
+          <el-row>
+            <span style="margin-right: 24px">是否调用TTS接口</span>
+            <el-switch size="small" v-model="sdAgentNodeData.invokeTts" @change="handleTtsChange" />
+          </el-row>
+          <div v-if="sdAgentNodeData.invokeTts">
+            <div style="margin: 10px 0">TTS参数设置</div>
+            <div v-for="(property, index) in sdAgentNodeData.tts" :key="index">
+              <el-row>
+                <el-form-item :label="index === 0 ? '参数名' : ''" :prop="`tts.${index}.name`" :rules="[
+                  { required: true, message: '请输入参数名', trigger: 'blur' },
+                ]">
+                  <el-input :disabled="true" class="param-name" v-model="property.name" placeholder="请输入" clearable />
+                </el-form-item>
+                <el-form-item :label="index === 0 ? '参数值' : ''" :prop="`tts.${index}.input`">
+                  <el-select v-model="property.type" class="param-type" @change="handleTypeChange(index)">
+                    <el-option label="引用" value="quote" />
+                    <el-option label="输入" value="input" />
+                  </el-select>
+                  <el-form-item v-if="property.type === 'input'" :rules="[
+                    {
+                      required: property?.required ?? true,
+                      message: '请输入参数值',
+                      trigger: 'blur',
+                    },
+                  ]" :prop="`tts.${index}.input`">
+                    <el-input-number class="param-value" v-if="property.componentType === 'number'"
+                      v-model="property.input" :min="0" :max="property.max || Infinity" :controls="false"
+                      :step-strictly="true" placeholder="请输入" clearable />
+                    <el-select v-model="property.input" class="param-value"
+                      v-else-if="property.componentType === 'select'">
+                      <el-option v-for="item in property.selectOptions" :key="item.value" :label="item.label"
+                        :value="item.value" />
+                    </el-select>
+                    <el-input class="param-value" v-else v-model="property.input" placeholder="请输入" clearable />
+                  </el-form-item>
+                  <el-form-item v-if="property.type === 'quote'" :rules="[
+                    {
+                      required: true,
+                      message: '请选择参数值',
+                      trigger: 'blur',
+                    },
+                  ]" :prop="`tts.${index}.quote`">
+                    <el-cascader :ref="(el) => {
+                      if (el) cascaderRefs[index] = el;
+                    }
+                      " v-model="property.quote" :checkStrictly="true" :options="quoteOptions" placeholder="请选择"
+                      @visible-change="
+                        (visible) => visibleChange(visible, index, property.quote)
+                      " @change="(value) => cascaderChange(value, index, 'sdAgentTts')" />
+                  </el-form-item>
+                </el-form-item>
+              </el-row>
+            </div>
+          </div>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item name="3" icon-position="left">
+        <template #title>
+          输出参数
+          <el-tooltip class="box-item" effect="dark" content="这里定义的输出变量可以被后续节点引用。" placement="top">
+            <el-icon class="header-icon" style="margin-left: 6px">
+              <info-filled />
+            </el-icon>
+          </el-tooltip>
+          <el-button :circle="true" size="small" @click="(e) => addSdAgentItem(e)" class="addFormItem">
+            <el-icon :size="14">
+              <Plus />
+            </el-icon>
+          </el-button>
+        </template>
+        <div class="form__container">
+          <el-form :inline="true" :model="sdAgentNodeData" label-position="top" label-width="auto" :rules="outputRules"
+            ref="outputFormRef">
+            <FormItemRecursive formType="output" :current-list="sdAgentNodeData.outputParams" prop-path="outputParams"
+              :depth="0" :is-first-level="true" :endDepth="2" :parent-path="[]"
+              @delete-item="(path) => deleteSdAgentItem(path, 'outputParams')" />
+          </el-form>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick } from 'vue'
+import { Plus, Minus } from '@element-plus/icons-vue'
+import FormItemRecursive from '../FormItemRecursive.vue'
+import { getInput, transformSdAgentNodeData } from '@/utils/flow'
+import { useQuote } from './useQuote.js'
+
+const props = defineProps({
+  data: Object
+})
+
+const emit = defineEmits(['save-success', 'save-error'])
+
+const formData = reactive({
+  nodeParams: [],
+  outputParams: []
+})
+
+const rules = reactive({})
+const outputRules = reactive({})
+const dynamicFormRef = ref()
+const outputFormRef = ref()
+const activeNames = ref(['1', '2'])
+
+// 使用共享的 quote 逻辑
+const { quoteOptions, cascaderRefs, handleTypeChange, cascaderChange, visibleChange } = useQuote(props.data.id)
+
+// 添加表单项
+const addFormItem = (e, type) => {
+  e.stopPropagation()
+  const obj = {
+    name: '',
+    type: type === 'nodeParams' ? 'input' : 'string',
+    required: false,
+    children: [],
+    input: ''
+  }
+  if (!formData[type]) formData[type] = []
+  formData[type].push(obj)
+}
+
+// 商道智能体
+const sdAgentNodeData = ref({})
+
+const voiceOptions = () => {
+  return [{
+    value: 'x4_xiaoyan',
+    label: 'x4_xiaoyan'
+  }]
+}
+
+const handleTtsChange = (val) => {
+  if (val) {
+    sdAgentNodeData.value.tts = []
+    if (!sdAgentNodeData.value.tts || sdAgentNodeData.value.tts.length === 0) {
+      sdAgentNodeData.value.tts = [
+        { name: 'url', type: "input", input: "", disabled: true },
+        { name: 'text', type: "input", input: "", disabled: true },
+        { name: 'speed', type: "input", input: "", max: 100, disabled: true },
+        { name: 'voice', type: "input", input: "", componentType: 'select', selectOptions: voiceOptions(), disabled: true },
+        { name: 'volume', type: "input", input: "", componentType: 'number', max: 100, disabled: true }
+      ]
+    }
+  }
+}
+
+const addSdAgentItem = (e) => {
+  e.stopPropagation();
+  sdAgentNodeData.value.outputParams.push({ name: "", type: "string", input: "" });
+}
+
+const deleteSdAgentItem = (fullPath, propPath) => {
+  // 从顶层数据开始查找
+  let currentLevel = sdAgentNodeData.value[propPath];
+
+  // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
+  for (let i = 0; i < fullPath.length - 1; i++) {
+    const index = fullPath[i];
+    // 进入下一层级
+    currentLevel = currentLevel[index].children;
+  }
+
+  // 最后一个索引是当前层级要删除的项
+  const lastIndex = fullPath[fullPath.length - 1];
+  currentLevel.splice(lastIndex, 1);
+}
+
+// 初始化数据
+const initData = () => {
+  const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
+  const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
+  const transformedData = transformSdAgentNodeData(nodeParams);
+  sdAgentNodeData.value = {
+    ...transformedData,
+    outputParams
+  };
+}
+
+watch(
+  () => props.data,
+  () => {
+    initData()
+  },
+  { immediate: true, deep: true }
+)
+
+// 保存验证
+const validateAndSave = async () => {
+  let inputValid = true
+  let outputValid = true
+  if (dynamicFormRef.value) {
+    await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
+  }
+  if (outputFormRef.value) {
+    await outputFormRef.value.validate((valid) => { if (!valid) outputValid = false })
+  }
+
+  const nodeParams = []
+  nodeParams.push({ name: "config", type: "input", input: "", children: sdAgentNodeData.value.config, required: true })
+  nodeParams.push({ name: "invokeTts", type: "input", input: sdAgentNodeData.value.invokeTts })
+  if (sdAgentNodeData.value.invokeTts) {
+    nodeParams.push({ name: "tts", type: "input", input: "", children: sdAgentNodeData.value.tts })
+  }
+  lf.setProperties(props.data.id, {
+    ...props.data.properties,
+    nodeParams,
+    outputParams: sdAgentNodeData.value.outputParams
+  });
+
+
+  if (inputValid && outputValid) {
+    emit('save-success')
+  } else {
+    emit('save-error')
+  }
+}
+
+defineExpose({ validateAndSave })
+</script>
+
+<style lang="scss" scoped>
+.http-form {
+  width: 100%;
+
+  .el-collapse {
+    width: 100%;
+  }
+}
+
+.form__container {
+  margin: 12px 0;
+
+  :deep(.el-row) {
+    align-items: end;
+
+    .el-form-item {
+      margin-right: 12px;
+    }
+
+    .param-name {
+      width: 160px;
+    }
+
+    .param-type {
+      width: 80px;
+    }
+
+    .param-value {
+      width: 160px;
+    }
+
+  }
+
+
+
+  .sub-properties {
+    margin-left: 10px;
+
+    .zw {
+      margin-left: 15px;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: -4px;
+        width: 10px;
+        border-left: 1px solid gray;
+        border-bottom: 1px solid gray;
+        border-bottom-left-radius: 4px;
+        background-color: transparent;
+        height: 24px;
+      }
+    }
+  }
+
+  .gSon-properties {
+    margin-left: 10px;
+
+    .zw {
+      margin-left: 15px;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: -4px;
+        width: 10px;
+        border-left: 1px solid gray;
+        border-bottom: 1px solid gray;
+        border-bottom-left-radius: 4px;
+        background-color: transparent;
+        height: 24px;
+      }
+    }
+  }
+
+  .deleteBtn {
+    margin-bottom: 22px;
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/flow/components/params/StartParams.vue b/src/views/flow/components/params/StartParams.vue
new file mode 100644
index 0000000..1e49b23
--- /dev/null
+++ b/src/views/flow/components/params/StartParams.vue
@@ -0,0 +1,183 @@
+<template>
+    <el-collapse v-model="activeNames">
+        <el-collapse-item name="1" icon-position="left">
+            <template #title>
+                输入参数
+                <el-button :circle="true" size="small" @click="(e) => addFormItem(e, 'inputParams')" class="addFormItem">
+                    <el-icon :size="14">
+                        <Plus />
+                    </el-icon>
+                </el-button>
+            </template>
+            <el-form :inline="true" :model="formData" :rules="rules" ref="dynamicFormRef" label-position="top"
+                label-width="auto">
+                <FormItemRecursive formType="input" :current-list="formData.inputParams" prop-path="inputParams"
+                    :depth="0" :is-first-level="true" :endDepth="2" :parent-path="[]"
+                    @delete-item="(path) => deleteTopLevelItem(path, 'inputParams')" />
+            </el-form>
+        </el-collapse-item>
+    </el-collapse>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick } from 'vue'
+import { Plus, Minus } from '@element-plus/icons-vue'
+import FormItemRecursive from '../FormItemRecursive.vue'
+import { getInput } from '@/utils/flow'
+import { useQuote } from './useQuote.js'
+
+const props = defineProps({
+    data: Object
+})
+
+const emit = defineEmits(['save-success', 'save-error'])
+
+const formData = reactive({
+    inputParams: [],
+})
+
+const rules = reactive({})
+const dynamicFormRef = ref()
+
+const activeNames = ref(['1', '2'])
+
+// 添加表单项
+const addFormItem = (e, type) => {
+    e.stopPropagation()
+    const obj = {
+        name: '',
+        type: type === 'nodeParams' ? 'input' : 'string',
+        required: false,
+        children: [],
+        input: ''
+    }
+    if (!formData[type]) formData[type] = []
+    formData[type].push(obj)
+}
+
+// 删除输入参数（非递归）
+const handleDelete = (index) => {
+    formData.nodeParams.splice(index, 1)
+}
+
+// 删除顶层输出参数（递归删除通过 FormItemRecursive 的 emit 处理）
+const deleteTopLevelItem = (fullPath, propPath) => {
+    let currentLevel = formData[propPath]
+    for (let i = 0; i < fullPath.length - 1; i++) {
+        currentLevel = currentLevel[fullPath[i]].children
+    }
+    const lastIndex = fullPath[fullPath.length - 1]
+    currentLevel.splice(lastIndex, 1)
+}
+
+// 初始化数据
+const initData = () => {
+    const inputParams = JSON.parse(JSON.stringify(props.data.properties.inputParams || []))
+    formData.inputParams = inputParams;
+}
+
+watch(
+    () => props.data,
+    () => {
+        initData()
+    },
+    { immediate: true, deep: true }
+)
+
+// 保存验证
+const validateAndSave = async () => {
+    let inputValid = true
+    if (dynamicFormRef.value) {
+        await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
+    }
+
+    // 保存到 lf
+    lf.setProperties(props.data.id, {
+        ...props.data.properties,
+        ...formData
+    })
+    if (inputValid) {
+        emit('save-success')
+    } else {
+        emit('save-error')
+    }
+}
+
+defineExpose({ validateAndSave })
+</script>
+
+<style lang="scss" scoped>
+.form__container {
+    margin: 12px 0;
+
+    :deep(.el-row) {
+        align-items: end;
+
+        .el-form-item {
+            margin-right: 12px;
+        }
+
+        .param-name {
+            width: 160px;
+        }
+
+        .param-type {
+            width: 80px;
+        }
+
+        .param-value {
+            width: 160px;
+        }
+
+    }
+
+
+
+    .sub-properties {
+        margin-left: 10px;
+
+        .zw {
+            margin-left: 15px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: -4px;
+                width: 10px;
+                border-left: 1px solid gray;
+                border-bottom: 1px solid gray;
+                border-bottom-left-radius: 4px;
+                background-color: transparent;
+                height: 24px;
+            }
+        }
+    }
+
+    .gSon-properties {
+        margin-left: 10px;
+
+        .zw {
+            margin-left: 15px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: -4px;
+                width: 10px;
+                border-left: 1px solid gray;
+                border-bottom: 1px solid gray;
+                border-bottom-left-radius: 4px;
+                background-color: transparent;
+                height: 24px;
+            }
+        }
+    }
+
+    .deleteBtn {
+        margin-bottom: 22px;
+        cursor: pointer;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/flow/components/params/useQuote.js b/src/views/flow/components/params/useQuote.js
new file mode 100644
index 0000000..385ea04
--- /dev/null
+++ b/src/views/flow/components/params/useQuote.js
@@ -0,0 +1,53 @@
+import { ref } from 'vue'
+import { getInput } from '@/utils/flow'
+
+export function useQuote(nodeId) {
+  const quoteOptions = ref([])
+  const cascaderRefs = ref([])
+
+  const handleTypeChange = (index, formData, type = 'default') => {
+    // 根据节点类型处理不同数据源
+    // 这里简化为通用逻辑，具体实现需根据实际数据结构调整
+    if (formData.nodeParams[index].type === 'input') {
+      formData.nodeParams[index].quote = ''
+    } else {
+      formData.nodeParams[index].input = ''
+      const option = getInput(nodeId)
+      if (option) quoteOptions.value = option
+    }
+  }
+
+  const cascaderChange = (value, index, formData, field = 'nodeParams') => {
+    const selectedOptions = cascaderRefs.value[index]?.getCheckedNodes(true)
+    if (selectedOptions && selectedOptions.length) {
+      formData[field][index].quote = value
+      formData[field][index].quoteType = selectedOptions[0].data.type
+    }
+  }
+
+  const visibleChange = (visible, index, currentQuote, formData, field = 'nodeParams') => {
+    if (visible) {
+      const option = getInput(nodeId)
+      if (option) {
+        quoteOptions.value = option
+        const currentValue = [...currentQuote]
+        if (cascaderRefs.value[index] && currentValue.length > 0) {
+          setTimeout(() => {
+            formData[field][index].quote = []
+            setTimeout(() => {
+              formData[field][index].quote = currentValue
+            }, 0)
+          }, 0)
+        }
+      }
+    }
+  }
+
+  return {
+    quoteOptions,
+    cascaderRefs,
+    handleTypeChange,
+    cascaderChange,
+    visibleChange
+  }
+}
\ No newline at end of file
diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index 80b24bf..53d023e 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -307,7 +307,7 @@ export const collapseList = [
           ], disabled: true, required: true },
           { name: "body", type: "input", input: "", children: [
             { name: 'bodyType', type: "input", input: "json", disabled: true },
-            { name: 'json', type: "input", input: '{}' },
+            { name: 'json', type: "input", input: '{"a": 123}' },
             { name: 'formData', type: "input", input: "", children: []}
           ], required: true },
         ],
@@ -386,7 +386,15 @@ function handler(params) {
         action: 'ALM',
         nodeType: 'EDGE',
         nodeParams: [
-          { name: "deviceId", type: "input", input: "", disabled: true }
+          { name: "deviceId", type: "input", input: "", disabled: true },
+          { name: "x", type: "input", input: "", disabled: true },
+          { name: "y", type: "input", input: "", disabled: true },
+          { name: "z", type: "input", input: "", disabled: true },
+          { name: "rx", type: "input", input: "", disabled: true },
+          { name: "ry", type: "input", input: "", disabled: true },
+          { name: "rz", type: "input", input: "", disabled: true },
+          { name: "velocity", type: "input", componentType: 'number', max: 5, step: 0.1, input: 0, disabled: true },
+          { name: "acceleration", type: "input", componentType: 'number', max: 5, step: 0.1, input: 0, disabled: true },
         ],
         outputType: 'json'
       },
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3995412..983ee34 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -110,17 +110,52 @@
 <script setup>
 import LineChart from './components/LineChart.vue';
 import BarChart from './components/BarChart.vue';
+import * as echarts from 'echarts';
 
 const lineSeries = ref([
     {
       name: '执行任务数',
       type: 'line',
-      data: [120, 122, 101, 114, 90, 130, 110]
+      color: '#3e95d8',
+      data: [120, 122, 101, 114, 90, 130, 110],
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#3e95d8'
+          },
+          {
+            offset: 0.2,
+            color: '#d1efed'
+          },
+          {
+            offset: 1,
+            color: '#fff'
+          }
+        ])
+      },
     },
     {
       name: '通过率',
       type: 'line',
-      data: [96.5, 97.3, 92.8, 95.8, 98.7, 96.8, 97.9]
+      color: '#5becde',
+      data: [96.5, 97.3, 92.8, 95.8, 98.7, 96.8, 97.9],
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#5becde'
+          },
+          {
+            offset: 0.3,
+            color: '#d1efed'
+          },
+          {
+            offset: 1,
+            color: '#fff'
+          }
+        ])
+      },
     }
 ])
 
@@ -129,6 +164,7 @@ const barSeries = ref([
       name: '已完成',
       type: 'bar',
       stack: 'Ad',
+      color: '#53dbca',
       emphasis: {
         focus: 'series'
       },
@@ -138,6 +174,7 @@ const barSeries = ref([
       name: '运行中',
       type: 'bar',
       stack: 'Ad',
+      color: '#5becde',
       emphasis: {
         focus: 'series'
       },
@@ -147,6 +184,7 @@ const barSeries = ref([
       name: '暂停中',
       type: 'bar',
       stack: 'Ad',
+      color: '#d1efed',
       emphasis: {
         focus: 'series'
       },
@@ -156,6 +194,7 @@ const barSeries = ref([
       name: '异常',
       type: 'bar',
       stack: 'Ad',
+      color: '#3e95d8',
       emphasis: {
         focus: 'series'
       },
@@ -206,6 +245,7 @@ const tableList = ref([])
             display: flex;
             align-items: center;
             justify-content: space-around;
+            background: #fff;
 
             .title {
                 font-size: 16px;
@@ -219,6 +259,7 @@ const tableList = ref([])
 
             .compare {
                 font-size: 14px;
+                color: #999;
             }
         }
     }
@@ -283,15 +324,15 @@ const tableList = ref([])
                             }
 
                             .urgent {
-                                background: red;
+                                background: #51dcbe;
                             }
 
                             .important {
-                                background: yellow;
+                                background: #51dcb9;
                             }
 
                             .ordinary {
-                                background: blue;
+                                background: #4595dc;
                             }
                         }
                     }