feat: 循环节点

src/views/flow/components/ParamsDrawer.vue

@@ -42,7 +42,7 @@
       </el-form>
     </div>
 
-    <div v-if="props.data.type === 'serviceNode'">
+    <div v-if="['currentLoop', 'serviceNode'].includes(props.data.type)">
       <div class="input__container">
         <div class="title">
           <div class="left">
@@ -342,7 +342,7 @@ watch(
   () => {
     if (props.data.type === "start") {
       formData.inputParams = props.data.properties?.inputParams || [];
-    } else if (props.data.type === "serviceNode") {
+    } else if (['currentLoop', 'serviceNode'].includes(props.data.type)) {
       formData.nodeParams = props.data.properties.nodeParams;
       formData.outputParams = props.data.properties.outputParams;
         console.log('formData', formData)

src/views/flow/config.js

@@ -306,7 +306,7 @@ export const collapseList = [
           { name: "input", type: "input", input: "", required: true }
         ],
         outputType: 'json',
-        outputParams: [{ name: 'result', type: 'Object', children: [], desc: 'js节点返回'}]
+        outputParams: [{ name: 'result', type: 'object', children: [], desc: 'js节点返回'}]
       },
       {
         icon: microphoneSvg,
@@ -316,12 +316,14 @@ export const collapseList = [
         action: 'GET_CURRENT_OBJECT',
         nodeType: 'getCurrentObject',
         nodeParams: [
-          { name: "array", type: "input", input: "", disabled: true }
+          { name: "array", type: "input", input: "" }
         ],
         outputType: 'json',
         outputParams: [
-          { name: 'index', type: 'number',  desc: '索引', disabled: true},
+          { name: 'index', type: 'number',  desc: '索引'},
-          { name: 'object', type: 'Object', children: [], desc: '当前循环对象', }
+          { name: 'object', type: 'object', children: [
+            { name: 'test', type: 'string',  desc: '占位属性' }
+          ], desc: '当前循环对象', }
         ]
       },
     ],

src/views/flow/index.vue

@@ -282,15 +282,15 @@ const testRun = async () => {
   }
 
   let allValid = true;
-  for (const node of nodes) {
+  // for (const node of nodes) {
-    const nodeModel = lf.getNodeModelById(node.id);
+  //   const nodeModel = lf.getNodeModelById(node.id);
-    if (nodeModel && nodeModel.validateForm) {
+  //   if (nodeModel && nodeModel.validateForm) {
-      const result = await nodeModel.validateForm();
+  //     const result = await nodeModel.validateForm();
-      if (!result.valid) {
+  //     if (!result.valid) {
-        allValid = false;
+  //       allValid = false;
-      }
+  //     }
-    }
+  //   }
-  }
+  // }
 
   if (allValid) {
     isOpen.value = true;
@@ -645,7 +645,9 @@ const initFlow = () => {
 
     lf.on("node:mouseleave", ({ data }) => {
       const node = lf.getNodeModelById(data.id);
-      node.setCustomProperties && node.setCustomProperties();
+      if (node.setCustomProperties) {
+        node.setCustomProperties();
+      }
     });
 
     lf.on("node:dbclick", ({ data, e }) => {

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

@@ -150,9 +150,9 @@ class ServiceNodeHtmlModel extends HtmlNodeModel {
     return result
   }
 
-  setCustomProperties() {
+  // setCustomProperties() {
-    this.componentInstance.setNodeProperties()
+  //   this.componentInstance.setNodeProperties()
-  }
+  // }
 
   /**
    * 设置节点属性

src/views/flow/nodes/function/currentLoop.vue

@@ -26,119 +26,8 @@
       :nodeName="props.properties.name"
       :nodeDesc="props.properties.desc"
       :zoom-state="nodeZoom"
-      @zoom="zoom"
       @setNodeName="setNodeName"
     />
-    <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" 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" v-show="nodeZoom">
-        <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"
-                  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: true, message: '请输入参数值', trigger: 'blur' }]"
-                  :prop="`nodeParams.${index}.input`"
-                >
-                    <el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
-                    <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
-                        <el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
-                    </el-select>
-                    <el-input 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"
-                    :options="quoteOptions"
-                    placeholder="请选择"
-                    @visible-change="visibleChange"
-                    @change="(value) => cascaderChange(value, index)"
-                  />
-                </el-form-item>
-              </el-form-item>
-            </el-row>
-          </div>
-        </el-form>
-      </div>
-    </div>
-    <div class="output__container" v-if="props.properties?.outputParams?.length > 0">
-      <div class="title">
-        <div class="tag"></div>
-        <div class="text">输出</div>
-      </div>
-
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          label-position="top"
-          label-width="auto"
-          :disabled="true"
-        >
-          <el-row v-for="(item, index) in props.properties.outputParams">
-            <el-form-item :label="index === 0 ? '参数名' : ''" >
-              <el-input :value="item.name" />
-            </el-form-item>
-            <el-form-item :label="index === 0 ? '参数类型' : ''" >
-              <el-input :value="item.type" />
-            </el-form-item>
-            <el-form-item :label="index === 0 ? '描述' : ''" >
-              <el-input :value="item.desc" />
-            </el-form-item>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -146,7 +35,6 @@
 import { ref, reactive, onMounted, onUnmounted, nextTick } 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";
@@ -160,46 +48,11 @@ const props = defineProps({
 
 const emits = defineEmits(["contentChange"]);
 
-const flowStore = useFlowStore();
 
 const formData = reactive({
   nodeParams: [],
 });
 
-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 dynamicForm = ref();
-
-const setNodeProperties = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      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);
@@ -214,72 +67,6 @@ const nodeOperatingStatus = ref("NORMAL");
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 
-const visibleChange = (value) => {
-  if (value) {
-    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 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 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)
-      })
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
 onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
@@ -314,10 +101,6 @@ onUnmounted(() => {
   emitter.off("contentChange");
 });
 
-defineExpose({
-  validateForm,
-  setNodeProperties,
-});
 </script>
 
 <style lang="scss" scoped>

src/views/flow/nodes/function/currentLoopNode.js

@@ -150,9 +150,9 @@ class CurrentLoopNodeHtmlModel extends HtmlNodeModel {
     return result
   }
 
-  setCustomProperties() {
+  // setCustomProperties() {
-    this.componentInstance.setNodeProperties()
+  //   this.componentInstance.setNodeProperties()
-  }
+  // }
 
   /**
    * 设置节点属性

src/views/flow/nodes/function/loop.js

@@ -1,276 +1,278 @@
-import { GroupNodeModel } from '@logicflow/extension';
+import { GroupNodeModel } from '@logicflow/extension';
-// 导入 Vue 相关方法，用于渲染组件
+// 导入 Vue 相关方法，用于渲染组件
-import { createApp, h, nextTick } from "vue";
+import { createApp, h, nextTick } from "vue";
-import { HtmlNode, h as svgH } from "@logicflow/core";
+import { HtmlNode, h as svgH } from "@logicflow/core";
-import ElementPlus from "element-plus";
+import ElementPlus from "element-plus";
-import Loop from './loop.vue';
+import Loop from './loop.vue';
-
+
-class loopBodyModel extends GroupNodeModel {
+class loopBodyModel extends GroupNodeModel {
-
+
-  initNodeData(data) {
+  initNodeData(data) {
-    super.initNodeData(data);
+    super.initNodeData(data);
-    this.children = new Set(data.children || [])
+    this.children = new Set(data.children || [])
-    this.zIndex = 0;
+    this.zIndex = 0;
-    this.isGroup = true;
+    this.isGroup = true;
-    this.resizable = false;
+    this.resizable = false;
-  }
+  }
-
+
-  // 保存组件实例引用
+  // 保存组件实例引用
-  setComponentInstance(instance) {
+  setComponentInstance(instance) {
-    this.componentInstance = instance;
+    this.componentInstance = instance;
-  }
+  }
-
+
-  // 验证表单
+  // 验证表单
-  async validateForm() {
+  async validateForm() {
-   if (this.componentInstance && this.componentInstance.validate) {
+   if (this.componentInstance && this.componentInstance.validate) {
-      try {
+      try {
-        const result = await this.componentInstance.validate();
+        const result = await this.componentInstance.validate();
-        if (result) {
+        if (result) {
-          return { valid: true, message: "验证通过" };
+          return { valid: true, message: "验证通过" };
-        } else {
+        } else {
-          return { valid: false, message: "验证失败" };
+          return { valid: false, message: "验证失败" };
-        }
+        }
-      } catch {
+      } catch {
-        return { valid: false, message: "验证失败" };
+        return { valid: false, message: "验证失败" };
-      }
+      }
-    }
+    }
-    return { valid: true, message: "无验证方法" };
+    return { valid: true, message: "无验证方法" };
-  }
+  }
-
+
-  // 计算子节点的包围盒(包含所有子节点的最小矩形区域)
+  // 计算子节点的包围盒(包含所有子节点的最小矩形区域)
-  getChildrenBBox() {
+  getChildrenBBox() {
-    const children = []
+    const children = []
-    Array.from(this.children).forEach((id) => {
+    Array.from(this.children).forEach((id) => {
-      const node = this.graphModel.getNodeModelById(id)
+      const node = this.graphModel.getNodeModelById(id)
-      if (node) {
+      if (node) {
-        children.push(this.graphModel.getNodeModelById(id))
+        children.push(this.graphModel.getNodeModelById(id))
-      } else {
+      } else {
-        this.children.delete(id)
+        this.children.delete(id)
-      }
+      }
-    });
+    });
-
+
-    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-    children.forEach((node) => {
+    nextTick(() => {
-      let width = node.width === 0 ? 600 : node.width
+      children.forEach((node) => {
-      let height = node.height === 0 ? 200 : node.height
+        let width = node.width === 0 ? 320 : node.width
-      minX = Math.min(minX, node.x - width / 2);
+        let height = node.height === 0 ? 200 : node.height
-      maxX = Math.max(maxX, node.x + width / 2);
+        minX = Math.min(minX, node.x - width / 2);
-      minY = Math.min(minY, node.y - height / 2);
+        maxX = Math.max(maxX, node.x + width / 2);
-      maxY = Math.max(maxY, node.y + height / 2);
+        minY = Math.min(minY, node.y - height / 2);
-    });
+        maxY = Math.max(maxY, node.y + height / 2);
-    this.width = maxX - minX + 200; // 增加内边距
+    });
-    this.height = maxY - minY + 260;
+    this.width = maxX - minX + 300; // 增加内边距
-    this.x = (minX + maxX) / 2;
+    this.height = maxY - minY + 260;
-    this.y = (minY + maxY) / 2 - 120;
+    this.x = (minX + maxX) / 2;
-    const properties = lf.getProperties(this.id)
+    this.y = (minY + maxY) / 2 - 120;
-    this.setProperties({
+    const properties = lf.getProperties(this.id)
-      ...properties,
+    this.setProperties({
-      width: this.width,
+      ...properties,
-      height: this.height
+      width: this.width,
-    })
+      height: this.height
-    this.getDefaultAnchor()
+    })
-  }
+    this.getDefaultAnchor()
-
+    })
-  updateSize() {
+  }
-    const children = Array.from(this.children);
+
-    if (children.length > 0) {
+  updateSize() {
-      this.getChildrenBBox();
+    const children = Array.from(this.children);
-    }
+    if (children.length > 0) {
-  }
+      this.getChildrenBBox();
-
+    }
-   // 添加子节点时立即更新大小
+  }
-  addChild(childId) {
+
-    super.addChild(childId);
+   // 添加子节点时立即更新大小
-    this.updateSize();
+  addChild(childId) {
-  }
+    super.addChild(childId);
-
+    this.updateSize();
-  // 移除子节点时更新大小
+  }
-  removeChild(childId) {
+
-    return false
+  // 移除子节点时更新大小
-  }
+  removeChild(childId) {
-
+    return false
-  // 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
+  }
-  getDefaultAnchor() {
+
-    let _a = this,
+  // 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
-      x = _a.x,
+  getDefaultAnchor() {
-      y = _a.y,
+    let _a = this,
-      width = _a.width,
+      x = _a.x,
-      height = _a.height;
+      y = _a.y,
-    return [
+      width = _a.width,
-      {
+      height = _a.height;
-        x: x + width / 2 ,
+    return [
-        y: y - 25,
+      {
-        name: "right",
+        x: x + width / 2 ,
-        id: "".concat(this.id, "_1"),
+        y: y - 25,
-        properties: { connectionType: "source" },
+        name: "right",
-      },
+        id: "".concat(this.id, "_1"),
-      {
+        properties: { connectionType: "source" },
-        x: x - width / 2,
+      },
-        y: y - 25,
+      {
-        name: "left",
+        x: x - width / 2,
-        id: "".concat(this.id, "_3"),
+        y: y - 25,
-        properties: { connectionType: "target" },
+        name: "left",
-      },
+        id: "".concat(this.id, "_3"),
-    ];
+        properties: { connectionType: "target" },
-  }
+      },
-
+    ];
-  isAllowAppendIn() {
+  }
-    return false;
+
-  }
+  isAllowAppendIn() {
-}
+    return false;
-
+  }
-class loopBodyView extends HtmlNode {
+}
-  resizeObserver = null;
+
-  isMounted; // 标记组件是否已挂载
+class loopBodyView extends HtmlNode {
-  r; // 渲染函数
+  resizeObserver = null;
-  app; // Vue 应用实例
+  isMounted; // 标记组件是否已挂载
-  container = null;
+  r; // 渲染函数
-
+  app; // Vue 应用实例
-  static reusePool = new Map(); // 节点复用池
+  container = null;
-
+
-  /**
+  static reusePool = new Map(); // 节点复用池
-   * 构造函数
+
-   * @param props 传递给节点的属性，包括模型、图模型等
+  /**
-   */
+   * 构造函数
-  constructor(props) {
+   * @param props 传递给节点的属性，包括模型、图模型等
-    super(props);
+   */
-    this.initVueApp(props);
+  constructor(props) {
-  }
+    super(props);
-
+    this.initVueApp(props);
-  initVueApp(props) {
+  }
-    this.isMounted = false;
+
-
+  initVueApp(props) {
-    this.hideAnchor = false;
+    this.isMounted = false;
-    this.autoExpand = true; // 防止锚点被折叠
+
-    this.anchorsPreset = "default"; // 重置锚点预设
+    this.hideAnchor = false;
-    // 创建 元素的渲染函数
+    this.autoExpand = true; // 防止锚点被折叠
-    this.r = h(Loop, {
+    this.anchorsPreset = "default"; // 重置锚点预设
-      model: props.model,
+    // 创建 元素的渲染函数
-      graphModel: props.graphModel,
+    this.r = h(Loop, {
-      properties: {
+      model: props.model,
-        ...props.model.getProperties(),
+      graphModel: props.graphModel,
-      },
+      properties: {
-      onAddToGroup: this.addChild.bind(this),
+        ...props.model.getProperties(),
-      onContentChange: this.handleContentChange.bind(this),
+      },
-      onBindRef: this.handleComponentInstance.bind(this)
+      onAddToGroup: this.addChild.bind(this),
-    });
+      onContentChange: this.handleContentChange.bind(this),
-
+      onBindRef: this.handleComponentInstance.bind(this)
-    // 创建 Vue 应用实例，并指定渲染函数
+    });
-    this.app = createApp({
+
-      render: () => this.r,
+    // 创建 Vue 应用实例，并指定渲染函数
-    });
+    this.app = createApp({
-  }
+      render: () => this.r,
-
+    });
-  addChild(data) {
+  }
-    this.addToGroup(data);
+
-  }
+  addChild(data) {
-
+    this.addToGroup(data);
-  handleComponentInstance(data) {
+  }
-    // 将组件实例保存到节点模型
+
-    this.props.model.setComponentInstance(data)
+  handleComponentInstance(data) {
-  }
+    // 将组件实例保存到节点模型
-
+    this.props.model.setComponentInstance(data)
-  handleContentChange() {
+  }
-    // 内容变化时强制更新尺寸
+
-    this.props.model.updateSize();
+  handleContentChange() {
-  }
+    // 内容变化时强制更新尺寸
-
+    this.props.model.updateSize();
-  // 关键修改：重写getShape方法
+  }
-  getShape() {
+
-    const { model } = this.props;
+  // 关键修改：重写getShape方法
-    const { x, y, width, height } = model;
+  getShape() {
-    
+    const { model } = this.props;
-    // 创建自定义HTML内容
+    const { x, y, width, height } = model;
-    const html = super.getShape();
+    
-    // 创建SVG组，包含HTML内容和锚点
+    // 创建自定义HTML内容
-    return svgH('g', {}, [
+    const html = super.getShape();
-      // 绘制组节点背景
+    // 创建SVG组，包含HTML内容和锚点
-      svgH('rect', {
+    return svgH('g', {}, [
-        x: x - width / 2,
+      // 绘制组节点背景
-        y: y - height / 2,
+      svgH('rect', {
-        width,
+        x: x - width / 2,
-        height,
+        y: y - height / 2,
-        stroke: '#88f',
+        width,
-        strokeWidth: 0,
+        height,
-        strokeDasharray: '5,5',
+        stroke: '#88f',
-        fill: 'rgba(136, 136, 255, 0.1)',
+        strokeWidth: 0,
-        rx: 4,
+        strokeDasharray: '5,5',
-        ry: 4
+        fill: 'rgba(136, 136, 255, 0.1)',
-      }),
+        rx: 4,
-      
+        ry: 4
-      // 添加HTML内容
+      }),
-      html,
+      
-      
+      // 添加HTML内容
-      // 渲染锚点
+      html,
-      this.getAnchorShapes()
+      
-    ]);
+      // 渲染锚点
-  }
+      this.getAnchorShapes()
-
+    ]);
-  // 创建锚点元素
+  }
-  getAnchorShapes() {
+
-    const { model } = this.props;
+  // 创建锚点元素
-    const anchors = model.anchors || [];
+  getAnchorShapes() {
-    
+    const { model } = this.props;
-    const anchorShapes = anchors.map((offset, index) => {
+    const anchors = model.anchors || [];
-      const {x, y } = offset
+    
-      
+    const anchorShapes = anchors.map((offset, index) => {
-      return svgH('circle', {
+      const {x, y } = offset
-        cx: x,
+      
-        cy: y,
+      return svgH('circle', {
-        r: 7,
+        cx: x,
-        hover: { fill: "#FF5722" }, // 禁用悬停变色
+        cy: y,
-        fill: '#FF5722',
+        r: 7,
-        stroke: '#FF5722',
+        hover: { fill: "#FF5722" }, // 禁用悬停变色
-        strokeWidth: 0,
+        fill: '#FF5722',
-        className: 'lf-node-anchor',
+        stroke: '#FF5722',
-        cursor: 'crosshair',
+        strokeWidth: 0,
-        'data-anchor-id': `anchor_${index}`
+        className: 'lf-node-anchor',
-      });
+        cursor: 'crosshair',
-    });
+        'data-anchor-id': `anchor_${index}`
-    
+      });
-    return svgH('g', {}, anchorShapes);
+    });
-  }
+    
-
+    return svgH('g', {}, anchorShapes);
-  /**
+  }
-   * 将 HTML 内容设置到指定的根元素上
+
-   * @param rootEl 根元素
+  /**
-   */
+   * 将 HTML 内容设置到指定的根元素上
-  async setHtml(rootEl) {
+   * @param rootEl 根元素
-    const nodeId = this.props.model.id;
+   */
-    if (loopBodyView.reusePool.has(nodeId)) {
+  async setHtml(rootEl) {
-      rootEl.appendChild(loopBodyView.reusePool.get(nodeId));
+    const nodeId = this.props.model.id;
-      return;
+    if (loopBodyView.reusePool.has(nodeId)) {
-    }
+      rootEl.appendChild(loopBodyView.reusePool.get(nodeId));
-
+      return;
-    if (!this.isMounted) {
+    }
-      this.isMounted = true;
+
-      this.container = document.createElement("div");
+    if (!this.isMounted) {
-      // this.container.style.display = "inline-block"; // 关键：确保容器自适应内容
+      this.isMounted = true;
-      this.container.style.width = "100%"; // 关键：确保容器自适应内容
+      this.container = document.createElement("div");
-      this.container.style.height = "100%"; // 关键：确保容器自适应内容
+      // this.container.style.display = "inline-block"; // 关键：确保容器自适应内容
-
+      this.container.style.width = "100%"; // 关键：确保容器自适应内容
-      rootEl.appendChild(this.container);
+      this.container.style.height = "100%"; // 关键：确保容器自适应内容
-      this.app.use(ElementPlus); // 关键：单独注册ElementPlus
+
-      this.app.mount(this.container);
+      rootEl.appendChild(this.container);
-      loopBodyView.reusePool.set(nodeId, this.container);
+      this.app.use(ElementPlus); // 关键：单独注册ElementPlus
-    } else {
+      this.app.mount(this.container);
-      this.r.component.props.properties = this.props.model.getProperties();
+      loopBodyView.reusePool.set(nodeId, this.container);
-    }
+    } else {
-  }
+      this.r.component.props.properties = this.props.model.getProperties();
-
+    }
-  addToGroup(childId) {
+  }
-   const groupModel = lf.getNodeModelById(this.props.model.id);
+
-   groupModel.addChild(childId);
+  addToGroup(childId) {
-   groupModel.updateSize()
+   const groupModel = lf.getNodeModelById(this.props.model.id);
-  }
+   groupModel.addChild(childId);
-}
+   groupModel.updateSize()
-
+  }
-
+}
-// 导出方法注册
+
-export function registerLoopBodyNode(lf) {
+
-  lf.register({
+// 导出方法注册
-    type: "loop",
+export function registerLoopBodyNode(lf) {
-    view: loopBodyView,
+  lf.register({
-    model: loopBodyModel,
+    type: "loop",
-  });
+    view: loopBodyView,
+    model: loopBodyModel,
+  });
 }

src/views/flow/nodes/function/loop.vue

@@ -35,6 +35,7 @@
                 >
                   <el-input
                     :disabled="index === 0"
+                    class="param-name"
                     v-model="property.name"
                     placeholder="请输入"
                     clearable
@@ -45,6 +46,7 @@
                   :prop="`nodeParams.${index}.type`"
                 >
                   <el-select
+                    class="param-type"
                     v-model="property.type"
                     @change="handleTypeChange(index)"
                   >
@@ -63,6 +65,7 @@
                     :prop="`nodeParams.${index}.input`"
                   >
                     <el-input-number
+                      class="param-value"
                       v-model="property.input"
                       :min="0"
                       :controls="false"
@@ -83,6 +86,7 @@
                     :prop="`nodeParams.${index}.quote`"
                   >
                     <el-cascader
+                      class="param-value"
                       :ref="
                         (el) => {
                           if (el) cascaderRefs[index] = el;
@@ -116,7 +120,7 @@
   </div>
 </template>
 <script setup>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted } from "vue";
 import NodeTitle from "../../components/NodeTitle.vue";
 import loop from "../../icon/loop.svg";
 import { useFlowStore } from "@/store/modules/flow";
@@ -284,21 +288,25 @@ onMounted(() => {
 
   :deep(.loop__container) {
     height: auto;
+    
+    .el-row {
+      align-items: end;
 
-    .el-input {
+      .el-form-item {
-      width: 240px;
+        margin-right: 12px;
-    }
+      }
+      
+      .param-name {
+        width: 120px;
+      }
 
-    .el-input-number {
+      .param-type {
-      width: 92px;
+        width: 80px;
-    }
+      }
 
-    .el-select {
+      .param-desc {
-      width: 120px;
+        width: 120px;
-    }
+      }
-
-    .el-cascader {
-      width: 240px;
     }
   }