feat: 调整流程节点

src/views/flow/components/NodeTitle.vue

@@ -174,7 +174,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  console.log(34566)
   emitter.off("deleteNode");
 })
 </script>

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>

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>

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>

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>

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>

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
+  }
+}

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'
       },

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;
                             }
                         }
                     }