feat: 调整公共节点参数设置

src/utils/flow.js

@@ -264,3 +264,34 @@ export const convertToTree = (data) => {
 
   return result;
 }
+
+
+export const filterEmptyName = (obj) => {
+  // 1. 如果是数组，遍历每一项递归处理
+  if (Array.isArray(obj)) {
+    return obj
+      .map(item => filterEmptyName(item)) // 先递归处理子项
+      .filter(item => item !== null); // 过滤掉被剔除的空项
+  }
+
+  // 2. 如果是对象，先检查 name 是否为空，为空直接返回 null（剔除）
+  if (typeof obj === 'object' && obj !== null) {
+    // 核心：name 为空字符串 → 直接剔除这个对象
+    if (obj.name === '') {
+      return null;
+    }
+
+    // 创建新对象，保留原有属性
+    const newObj = { ...obj };
+
+    // 如果有 children，递归过滤子节点
+    if (newObj.children && Array.isArray(newObj.children)) {
+      newObj.children = filterEmptyName(newObj.children);
+    }
+
+    return newObj;
+  }
+
+  // 基础类型直接返回
+  return obj;
+}

src/views/flow/components/FormItemRecursive.vue

@@ -0,0 +1,221 @@
+<!-- components/FormItemRecursive.vue -->
+<template>
+  <div class="form-item-recursive">
+    <!-- 循环渲染当前层级的所有表单项 -->
+    <div v-for="(item, index) in currentList" :key="index">
+      <el-row>
+        <!-- 名称输入 -->
+        <el-form-item
+          :label="isFirstLevel && index === 0 ? '变量名' : ''"
+          :prop="`${propPath}.${index}.name`"
+          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
+        >
+          <el-input
+            class="param-name"
+            v-model="item.name"
+            placeholder="请输入"
+            clearable
+          />
+        </el-form-item>
+
+        <!-- 类型选择 -->
+        <el-form-item
+          :label="isFirstLevel && index === 0 ? '变量类型' : ''"
+          :prop="`${propPath}.${index}.type`"
+          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
+        >
+          <el-select
+            v-model="item.type"
+            class="param-type"
+            @change="handleTypeChange(item)"
+          >
+            <el-option label="String" value="string" />
+            <el-option label="Number" value="number" />
+            <el-option label="Boolean" value="boolean" />
+            <el-option v-if="depth < endDepth" label="Object" value="object" />
+            <el-option label="Array<String>" value="array<string>" />
+            <el-option label="Array<Number>" value="array<number>" />
+            <el-option label="Array<Boolean>" value="array<boolean>" />
+            <el-option v-if="depth < endDepth" label="Array<Object>" value="array<object>" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 描述输入 -->
+        <el-form-item
+          :label="isFirstLevel && index === 0 ? '描述' : ''"
+          :prop="`${propPath}.${index}.desc`"
+          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
+        >
+          <el-input
+            class="param-desc"
+            v-model="item.desc"
+            placeholder="请输入"
+            clearable
+          />
+        </el-form-item>
+
+        <!-- 是否必填 -->
+        <el-form-item v-if="formType === 'input'" :label="isFirstLevel && index === 0 ? '必填' : ''">
+          <el-switch
+            v-model="item.required"
+          />
+        </el-form-item>
+
+        <!-- 删除按钮（第一层第一个不能删） -->
+        <el-button
+          :icon="Minus"
+          circle
+          size="small"
+          @click="handleDelete(index)"
+          class="deleteBtn"
+        />
+
+        <!-- 添加子项按钮（当类型是object/array<object>时） -->
+        <el-button
+          v-if="['object', 'array<object>'].includes(item.type)"
+          :icon="Plus"
+          circle
+          size="small"
+          @click="handleAddChild(item)"
+          class="addBtn"
+        />
+      </el-row>
+
+      <!-- 递归渲染子项（如果有子项且类型匹配） -->
+      <!-- 层级越深，缩进越多 -->
+      <div
+        v-if="['object', 'array<object>'].includes(item.type) && item.children.length"
+        class="nested-form-items"
+        :style="{ marginLeft: `${depth * 20}px` }"
+      >
+        <!-- 递归调用自身，处理下一层级 -->
+        <!-- 非第一层 -->
+        <!-- 复用添加逻辑 -->
+        <FormItemRecursive
+          :formType="formType"
+          :current-list="item.children"
+          :prop-path="`${propPath}.${index}.children`"
+          :depth="depth + 1"
+          :is-first-level="false"
+          :endDepth="endDepth"
+          :parent-path="[...parentPath, index] "
+          @add-item="handleAddChild(item)"
+          @delete-item="handleChildDelete"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Plus, Minus } from "@element-plus/icons-vue";
+
+// 定义props
+const { formType, currentList, propPath, depth, isFirstLevel, endDepth, parentPath } = defineProps({
+  formType: {
+    type: String,
+    default: 'input'
+  },
+  currentList: {
+    type: Array,
+    default: () => []
+  },
+  propPath: {
+    type: String,
+    default: ''
+  },
+  depth: {
+    type: Number,
+    default: 0
+  },
+  isFirstLevel: {
+    type: Boolean,
+    default: true
+  },
+  endDepth: {
+    type: Number,
+    default: 2
+  },
+  parentPath: {
+    type: String,
+    default: ''
+  },
+});
+
+// 定义emit事件
+const emit = defineEmits(['add-item', 'delete-item'])
+
+// 处理类型变化（清空或添加子项）
+const handleTypeChange = (item) => {
+  if (!["object", "array<object>"].includes(item.type)) {
+    item.children = []; // 非对象类型清空子项
+  } else if (item.children.length === 0) {
+    handleAddChild(item); // 首次切换为对象类型时添加一个子项
+  }
+};
+
+// 添加子项
+const handleAddChild = (parentItem) => {
+  parentItem.children.push({
+    name: "",
+    type: "string",
+    desc: "",
+    required: false,
+    children: [],
+  });
+  // emit("add-item", parentItem); // 通知父组件（可选）
+};
+
+// 删除当前项
+const handleDelete = (index) => {
+  // 完整路径 = 父级路径 + 当前索引（如果是顶层，parentPath为undefined）
+  const fullPath = parentPath ? [...parentPath, index] : [index];
+  emit("delete-item", fullPath); // 向上传递完整路径
+}
+
+// 接收子组件的删除事件，继续向上传递
+const handleChildDelete = (childFullPath) => {
+  emit("delete-item", childFullPath);
+}
+</script>
+
+<style lang="scss" scoped>
+.nested-form-items {
+  border-left: 1px dashed #ccc; /* 层级连接线 */
+  padding-left: 12px;
+  margin-left: 0 !important;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.deleteBtn {
+  margin-bottom: 22px;
+  cursor: pointer;
+}
+
+.addBtn {
+  margin-bottom: 22px;
+  cursor: pointer;
+}
+
+:deep(.el-row) {
+  align-items: end;
+
+  .el-form-item {
+    margin-right: 12px;
+  }
+  
+  .param-name {
+    width: 120px;
+  }
+
+  .param-type {
+    width: 80px;
+  }
+
+  .param-desc {
+    width: 120px;
+  }
+
+}
+</style>

src/views/flow/components/NodeTitle.vue

@@ -44,7 +44,7 @@
             </el-icon>
           </el-button>
         </el-tooltip>
-        <el-tooltip
+        <!-- <el-tooltip
           class="box-item"
           effect="dark"
           :content="zoomState ? '缩小' : '放大'"
@@ -56,7 +56,7 @@
               <ZoomIn v-else />
             </el-icon>
           </el-button>
-        </el-tooltip>
+        </el-tooltip> -->
         <el-tooltip
           class="box-item"
           effect="dark"

src/views/flow/components/OuterNode.vue

@@ -30,7 +30,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .node__box {
-    width: 680px;
+    width: 320px;
     height: auto;
     background: #fff;
     padding: 12px;

src/views/flow/components/ParamsDrawer.vue

@@ -0,0 +1,530 @@
+<template>
+  <el-drawer
+      v-model="props.drawer"
+      :title="props.data.properties?.name || '参数配置'"
+      :before-close="handleClose"
+  >
+    <div class="input__container" v-if="props.data.type === 'start'">
+      <div class="title">
+        <div class="left">
+          <div class="tag"></div>
+          <div class="text">输入</div>
+        </div>
+        
+        <div class="right">
+          <el-button
+            @click="addFormItem('inputParams')"
+            :circle="true"
+            class="addFormItem"
+          >
+            <el-icon :size="20"><Plus /></el-icon>
+          </el-button>
+        </div>
+      </div>
+      <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>
+    </div>
+
+    <div v-if="props.data.type === 'serviceNode'">
+      <div class="input__container">
+        <div class="title">
+          <div class="left">
+            <div class="tag"></div>
+            <div class="text">输入</div>
+          </div>
+          <div class="right">
+            <el-button
+              :circle="true"
+              @click="addFormItem('nodeParams')"
+              class="addFormItem"
+            >
+              <el-icon :size="20"><Plus /></el-icon>
+            </el-button>
+          </div>
+        </div>
+        <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-row>
+            </div>
+          </el-form>
+        </div>
+      </div>
+
+      <div class="output__container">
+        <div class="title">
+          <div class="left">
+            <div class="tag"></div>
+            <div class="text">输出</div>
+          </div>
+          <div class="right">
+            <el-button
+              @click="addFormItem('outputParams')"
+              class="addFormItem"
+            >
+              <el-icon :size="20"><Plus /></el-icon>
+            </el-button>
+          </div>
+        </div>
+
+        <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>
+      </div>
+    </div>
+    
+
+    <template #footer>
+      <el-button @click="handleClose">关闭</el-button>
+      <el-button type="primary" @click="confirm">确定</el-button>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import FormItemRecursive from "./FormItemRecursive.vue";
+import { Plus } from "@element-plus/icons-vue";
+import { getInput, filterEmptyName } from "@/utils/flow";
+import { emitter } from "@/utils/eventBus";
+
+const props = defineProps({
+    drawer: Boolean,
+    data: Object
+})
+
+const emits = defineEmits(['close'])
+
+const formData = reactive({
+  inputParams: [],
+  nodeParams: [],
+  outputParams: [],
+});
+
+const rules = reactive({});
+
+const handleClose = (done) => {
+  const filteredObj = {
+    inputParams: filterEmptyName(formData.inputParams),
+    nodeParams: filterEmptyName(formData.nodeParams),
+    outputParams: filterEmptyName(formData.outputParams),
+  };
+  
+  lf.setProperties(props.data.id, {
+    ...props.data.properties,
+    ...filteredObj
+  });
+  emitter.emit("setProperties", { id: props.data.id});
+
+
+  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 = (type) => {
+  const obj ={
+    name: "",
+    type: type === 'nodeParams' ? 'input' : 'string',
+    required: false,
+    children: [],
+  }
+  if (type === 'inputParams') {
+    obj.desc = ''
+  } else if (type === 'nodeParams' || type === 'outputParams') {
+    obj.input = ''
+  }
+  formData[type].push(obj);
+};
+
+const quoteOptions = ref([]);
+const handleTypeChange = (index) => {
+  if (formData.nodeParams[index].type === "input") {
+    formData.nodeParams[index].quote = "";
+  } else {
+    formData.nodeParams[index].input = "";
+    const option = getInput(props.model.id);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const cascaderRefs = ref([]);
+const cascaderChange = (value, index) => {
+  const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
+  formData.nodeParams[index].quote = value;
+  formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
+};
+
+const visibleChange = (value, index, quote) => {
+  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) {
+            formData.nodeParams[index].quote = [];
+            // 确保响应式更新
+            setTimeout(() => {
+              formData.nodeParams[index].quote = currentValue;
+            }, 0);
+          }
+          // 手动触发级联选择器的重新渲染
+          // cascaderRefs.value[index].updatePopper();
+        }, 0);
+      }
+    }
+  }
+};
+
+watch(
+  () => props.data,
+  () => {
+    if (props.data.type === "start") {
+      formData.inputParams = props.data.properties?.inputParams || [];
+    } else if (props.data.type === "serviceNode") {
+      formData.nodeParams = props.data.properties.nodeParams;
+      formData.outputParams = props.data.properties.outputParams;
+        console.log('formData', formData)
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+</script>
+<style lang="scss" scoped>
+.input__container {
+  width: 100%;
+  background-color: #fafbfc;
+  padding: 0 16px;
+  border-radius: 8px;
+  box-sizing: border-box;
+
+  .title {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .tag {
+        width: 3px;
+        height: 16px;
+        background: #1664ff;
+        border-radius: 0 4px 4px 0;
+        margin-right: 12px;
+      }
+
+      .text {
+        font-size: 16px;
+        font-weight: 700;
+        color: #0c0d0e;
+      }
+    }
+
+    .right {
+      .addFormItem {
+        border: none;
+        background: transparent;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .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;
+          }
+        }
+      }
+    }
+}
+
+.output__container {
+    width: 100%;
+    background-color: #fafbfc;
+    padding: 0 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .title {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .tag {
+          width: 3px;
+          height: 16px;
+          background: #1664ff;
+          border-radius: 0 4px 4px 0;
+          margin-right: 12px;
+        }
+
+        .text {
+          font-size: 16px;
+          font-weight: 700;
+          color: #0c0d0e;
+        }
+      }
+
+      .right {
+        .addFormItem {
+          border: none;
+          background: transparent;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .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-desc {
+          width: 160px;
+        }
+
+      }
+    }
+  }
+</style>

src/views/flow/config.js

@@ -398,7 +398,10 @@ export const collapseList = [
           { name: "vehType", type: "input", input: "su7",  disabled: true },
         ],
         outputType: 'json',
-        outputParams: [{ name: 'coordinates', type: 'Object', children: [], desc: '坐标对象', }]
+        outputParams: [{ name: 'coordinates', type: 'object', children: [
+          { name: 'x', type: 'number', desc: 'x坐标' },
+          { name: 'y', type: 'number', desc: 'y坐标' }
+        ], desc: '坐标对象', }]
       }, {
         icon: dialogueSvg,
         name: "tts语音合成",

src/views/flow/index.vue

@@ -95,6 +95,12 @@
       @changeState="changeState"
       :flowId="flowInfoData.itemId"
     />
+
+    <ParamsDrawer
+      :drawer="showParamsDrawer"
+      :data="paramsDrawerData"
+      @close="showParamsDrawer = false"
+    />
   </div>
 
   <el-dialog v-model="visible" width="500" append-to-body>
@@ -185,6 +191,7 @@ import "@logicflow/core/lib/style/index.css";
 import "@logicflow/extension/lib/style/index.css";
 import { lfConfig, registerCustomizeNode } from "./config";
 import TestRun from "./components/TestRun.vue";
+import ParamsDrawer from "./components/ParamsDrawer.vue";
 import Aside from "./components/Aside.vue";
 import { ElMessage } from "element-plus";
 import { useFlowStore } from "@/store/modules/flow";
@@ -614,16 +621,16 @@ const initFlow = () => {
     });
 
     // 监听历史记录变化
