feat(flow): 新增执行功能节点并优化流程画布

wujingjing

2024-12-13 d2da078b40578cf72901442c7a2b878dfc34cae5

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

@@ -2,7 +2,7 @@
   <div
      class="min-w-[320px] w-max-[520px] border-2 rounded-lg border-solid border-gray-100 bg-white p-3 shadow-md relative hover:border-blue-500 group"
   >
      <Handle :id="targetHandleId" type="source" :position="Position.Left" />
      <Handle :id="targetHandleId" type="target" :position="Position.Left" />
      <div
         class="group-hover:visible invisible flex absolute divide-y-[1.5px] divide-solid divide-gray-100 rounded-lg right-0 -top-0.5 translate-y-[-100%]"
         style="box-shadow: 0 0 15px #dbdee6"
@@ -27,10 +27,16 @@
      <div class="flex flex-col gap-y-2">
         <div class="flex justify-between flex-0">
            <div class="flex items-center gap-x-2">
               <img src="/@/components/vue-flow/ui/assets/images/icon_Start.png" class="h-4 w-4" alt="Start icon" />
               <YWIcon
                  :name="VueFlowConfig.nodeStyleMap.get(NodeType.Output).icon"
                  :fontSize="VueFlowConfig.nodeStyleMap.get(NodeType.Output).fontSize"
                  :color="VueFlowConfig.nodeStyleMap.get(NodeType.Output).color"
                  class="rounded-lg p-1.5"
                  :class="VueFlowConfig.nodeStyleMap.get(NodeType.Output).class"
               />
               <div class="flex flex-col gap-y-1">
                  <p v-if="!titleIsEdit" class="text-xl font-bold text-gray-500" @click="titleIsEdit = true">{{ data.title }}</p>
                  <el-input v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
                  <el-input v-elInputFocus="false" v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
               </div>
            </div>
         </div>
@@ -52,7 +58,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 +77,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"
                        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,9 +86,10 @@
                           @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>
						

                  <div v-if="isEditStatus" class="flex-items-center w-full">
                     <el-input class="flex-auto" v-model="tmpEditValue"></el-input>
                     <el-button class="flex-0 ml-2" type="success" @click="confirmClick">确定 </el-button>
@@ -92,7 +99,15 @@
            </div>
         </div>
      </div>
      <Handle :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>
@@ -107,12 +122,13 @@
import { ref } from 'vue';

import type { NodeProps } from '@vue-flow/core';
import { nextTick } from 'vue';
import { VueFlowHelper } from '../../VueFlowHelper';
import { InteractionType, interactionTypeMap } from '../../vueFlowEnum';
import { LLMNodeData, LLMNodeEvents } from './index';
import { deepClone } from '/@/utils/other';
import { InteractionType, interactionTypeMap } from '../../vueFlowEnum';
import { nextTick } from 'vue';
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();
import { VueFlowConfig } from '../VueFlowConfig';
import { NodeType } from '../../vueFlowEnum';defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();

const node = useNode();
const sourceHandleId = ref(VueFlowHelper.getHandleId(node.node, 'source'));
@@ -124,7 +140,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 +179,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);