diff --git a/src/apis/workFlow/workFlowService.ts b/src/apis/workFlow/workFlowService.ts index 1314394a359fda8189cffc208061792e50ce5eea..992f6b3c216fb1acf8151b590dbfa56b64727a0a 100644 --- a/src/apis/workFlow/workFlowService.ts +++ b/src/apis/workFlow/workFlowService.ts @@ -11,7 +11,7 @@ export const queryAllFlowService = (params: { page: number; pageSize: number; }): Promise<[any, FcResponse | undefined]> => { - return get('/api/flow/service', params); + return get('/api/flow/service'); }; /** diff --git a/src/components/dialoguePanel/DialoguePanel.vue b/src/components/dialoguePanel/DialoguePanel.vue index 7d2961e6dce2774d634421edfa961c4298e02c61..28a06df48438b1de2185b3298a0b155ff6d4ba63 100644 --- a/src/components/dialoguePanel/DialoguePanel.vue +++ b/src/components/dialoguePanel/DialoguePanel.vue @@ -438,10 +438,14 @@ const handleSendMessage = async (question, user_selected_flow, user_selected_app
- {{ dayjs(createdAt * 1000).format("YYYY-MM-DD HH:mm:ss") }} +
+ {{ dayjs(createdAt * 1000).format("YYYY-MM-DD HH:mm:ss") }} +
- {{ dayjs(Date.now()).format("YYYY-MM-DD HH:mm:ss") }} +
+ {{ dayjs(Date.now()).format("YYYY-MM-DD HH:mm:ss") }} +
@@ -1138,6 +1142,12 @@ const handleSendMessage = async (question, user_selected_flow, user_selected_app .dialogue-panel__user-time { height: 20px; line-height: 20px; + .centerTimeStyle { + width: 136px; + padding: 0 8px; + background-color: var(--o-time-text); + border-radius: 12px; + } } .dialogue-panel__robot { gap: 16px; diff --git a/src/store/conversation.ts b/src/store/conversation.ts index 9f18e6911129e6d163c4f5976530975692ba7138..722bf30e436100b34048f182b35212f604227edd 100644 --- a/src/store/conversation.ts +++ b/src/store/conversation.ts @@ -294,7 +294,7 @@ export const useSessionStore = defineStore('conversation', () => { //事件流开始--后续验证对话无下拉连接后则完全替换 let flow = message.flow; conversationItem.flowdata = { - id: flow?.stepName + flow?.stepId || "", + id: flow?.stepId || "", title: i18n.global.t('flow.flow_start'), // 工作流这里stepName代替step_progresss，为不影响首页对话暂且用|| progress: flow?.stepProgress || "", @@ -310,7 +310,7 @@ export const useSessionStore = defineStore('conversation', () => { // target.data.input = message // } conversationItem.flowdata?.data[0].push({ - id:message.flow?.stepName + message.flow?.stepId, + id:message.flow?.stepId, title:message.flow?.stepName, status:message.flow?.stepStatus, data:{ @@ -323,12 +323,12 @@ export const useSessionStore = defineStore('conversation', () => { } } else if(message["event"] === "step.output") { - const target = conversationItem.flowdata?.data[0].find(item => item.id === message.flow?.stepName + message.flow?.stepId); + const target = conversationItem.flowdata?.data[0].find(item => item.id === message.flow?.stepId); if (target) { target.data.output = message.content target.status = message.flow?.stepStatus; // 工作流添加每阶段的时间耗时 - target['costTime'] = message.metadata?.time_cost; + target['costTime'] = message.metadata?.timeCost; if(message.flow.step_status === "error"){ conversationItem.flowdata.status = message.flow?.stepStatus; } @@ -340,7 +340,7 @@ export const useSessionStore = defineStore('conversation', () => { if (params.type) { // 如果是工作流的调试功能-添加status/data conversationItem.flowdata = { - id: flow?.stepName, + id: flow?.stepId, title: i18n.global.t('flow.flow_end'), progress: flow?.stepProgress, status: message.flow?.stepStatus, @@ -357,7 +357,7 @@ export const useSessionStore = defineStore('conversation', () => { } }) conversationItem.flowdata = { - id: flow?.stepName, + id: flow?.stepId, title: i18n.global.t('flow.flow_end'), progress: flow?.stepProgress, status:"success", diff --git a/src/views/createapp/components/codeMirror/mirrorTextArea.vue b/src/views/createapp/components/codeMirror/mirrorTextArea.vue index 719a7b4f1ffd7d03d6d4298b52f2ec36ff8adc90..e054cfbc8d166978fed9c79cb8f6bf898e122e67 100644 --- a/src/views/createapp/components/codeMirror/mirrorTextArea.vue +++ b/src/views/createapp/components/codeMirror/mirrorTextArea.vue @@ -51,4 +51,20 @@ watch( outline: none; } } +.outputYaml { + .cm-editor { + border: none; + .cm-gutters { + display: none; + } + .cm-content { + .cm-activeLine { + background-color: transparent; + } + .ͼl { + color: var(--o-text-color-secondary); + } + } + } +} diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue index 59db808875c34af40c81b23864ce0223516ad428..f2d26e93f63bd99c3b823074484466e87acd6aa5 100644 --- a/src/views/createapp/components/workFlow.vue +++ b/src/views/createapp/components/workFlow.vue @@ -236,6 +236,10 @@ const dropFunc = e => { ElMessage.warning('请先创建/编辑工作流'); return; } + // 如果调试弹窗打开，不可拖拽 + if (debugDialogVisible.value) { + return; + } onDrop(e); // 添加节点时-判断节点是否都连接 nodeAndLineConnection(); @@ -389,35 +393,37 @@ const delFlow = item => { // 下拉选择对应的工作流 const choiceFlowId = flowItem => { - workFlowItemName.value = flowItem.name; - editFlow(flowItem); + if (flowItem) { + workFlowItemName.value = flowItem.name; + editFlow(flowItem); + } }; // 回显工作流节点和边 const redrageFlow = (nodesList, edgesList) => { const newNodeList = nodesList.map(node => { let newNode = { - id: node.nodeId, - type: node.type, + id: node.stepId, + type: node.callId, data: { name: node.name, description: node.description, parameters: node.parameters, - nodeMetaDataId: node.nodeMetaDataId, + nodeMetaDataId: node.nodeId, serviceId: node.serviceId, }, position: node.position, deletable: true, }; // 这里节点/handle的类型要根据返回的类型转换下 - if (node.type === 'start' || node.type === 'end') { + if (node.callId === 'start' || node.callId === 'end') { newNode.data = { ...newNode.data, - target: node.type === 'start' ? 'source' : 'target', - nodePosition: node.type === 'start' ? 'Right' : 'Left', + target: node.callId === 'start' ? 'source' : 'target', + nodePosition: node.callId === 'start' ? 'Right' : 'Left', }; newNode.deletable = false; - } else if (node.type === 'choice') { + } else if (node.callId === 'choice') { newNode.type = 'branch'; } else { newNode.type = 'custom'; @@ -463,8 +469,8 @@ $bus.on('getNodesStatue', lines => { // output-节点运行结束时，获取节点运行的耗时 let constTime = ''; if (newLines.data.event === 'step.output') { - totalTime.value += newLines.data?.metadata?.time_cost; - constTime = `${newLines.data?.metadata?.time_cost?.toFixed(3)}s` + totalTime.value += newLines.data?.metadata?.timeCost; + constTime = `${newLines.data?.metadata?.timeCost?.toFixed(3)}s` // 此处获取output的数据，并将此数据传给节点显示 updateNodeFunc(newLines.data.flow.stepId, newLines.data.flow?.stepStatus, constTime, newLines.data?.content); } else { @@ -489,6 +495,7 @@ $bus.on('getNodesStatue', lines => { const updateNodeFunc = (id, status, constTime, content?) => { // 获取到当前的nodeId,更新状态 const node = findNode(id); + // 这里node的data也需要转换下 const data = content ? {...node?.data, content} : node?.data; // 更新当前节点的状态，以及运行时间 updateNode(id, { data: { ...data, status, constTime } }); @@ -497,11 +504,11 @@ const updateNodeFunc = (id, status, constTime, content?) => { const changeTargetEdges = [...getEdges.value.filter(item => item.target === id)]; // 分别遍历相应的以该节点为起源的边-并更新它们的状态为最新状态 changeSourceEdges.forEach(item => { - updateEdgeData(item.id, { sourceStatus: 'success' }); + updateEdgeData(item.id, { sourceStatus: status }); }); // 分别遍历相应相应的以该节点为目标的边-并更新它们的状态为最新状态 changeTargetEdges.forEach(item => { - updateEdgeData(item.id, { targetStatus: 'success' }); + updateEdgeData(item.id, { targetStatus: status }); }); }; @@ -512,15 +519,17 @@ const saveFlow = (updateNodeParameter?) => { } // 将对应的节点和边存储格式改造 let updateNodes = getNodes.value.map(item => { + const {nodeMetaDataId, ...otherItem } = item.data; let newItem = { enable: true, editable: false, position: item.position, apiId: item.data.nodeMetaDataId, + callId: item.data.nodeMetaDataId, serviceId: item.data.serviceId, - nodeMetaDataId: item.data.nodeMetaDataId, - nodeId: item.id, - ...item.data, + nodeId: item.data.nodeMetaDataId, + stepId: item.id, + ...otherItem, }; if (item.type === 'end' || item.type === 'start') { // 更新开始结束节点结构 @@ -528,19 +537,20 @@ const saveFlow = (updateNodeParameter?) => { ...newItem, apiId: item.type, // 这两个id个应该没有-暂时随意复制 serviceId: item.type, - nodeId: item.id, - type: item.type, + nodeId: 'Empty', + callId: item.type, }; } else if (item.type === 'branch') { // 这里是需要将parameters newItem = { ...newItem, - type: 'choice', + callId: 'choice', parameters: item.data.parameters, }; } return newItem; }); + console.log(updateNodes, 'update-nodes') // 更新对应的边的结构 const updateEdges = getEdges.value.map(item => { let newEdge = { diff --git a/src/views/createapp/components/workFlowConfig/useLayout.js b/src/views/createapp/components/workFlowConfig/useLayout.js index d94ac2d572f62101005033cf72b69027c01bbe82..9eb12b60284ed4a27537cd806b7697ccac3bbc46 100644 --- a/src/views/createapp/components/workFlowConfig/useLayout.js +++ b/src/views/createapp/components/workFlowConfig/useLayout.js @@ -11,6 +11,9 @@ import { ref } from 'vue'; export function useLayout() { const {findNode} = useVueFlow(); + + + const graph = ref(new dagre.graphlib.Graph()); const previousDirection = ref('LR'); @@ -23,21 +26,31 @@ export function useLayout() { // 设置默认边标签 dagreGraph.setDefaultEdgeLabel(() => ({})); - const isHorizontal = direction === 'LR'; + const isHorizontal = direction === 'TB'; // 设置图布局 dagreGraph.setGraph({rankdir: direction}); previousDirection.value = direction; + let maxHeight = 108; + for (const node of nodes) { + // 查找到节点的信息 + const graphNode = findNode(node.id) + maxHeight = maxHeight > graphNode.dimensions.height ? maxHeight : graphNode.dimensions.height; + } for (const node of nodes) { // 查找到节点的信息 const graphNode = findNode(node.id) + const newNode = { + width: graphNode.dimensions.width + 100 || 150, + height: graphNode.dimensions.height + 100 || 50, + } // 设置节点 dagreGraph.setNode(node.id, { - width: graphNode.dimensions.width || 150, - height: graphNode.dimensions.height || 50, + width: graphNode.dimensions.width + 100 || 150, + height: graphNode.dimensions.height + 100 || 50, }); } @@ -47,100 +60,33 @@ export function useLayout() { } // 排版 - dagre.layout(dagreGraph); + dagre.layout(dagreGraph); // set nodes with updated positions return nodes.map(node => { const nodeWithPosition = dagreGraph.node(node.id); - let position = { x: nodeWithPosition.x, y: nodeWithPosition.y } - console.log(node, 'node, ', nodeWithPosition) + let diff = maxHeight - nodeWithPosition.height; + let position = { x: nodeWithPosition.x, y: nodeWithPosition.y + diff / 2} + // newY = diff // if(['1','2'].includes(node.id)){ - // } + // }+ + let newPosition = { x: nodeWithPosition.x, y: nodeWithPosition.y + diff / 2} + // 需要进行判断--是否为开始结束 + if(node.id === 'start' || node.id === 'end') { + newPosition = { x: nodeWithPosition.x + 132, y: nodeWithPosition.y + diff / 2 + 26} + } + return { ...node, targetPosition: isHorizontal ? Position.Left : Position.Top, sourcePosition: isHorizontal ? Position.Right : Position.Bottom, - position: { x: nodeWithPosition.x, y: nodeWithPosition.y }, + position: newPosition, // 这里修改即可 }; }); } return { graph, layout, previousDirection }; - - } - - - - - - - - - - - - - - - - - - - // const { findNode } = useVueFlow(); - - // const graph = ref(new dagre.graphlib.Graph()); - - // function layout(nodes, edges, direction) { - // // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there - // const dagreGraph = new dagre.graphlib.Graph(); - - // graph.value = dagreGraph; - - // dagreGraph.setDefaultEdgeLabel(() => ({})); - - // const isHorizontal = direction === 'LR'; - // dagreGraph.setGraph({ rankdir: direction }); - - // for (const node of nodes) { - // // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type) - // const graphNode = findNode(node.id); - - // if (!graphNode) { - // console.error(`Node with id ${node.id} not found in the graph`); - // continue; - // } - // console.log(node, 'node', graphNode.dimensions.width) - // dagreGraph.setNode(node.id, { - // width: graphNode.dimensions.width || 150, - // height: graphNode.dimensions.height || 50, - // }); - // } - - // for (const edge of edges) { - // dagreGraph.setEdge(edge.source, edge.target); - // } - - // dagre.layout(dagreGraph); - - // // set nodes with updated positions - // return nodes.map(node => { - // const nodeWithPosition = dagreGraph.node(node.id); - // let position = { x: nodeWithPosition.x, y: nodeWithPosition.y } - // if(['1','2'].includes(node.id)){ - - // } - // return { - // ...node, - // targetPosition: isHorizontal ? Position.Left : Position.Top, - // sourcePosition: isHorizontal ? Position.Right : Position.Bottom, - // position: { x: nodeWithPosition.x, y: nodeWithPosition.y }, - // }; - // }); - // } - - // return { graph, layout }; -// } diff --git a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue index 0e4b34182b4da479a44a7d9e70c78a230e2e8ca5..ea3e2b07e176c099d85dcfdda7bfa981de08a0f0 100644 --- a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue +++ b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue @@ -92,14 +92,14 @@ const handleSubmit = (formEl: FormInstance | undefined) => { nodes: [ { apiId: 'startId', - nodeMetaDataId: 'start', + nodeId: 'Empty', serviceId: 'start', name: '开始', - type: 'start', + callId: 'start', description: 'startNode', editable: false, enable: true, - nodeId: 'start', + stepId: 'start', position: { x: 100, y: 160, @@ -107,14 +107,14 @@ const handleSubmit = (formEl: FormInstance | undefined) => { }, { apiId: 'endId', - nodeMetaDataId: 'end', + nodeId: 'Empty', serviceId: 'end', name: '结束', - type: 'end', + callId: 'end', description: 'endNode', editable: false, enable: true, - nodeId: 'end', + stepId: 'end', position: { x: 600, y: 160, diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue index 8e5052f5c74adbcde13fb10b511f5b72a3900880..2875f6c5b0d577b215233d5f9e49e791a9a5332d 100644 --- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue +++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue @@ -14,7 +14,7 @@