-    lf.on("history:change", ({ data }) => {
+    // lf.on("history:change", ({ data }) => {
-      if (flowStore.disableForm) {
+    //   if (flowStore.disableForm) {
-        return;
+    //     return;
-      }
+    //   }
-      const flowData = lf.getGraphData();
+    //   const flowData = lf.getGraphData();
-      if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
+    //   if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
-        return;
+    //     return;
-      }
+    //   }
-      flowState.value = "updateData";
+    //   flowState.value = "updateData";
-    });
+    // });
 
     // 监听子节点拖动事件
     lf.on("node:mousemove", ({ data, e }) => {
@@ -641,6 +648,12 @@ const initFlow = () => {
       node.setCustomProperties && node.setCustomProperties();
     });
 
+    lf.on("node:dbclick", ({ data, e }) => {
+      showParamsDrawer.value = true;
+      paramsDrawerData.value = data;
+      console.log(data)
+    });
+
     lfRef.value = lf;
     window.lf = lf;
   }
@@ -757,6 +770,9 @@ const execute = async () => {
   }
 }
 
+const showParamsDrawer = ref(false);
+const paramsDrawerData = ref({})
+
 onMounted(() => {
   justLoadFlow();
   initFlow();

src/views/flow/nodes/common/serviceNode.vue

@@ -41,192 +41,20 @@
       :nodeName="props.properties.name"
       :nodeDesc="props.properties.desc"
       :zoom-state="nodeZoom"
-      @zoom="zoom"
+      
       @setNodeName="setNodeName"
     />
-    <div class="input__container" v-show="nodeZoom" @mousedown="(e) => e.stopPropagation()" @keydown="handleInputKeydown">
+    <!-- @zoom="zoom" -->
-      <div class="title">
-        <div class="left">
-          <div class="tag"></div>
-          <div class="text">输入</div>
-        </div>
-        <div class="right" v-if="properties.properties?.canAddFormItem">
-          <el-button
-            :disabled="flowStore.disableForm"
-            @click="addFormItem"
-            class="addFormItem"
-          >
-            <el-icon :size="20"><Plus /></el-icon>
-          </el-button>
-        </div>
-      </div>
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          :model="formData"
-          :rules="rules"
-          ref="dynamicForm"
-          label-position="top"
-          label-width="auto"
-          :disabled="flowStore.disableForm"
-        >
-          <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"
-                  v-model="property.name"
-                  @keydown="handleInputKeydown"
-                  placeholder="请输入"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item
-                :label="index === 0 ? '参数值' : ''"
-                :prop="`nodeParams.${index}.type`"
-              >
-                <el-select
-                  v-model="property.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
-                    v-if="property.componentType === 'number'"
-                    v-model="property.input"
-                    :min="0"
-                    :max="property.max || Infinity"
-                    :controls="false"
-                    :step-strictly="true"
-                    placeholder="请输入"
-                    clearable
-                    @keydown="handleInputKeydown"
-                  />
-                  <el-select
-                    v-model="property.input"
-                    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
-                    @keydown="handleInputKeydown"
-                    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-row>
-          </div>
-        </el-form>
-      </div>
-    </div>
-    <div class="output__container" v-show="nodeZoom">
-      <div v-if="props.properties?.outputParams?.length > 0">
-        <div class="title">
-          <div class="left">
-            <div class="tag"></div>
-            <div class="text">输出</div>
-          </div>
-          <div class="right">
-            <el-button
-              :disabled="flowStore.disableForm"
-              @click="addOutputFormItem"
-              class="addFormItem"
-            >
-              <el-icon :size="20"><Plus /></el-icon>
-            </el-button>
-          </div>
-        </div>
-
-        <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="deleteTopLevelItem"
-            />
-          </el-form>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
-import { getInput, initNodeZoom } from "@/utils/flow";
-import { useFlowStore } from "@/store/modules/flow";
-import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
 import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
-import FormItemRecursive from "./FormItemRecursive.vue";
 
 const props = defineProps({
   model: Object,
@@ -235,70 +63,6 @@ const props = defineProps({
 
 const emits = defineEmits(["contentChange"]);
 
-const flowStore = useFlowStore();
-
-const formData = reactive({
-  nodeParams: [],
-  outputParams: [],
-});
-
-const rules = reactive({});
-
-const quoteOptions = ref([]);
-const handleTypeChange = (index) => {
-  if (formData.nodeParams[index].type === "input") {
-    formData.nodeParams[index].quote = "";
-  } else {
-    formData.nodeParams[index].input = "";
-    const option = getInput(props.model.id);
-    if (option) {
-      quoteOptions.value = option;
-    }
-  }
-};
-
-const cascaderRefs = ref([]);
-const outputRules = reactive({});
-const cascaderChange = (value, index) => {
-  const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
-  formData.nodeParams[index].quote = value;
-  formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
-};
-
-const addOutputFormItem = () => {
-  formData.outputParams.push({
-    name: "",
-    type: "",
-    desc: "",
-    children: [],
-  });
-};
-
-const dynamicForm = ref();
-const outputFormRef = ref();
-const setNodeProperties = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    let flag = true;
-    if (outputFormRef.value) {
-      flag = await outputFormRef.value.validate();
-    }
-
-    if (result && flag) {
-      const data = toRaw(formData);
-      const properties = lf.getProperties(props.model.id);
-      lf.setProperties(props.model.id, {
-        ...properties,
-        ...data,
-        zoom: nodeZoom.value
-      });
-      emits("contentChange");
-    }
-  } catch {
-    // dynamicForm.value.clearValidate();
-  }
-};
-
 const setNodeName = (name) => {
   const properties = lf.getProperties(props.model.id);
   lf.setProperties(props.model.id, {
@@ -313,115 +77,6 @@ const inputJsonData = ref({});
 const outputJsonData = ref({});
 const errorInfoData = ref('');
 
-const visibleChange = (value, index, quote) => {
-  if (value) {
-    const option = getInput(props.model.id);
-    if (option) {
-      quoteOptions.value = option;
-      const currentValue = [...quote];
-      // 强制级联选择器重新处理选中值与选项的匹配
-      if (cascaderRefs.value[index]) {
-        // 等待DOM更新后再设置值，确保新options已生效
-        setTimeout(() => {
-          // 如果当前有选中值，重新设置一次以触发重新匹配
-          if (currentValue.length) {
-            formData.nodeParams[index].quote = [];
-            // 确保响应式更新
-            setTimeout(() => {
-              formData.nodeParams[index].quote = currentValue;
-            }, 0);
-          }
-          // 手动触发级联选择器的重新渲染
-          // cascaderRefs.value[index].updatePopper();
-        }, 0);
-      }
-    }
-  }
-};
-
-const validateForm = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      return { valid: true, message: "验证通过" };
-    } else {
-      return { valid: false, message: "验证失败" };
-    }
-  } catch {
-    return { valid: false, message: "验证失败" };
-  }
-};
-
-const addFormItem = () => {
-  formData.nodeParams.push({
-    name: "",
-    type: "",
-    desc: "",
-    required: false,
-    children: [],
-  });
-  emits("contentChange");
-};
-
-// 删除顶层表单项
-const deleteTopLevelItem = (fullPath) => {
-  // 从顶层数据开始查找
-  let currentLevel = formData.outputParams;
-
-  // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
-  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);
-  emits("contentChange");
-};
-
-const nodeZoom = ref(props?.properties?.zoom ?? true)
-const zoom = (flag) => {
-  nodeZoom.value = flag
-  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
-}
-
-watch(
-  () => props.properties,
-  () => {
-    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
-      formData.nodeParams = props.properties.nodeParams;
-      const option = getInput(props.model.id);
-      if (option) {
-        quoteOptions.value = option;
-      }
-
-      nextTick(() => {
-        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
-      })
-    }
-    if (
-      props.properties.outputParams &&
-      props.properties.outputParams.length > 0
-    ) {
-      formData.outputParams = props.properties.outputParams;
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-const handleInputKeydown = (e) => {
-  // 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
-  e.stopPropagation();
-  // 可选：明确放行 Ctrl+V（增强兼容性）
-  if ((e.ctrlKey || e.metaKey) && e.key === "v") {
-    e.returnValue = true; // 允许默认粘贴行为
-  }
-};
 
 onMounted(() => {
   emitter.on("changeNodeState", (data) => {
@@ -451,168 +106,25 @@ onMounted(() => {
       emits("contentChange");
     }
   });
+
+  emitter.on("setProperties", (data) => {
+    if (data.id === props.model.id) {
+      emits("contentChange");
+    }
+  });
 });
 
 onUnmounted(() => {
   emitter.off("changeNodeState");
   emitter.off("contentChange");
+  emitter.off("setProperties");
 });
 
-defineExpose({
-  validateForm,
-  setNodeProperties,
-});
 </script>
 
 <style lang="scss" scoped>
 .node__container {
   width: 100%;
   height: auto;
-
-  .input__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .tag {
-          width: 3px;
-          height: 16px;
-          background: #1664ff;
-          border-radius: 0 4px 4px 0;
-          margin-right: 12px;
-        }
-
-        .text {
-          font-size: 16px;
-          font-weight: 700;
-          color: #0c0d0e;
-        }
-      }
-
-      .right {
-        .addFormItem {
-          border: none;
-          background: transparent;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .form__container {
-      margin: 12px 0;
-
-      .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;
-          }
-        }
-      }
-    }
-  }
-
-  .output__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .tag {
-          width: 3px;
-          height: 16px;
-          background: #1664ff;
-          border-radius: 0 4px 4px 0;
-          margin-right: 12px;
-        }
-
-        .text {
-          font-size: 16px;
-          font-weight: 700;
-          color: #0c0d0e;
-        }
-      }
-
-      .right {
-        .addFormItem {
-          border: none;
-          background: transparent;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .form__container {
-      margin: 12px 0;
-    }
-  }
-
-  :deep(.el-row) {
-    align-items: end;
-
-    .el-input {
-      --el-input-width: 148px;
-    }
-
-    .el-select {
-      --el-select-width: 148px;
-    }
-
-    .el-cascader {
-      --el-form-inline-content-width: 148px;
-    }
-  }
 }
 </style>

src/views/flow/nodes/common/startNode.js

@@ -142,16 +142,6 @@ class StartNodeHtmlModel extends HtmlNodeModel {
     this.componentInstance = instance;
   }
 
-  // 验证表单
-  async validateForm() {
-    const result = this.componentInstance.validateForm()
-    return result
-  }
-
-  setCustomProperties() {
-    this.componentInstance.setNodeProperties()
-  }
-
   /**
    * 设置节点属性
    * 包括宽度、高度、文本编辑属性等
@@ -197,6 +187,7 @@ export function registerStartNode(lf) {
     type: "start",
     view: StartNodeHtmlNode,
     model: StartNodeHtmlModel,
+    effect: ['status'],
     events: {
        remove: (event) => {
         // 阻止默认的删除事件

src/views/flow/nodes/common/startNode.vue

@@ -16,75 +16,19 @@
          <img src="../../icon/start.svg" alt="" />
           <span class="text">Start</span>
        </div>
-        <div class="right">
-          <el-tooltip
-            class="box-item"
-            effect="dark"
-            :content="nodeZoom ? '缩小' : '放大'"
-            placement="top"
-          >
-            <el-button circle @click="zoom">
-              <el-icon>
-                <ZoomOut v-if="nodeZoom" />
-                <ZoomIn v-else />
-              </el-icon>
-            </el-button>
-          </el-tooltip>
-        </div>
       </div>
       <div class="subTitle">工作流的起始节点，用于设定启动工作流需要的信息</div>
     </div>
-    <div class="input__container" v-show="nodeZoom">
-      <div class="title">
-        <div class="left">
-          <div class="tag"></div>
-          <div class="text">输入</div>
-        </div>
-        <div class="right">
-          <el-button
-            :disabled="flowStore.disableForm"
-            @click="addFormItem"
-            class="addFormItem"
-          >
-            <el-icon :size="20"><Plus /></el-icon>
-          </el-button>
-        </div>
-      </div>
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          :model="formData"
-          :rules="rules"
-          ref="dynamicForm"
-          label-position="top"
-          label-width="auto"
-          :disabled="flowStore.disableForm"
-        >
-          <FormItemRecursive
-            formType="input"
-            :current-list="formData.inputParams"
-            prop-path="inputParams"
-            :depth="0"
-            :is-first-level="true"
-            :endDepth="2"
-            :parent-path="[]"
-            @delete-item="deleteTopLevelItem"
-          />
-        </el-form>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
 import { watch, reactive, toRaw, ref, onMounted, onUnmounted, nextTick } from "vue";
-import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
 import { useFlowStore } from "@/store/modules/flow";
 import { initNodeZoom } from "@/utils/flow";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
-import FormItemRecursive from "./FormItemRecursive.vue";
 
 const props = defineProps({
   model: Object,
@@ -92,93 +36,12 @@ const props = defineProps({
 });
 const emits = defineEmits(["contentChange"]);
 
-const flowStore = useFlowStore();
-
-const formData = reactive({
-  inputParams: [
-    {
-      name: "terminalId",
-      type: "string",
-      desc: "机器人ip",
-      disabled: true,
-      required: true,
-      children: [],
-    },
-  ],
-});
-
-const rules = reactive({});
-
-const addFormItem = () => {
-  formData.inputParams.push({
-    name: "",
-    type: "",
-    desc: "",
-    required: false,
-    children: [],
-  });
-  emits("contentChange");
-};
-
-const dynamicForm = ref();
-
-const setNodeProperties = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      const data = toRaw(formData);
-      lf.setProperties(props.model.id, {
-        ...props.properties,
-        ...data,
-        zoom: nodeZoom.value
-      });
-      emits("contentChange");
-    }
-  } catch {
-    dynamicForm.value.clearValidate()
-  }
-};
 
 const nodeOperatingStatus = ref("NORMAL");
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 
-watch(
-  () => props.properties,
-  () => {
-    if (props.properties.inputParams && props.properties.inputParams.length > 0) {
-      formData.inputParams = props.properties.inputParams;
-      nextTick(() => {
-        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
-      })
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-// 删除顶层表单项
-const deleteTopLevelItem = (fullPath) => {
-// 从顶层数据开始查找
-  let currentLevel = formData.inputParams;
-  
-  // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
-  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);
-  emits("contentChange");
-}
-
 onMounted(() => {
-  setNodeProperties();
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
       nodeOperatingStatus.value = data.status;
@@ -207,36 +70,21 @@ onMounted(() => {
       emits("contentChange");
     }
   });
+
+  emitter.on("setProperties", (data) => {
+    if (data.id === props.model.id) {
+      emits("contentChange");
+    }
+  });
 });
 
-const validateForm = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      return { valid: true, message: "验证通过" };
-    } else {
-      return { valid: false, message: "验证失败" };
-    }
-  } catch {
-    return { valid: false, message: "验证失败" };
-  }
-};
-
-const nodeZoom = ref(props?.properties?.zoom ?? true)
-const zoom = () => {
-  nodeZoom.value = !nodeZoom.value
-  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
-}
 
 onUnmounted(() => {
   emitter.off("changeNodeState");
   emitter.off("contentChange");
+  emitter.off("setProperties");
 });
 
-defineExpose({
-  validateForm,
-  setNodeProperties
-});
 </script>
 
 <style lang="scss" scoped>
@@ -277,116 +125,6 @@ defineExpose({
       margin: 8px 0;
     }
   }
-
-  .input__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .tag {
-          width: 3px;
-          height: 16px;
-          background: #1664ff;
-          border-radius: 0 4px 4px 0;
-          margin-right: 12px;
-        }
-
-        .text {
-          font-size: 16px;
-          font-weight: 700;
-          color: #0c0d0e;
-        }
-      }
-
-      .right {
-        .addFormItem {
-          border: none;
-          background: transparent;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .form__container {
-      margin: 12px 0;
-
-      .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;
-      }
-
-      .addBtn {
-        margin-bottom: 22px;
-        cursor: pointer;
-      }
-
-      :deep(.el-row) {
-        align-items: end;
-        
-        .el-input {
-            --el-input-width: 120px;
-        }
-
-        .el-select {
-            --el-select-width: 120px;
-        }
-
-        .el-cascader {
-        --el-form-inline-content-width: 120px;
-        }
-       }
-    }
-  }
 }
 </style>