From b698f042e84091241bd0e061b3a1ce479e294d6e Mon Sep 17 00:00:00 2001 From: li-shengren-123456 Date: Thu, 27 Feb 2025 17:36:42 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=8D=A2=E8=A1=8C=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dialogue/components/DialogueAside.vue | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/views/dialogue/components/DialogueAside.vue b/src/views/dialogue/components/DialogueAside.vue index 420f589..f698017 100644 --- a/src/views/dialogue/components/DialogueAside.vue +++ b/src/views/dialogue/components/DialogueAside.vue @@ -482,6 +482,9 @@ watch( display: block; margin-left: 24px; align-items: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } &:hover { background-color: #f3f4f6; @@ -490,11 +493,6 @@ watch( &.selected { background: linear-gradient(127.6deg, rgba(109, 117, 250, 0.2) -1.725%, rgba(90, 179, 255, 0.2) 98.22%); color: var(--o-text-color-primary); - > span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } } } } -- Gitee From d9740ac82dcb448410511e4db89b3d70d34a1292 Mon Sep 17 00:00:00 2001 From: li-shengren-123456 Date: Thu, 27 Feb 2025 21:16:45 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E8=B0=83=E8=AF=95=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E6=89=93=E5=BC=80=E6=97=B6=EF=BC=8C=E5=B7=A6=E4=BE=A7=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E8=8A=82=E7=82=B9=E7=A6=81=E6=AD=A2=E3=80=82=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E4=BF=AE=E6=94=B9=E5=BC=80=E5=A7=8B=E7=BB=93=E6=9D=9F?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=88=9D=E5=A7=8B=E5=8C=96=E5=AD=97=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/createapp/components/workFlow.vue | 4 ++++ .../createapp/components/workFlowConfig/workFlowDialog.vue | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue index 59db808..871a1e7 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(); diff --git a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue index 0e4b341..31b7fc6 100644 --- a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue +++ b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue @@ -92,7 +92,7 @@ const handleSubmit = (formEl: FormInstance | undefined) => { nodes: [ { apiId: 'startId', - nodeMetaDataId: 'start', + nodeMetaDataId: 'none', serviceId: 'start', name: '开始', type: 'start', @@ -107,7 +107,7 @@ const handleSubmit = (formEl: FormInstance | undefined) => { }, { apiId: 'endId', - nodeMetaDataId: 'end', + nodeMetaDataId: 'none', serviceId: 'end', name: '结束', type: 'end', -- Gitee From 3e8c1ccfd8adf285f136ba94a967befa711c9225 Mon Sep 17 00:00:00 2001 From: li-shengren-123456 Date: Fri, 28 Feb 2025 18:15:24 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E7=9B=B8=E5=BA=94?= =?UTF-8?q?=E7=9A=84=E5=B7=A5=E4=BD=9C=E6=B5=81=E5=AD=97=E6=AE=B5=EF=BC=8C?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=B0=83=E8=AF=95=E5=BC=B9=E7=AA=97=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E8=B0=83=E6=95=B4yaml=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/workFlow/workFlowService.ts | 2 +- .../dialoguePanel/DialoguePanel.vue | 14 ++- src/store/conversation.ts | 12 +- .../components/codeMirror/mirrorTextArea.vue | 16 +++ src/views/createapp/components/workFlow.vue | 44 ++++--- .../components/workFlowConfig/useLayout.js | 110 +++++------------- .../workFlowConfig/workFlowDialog.vue | 12 +- .../workFlowConfig/yamlEditDrawer.vue | 31 ++++- .../dialogue/components/InterPreview.vue | 12 +- src/views/styles/createApp.scss | 1 + src/views/styles/workFlowDebug.scss | 7 +- 11 files changed, 142 insertions(+), 119 deletions(-) diff --git a/src/apis/workFlow/workFlowService.ts b/src/apis/workFlow/workFlowService.ts index 1314394..992f6b3 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 7d2961e..28a06df 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 9f18e69..722bf30 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 719a7b4..e054cfb 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 871a1e7..f2d26e9 100644 --- a/src/views/createapp/components/workFlow.vue +++ b/src/views/createapp/components/workFlow.vue @@ -393,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'; @@ -467,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 { @@ -493,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 } }); @@ -501,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 }); }); }; @@ -516,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') { // 更新开始结束节点结构 @@ -532,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 d94ac2d..9eb12b6 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 31b7fc6..ea3e2b0 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: 'none', + 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: 'none', + 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 8e5052f..2875f6c 100644 --- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue +++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue @@ -14,7 +14,7 @@