From 5c4a16e05cfedec805cef822dfdc9ef847bdf13d Mon Sep 17 00:00:00 2001 From: zttProjectSpace Date: Thu, 16 Jan 2025 11:12:53 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E5=B7=A5=E4=BD=9C=E6=B5=81?= =?UTF-8?q?=E5=BC=B9=E7=AA=97=EF=BC=8C=E5=92=8C=E5=B7=A5=E4=BD=9C=E6=B5=81?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/createapp/components/appConfig.vue | 303 ++++++++++-------- src/views/createapp/components/workFlow.vue | 96 ++++-- .../components/workFlowConfig/CustomNode.vue | 245 +++++++++----- .../workFlowConfig/workFlowDialog.vue | 66 ++++ src/views/createapp/index.vue | 4 +- .../dialogue/components/DialogueSession.vue | 12 +- .../dialogue/components/InterPreview.vue | 13 + src/views/styles/InterPreview.scss | 0 8 files changed, 505 insertions(+), 234 deletions(-) create mode 100644 src/views/createapp/components/workFlowConfig/workFlowDialog.vue create mode 100644 src/views/dialogue/components/InterPreview.vue create mode 100644 src/views/styles/InterPreview.scss diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue index f6f02a9..1d14c3a 100644 --- a/src/views/createapp/components/appConfig.vue +++ b/src/views/createapp/components/appConfig.vue @@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'; const { t } = useI18n(); import { IconCaretRight, IconPlusCircle, IconDelete, IconSearch } from '@computing/opendesign-icons'; import DialogueSession from '../../dialogue/components/DialogueSession.vue'; -const activeName = ref([1,2,3]); +const activeName = ref([1, 2, 3]); const activeNames = ref([1, 2, 3]); const createAppForm = ref({ icon: '', @@ -17,6 +17,7 @@ const createAppForm = ref({ selectedPeople: [], }); const searchName = ref(''); +const imageUrl = ref('') const permissionTypeList = [ { label: '公开（所有人可见）', @@ -69,144 +70,152 @@ const delRecommendItem = idx => { const searchPerson = () => { curPersonList.value = permissionList.value.filter(item => item.toLowerCase().includes(searchName.value)); }; + +const handleAvatarSuccess = (res,file)=>{ + console.log(res,file) +} + diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue index 9044a44..66bd435 100644 --- a/src/views/createapp/components/workFlow.vue +++ b/src/views/createapp/components/workFlow.vue @@ -10,7 +10,8 @@ import CustomEdge from './workFlowConfig/CustomEdge.vue'; import CustomNode from './workFlowConfig/CustomNode.vue'; import CustomSaENode from './workFlowConfig/CustomSaENode.vue'; import useDragAndDrop from './workFlowConfig/useDnD'; -import { IconSearch, IconCaretRight } from '@computing/opendesign-icons'; +import WorkFlowDialog from './workFlowConfig/workFlowDialog.vue'; +import { IconSearch, IconCaretRight, IconCaretDown, IconPlusCircle } from '@computing/opendesign-icons'; const { t } = useI18n(); const copilotAside = ref(); @@ -18,6 +19,10 @@ const isCopilotAsideVisible = ref(true); const apiSearchValue = ref(); const activeNames = ref([1]); const activeName = ref(1); +const workFlowItem = ref(); +const isAddWorkFlow = ref(false); +const editData = ref(); +const dialogType = ref(''); function hanleAsideVisible(): void { if (!copilotAside.value) return; if (isCopilotAsideVisible.value) { @@ -27,7 +32,7 @@ function hanleAsideVisible(): void { } } -const { onInit, onNodeDragStop, onConnect, addEdges, updateNode, getNodes, getEdges, removeNodes } = useVueFlow(); +const { onInit, onConnect, addEdges, updateNode, getNodes, getEdges, findNode, removeNodes } = useVueFlow(); const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } = useDragAndDrop(); // 这里是初始化的开始结束的节点 @@ -56,12 +61,13 @@ const nodes = ref([ }, ]); // 开始的边默认为空数组【当然回显时应该有值】 -const edges = ref([] as any); +const edges = ref([]); // 下方为死数据--之后有接口请将其替换为接口 const nodeStancesList = ref([ { id: '11', type: 'custom', + mark: 'iiiiii', data: { label: '知识库(成功节点)', desc: '这里是知识库说明', @@ -71,6 +77,7 @@ const nodeStancesList = ref([ { id: '12', type: 'custom', + mark: 'iiiiii', data: { label: 'LLM(失败节点)', desc: '调用大模型，生成自然语言报告', @@ -80,6 +87,7 @@ const nodeStancesList = ref([ { id: '13', type: 'custom', + mark: 'iiiiii', data: { label: '条件(正常初始化节点)', desc: '条件说明', @@ -94,20 +102,24 @@ onConnect(e => { }); }); -// 这里设置/更新节点状态,更新所有-nodes.value = 新节点列表, edges.value = 新连线列表 -const setNodeStatus = () => { - // 通过使用updateNode方法对节点进行更新【包含状态以及位置等】如updateNode('1', { position:{ x: 400, y: 400 } }) - const curNodeList = getNodes.value; - const curEdgeList = getEdges.value; - curNodeList.forEach(item => { - if (item.id) { - updateNode(item.id, { - data: { ...item.data, status: 'error' }, - }); - } - }); -}; const handleChange = () => {}; +// 打开新增工作流弹窗 +const addWorkFlow = () => { + // 待增加新增弹窗 + dialogType.value = '新增'; + isAddWorkFlow.value = true; +}; +// 关闭工作流弹出 +const handleClose = () => { + isAddWorkFlow.value = false; +}; +// 删除节点 +const delNode = (id) => { + if (id) { + const node = findNode(id); + node ? removeNodes(node) : ''; + } +}