feat(flow): 优化流程编辑功能

wujingjing

2024-12-12 f9cba7fdc9d60bbb2eee6d4eeff3556daea3e2ef

 src/components/vue-flow/ui/nodes/OutputNode.vue

@@ -52,7 +52,7 @@
            <div class="flex-column gap-y-1.5 w-full">
               <span class="self-start text-gray-500">{{ VueFlowHelper.getParams(outputParams, 'output_result').label }}</span>

               <el-radio-group v-model="VueFlowHelper.getParams(outputParams, 'output_result').value.type">
               <el-radio-group v-model="VueFlowHelper.getParams(outputParams, 'output_result').value.type" @change="interactionTypeChange">
                  <el-radio v-for="item in Object.keys(interactionTypeMap)" :key="item" :value="item">{{
                     interactionTypeMap[item]
                  }}</el-radio>
@@ -71,7 +71,7 @@
               >
                  <div class="flex-column gap-2">
                     <div
                        class="text-gray-400 cursor-not-allowed border border-solid rounded-lg border-gray-300 py-3 pl-3 pr-2 items-center justify-between flex group/option relative"
                        class="text-gray-400 cursor-not-allowed border border-solid rounded-lg border-gray-300 py-3 pl-3 pr-2 items-center justify-between flex group/option relative mr-6"
                        :key="item.id"
                        v-for="(item, index) in VueFlowHelper.getParams(outputParams, 'output_result').options"
                     >
@@ -80,6 +80,7 @@
                           @click="delOption(index)"
                           class="cursor-pointer group-hover/option:visible invisible ywifont ywicon-shanchu text-red-500"
                        ></span>
                        <Handle class="absolute !-right-4" :id="item.id" type="source" :position="Position.Right" />
                     </div>
                  </div>

@@ -92,7 +93,15 @@
            </div>
         </div>
      </div>
      <Handle v-if="VueFlowHelper.getParams(outputParams, 'output_result').value.type === InteractionType.Input ||VueFlowHelper.getParams(outputParams, 'output_result').value.type === InteractionType.None" :id="sourceHandleId" type="source" :position="Position.Right" />
      <Handle
         v-if="
            VueFlowHelper.getParams(outputParams, 'output_result').value.type === InteractionType.Input ||
            VueFlowHelper.getParams(outputParams, 'output_result').value.type === InteractionType.None
         "
         :id="sourceHandleId"
         type="source"
         :position="Position.Right"
      />
   </div>

   <!-- <div>
@@ -112,6 +121,7 @@
import { InteractionType, interactionTypeMap } from '../../vueFlowEnum';
import { LLMNodeData, LLMNodeEvents } from './index';
import { deepClone } from '/@/utils/other';
import { remove } from 'nprogress';
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();

const node = useNode();
@@ -124,7 +134,7 @@

const outputParams = ref(VueFlowHelper.getGroupParam(data.value, 0));

const { removeNodes, nodes, addNodes } = useVueFlow();
const { removeNodes, nodes, addNodes, removeEdges } = useVueFlow();

function handleClickDuplicateBtn() {
   const { type, position, data } = node.node;
@@ -163,9 +173,30 @@
   });
};

const removeRelativeHandleEdge = (handleId: string) => {
   const edges = node.connectedEdges.value.filter((item) => item.sourceHandle === handleId || item.targetHandle === handleId);
   removeEdges(edges);
};

const delOption = (index) => {
   const options = VueFlowHelper.getParams(outputParams.value, 'output_result').options;
   const option = options[index];

   options.splice(index);
   removeRelativeHandleEdge(option.id);
};

let preInteractionType = VueFlowHelper.getParams(outputParams.value, 'output_result').value.type;
const interactionTypeChange = (type) => {
   removeRelativeHandleEdge(sourceHandleId.value);
   if (preInteractionType === InteractionType.Select) {
      const options = VueFlowHelper.getParams(outputParams.value, 'output_result').options;
      for (const item of options) {
         removeRelativeHandleEdge(item.id);
      }
   }
   preInteractionType = type;

};

const isEditStatus = ref(false);