From 3e5f676d34a0a4b418907563cba9de7480e7e2e5 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 11 十二月 2024 18:31:14 +0800
Subject: [PATCH] 输出节点
---
vite.config.ts | 2
src/components/vue-flow/ui/nodes/OutputNode.vue | 64 ++++++++++++++++++++++++++++++-
src/components/vue-flow/MainCanvas.vue | 10 +++-
src/components/vue-flow/vueFlowEnum.ts | 2
src/views/project/yw/systemManage/flowApp/components/Header.vue | 28 ++++++++++++-
5 files changed, 95 insertions(+), 11 deletions(-)
diff --git a/src/components/vue-flow/MainCanvas.vue b/src/components/vue-flow/MainCanvas.vue
index 50a9912..87d8899 100644
--- a/src/components/vue-flow/MainCanvas.vue
+++ b/src/components/vue-flow/MainCanvas.vue
@@ -31,15 +31,16 @@
end: markRaw(EndNode),
condition: markRaw(ConditionNode),
LLM:markRaw(LLMNode),
- output:markRaw(OutputNode),
- agent:markRaw(AgentNode)
+ // output:markRaw(OutputNode),
+ agent:markRaw(AgentNode),
+ [NodeType.Output]:markRaw(OutputNode)
// LLM: markRaw(LLMNode),
// code: markRaw(CodeNode),
// knowledge: markRaw(KnowledgeNode),
// api: markRaw(ApiNode),
};
const elements = ref<Elements>();
-const { findNode, nodes, addNodes, addEdges, project, vueFlowRef, onConnect, setNodes, setEdges, setViewport } = useVueFlow({
+const { findNode, nodes, addNodes, addEdges, project, vueFlowRef, onConnect, setNodes, setEdges, setViewport,fromObject } = useVueFlow({
nodes: [
{
id: '1',
@@ -64,6 +65,9 @@
],
});
+
+
+
onConnect((params) => {
addEdges(params);
diff --git a/src/components/vue-flow/ui/nodes/OutputNode.vue b/src/components/vue-flow/ui/nodes/OutputNode.vue
index faf8da3..055a045 100644
--- a/src/components/vue-flow/ui/nodes/OutputNode.vue
+++ b/src/components/vue-flow/ui/nodes/OutputNode.vue
@@ -57,8 +57,38 @@
interactionTypeMap[item]
}}</el-radio>
</el-radio-group>
+ <el-input
+ v-model="VueFlowHelper.getParams(outputParams, 'output_result').value.value"
+ type="textarea"
+ :rows="4"
+ v-if="VueFlowHelper.getParams(outputParams, 'output_result').value.type === InteractionType.Input"
+ >
+ </el-input>
-
+ <div
+ class="self-start w-full flex-col flex items-start gap-2"
+ v-else-if="VueFlowHelper.getParams(outputParams, 'output_result').value.type === InteractionType.Select"
+ >
+ <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"
+ :key="item.id"
+ v-for="(item, index) in VueFlowHelper.getParams(outputParams, 'output_result').options"
+ >
+ <span>{{ item.label }}</span>
+ <span
+ @click="delOption(index)"
+ class="cursor-pointer group-hover/option:visible invisible ywifont ywicon-shanchu text-red-500"
+ ></span>
+ </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>
+ </div>
+ <el-button v-else type="primary" @click="addOptionClick">娣诲姞閫夐」</el-button>
+ </div>
</div>
</div>
</div>
@@ -80,7 +110,8 @@
import { VueFlowHelper } from '../../VueFlowHelper';
import { LLMNodeData, LLMNodeEvents } from './index';
import { deepClone } from '/@/utils/other';
-import { interactionTypeMap } from '../../vueFlowEnum';
+import { InteractionType, interactionTypeMap } from '../../vueFlowEnum';
+import { nextTick } from 'vue';
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();
const node = useNode();
@@ -88,7 +119,6 @@
const targetHandleId = ref(VueFlowHelper.getHandleId(node.node, 'target'));
const data = ref(node.node.data);
-
const titleIsEdit = ref(false);
@@ -112,4 +142,32 @@
const clickDeleteBtn = () => {
removeNodes(node.id);
};
+const addOptionClick = () => {
+ isEditStatus.value = true;
+};
+
+const confirmClick = () => {
+ isEditStatus.value = false;
+
+ addOption(tmpEditValue.value);
+ nextTick(() => {
+ tmpEditValue.value = '';
+ });
+};
+const addOption = (val) => {
+ const options = VueFlowHelper.getParams(outputParams.value, 'output_result').options;
+ options.push({
+ id: VueFlowHelper.genId(),
+ label: val,
+ value: '',
+ });
+};
+
+const delOption = (index) => {
+ const options = VueFlowHelper.getParams(outputParams.value, 'output_result').options;
+ options.splice(index);
+};
+
+const isEditStatus = ref(false);
+const tmpEditValue = ref('');
</script>
diff --git a/src/components/vue-flow/vueFlowEnum.ts b/src/components/vue-flow/vueFlowEnum.ts
index 1367a14..7fa6b6f 100644
--- a/src/components/vue-flow/vueFlowEnum.ts
+++ b/src/components/vue-flow/vueFlowEnum.ts
@@ -16,7 +16,7 @@
End = 'end',
Condition = 'condition',
Knowledge = 'knowledge',
- Output = 'output',
+ Output = 'output_msg',
Agent='agent'
}
diff --git a/src/views/project/yw/systemManage/flowApp/components/Header.vue b/src/views/project/yw/systemManage/flowApp/components/Header.vue
index 2c7ec3d..2473ece 100644
--- a/src/views/project/yw/systemManage/flowApp/components/Header.vue
+++ b/src/views/project/yw/systemManage/flowApp/components/Header.vue
@@ -33,17 +33,39 @@
import { useVueFlow } from '@vue-flow/core';
import JSONFormat from 'json-format';
import { downloadJSON } from '/@/utils/util';
+import { useFileDialog } from '@vueuse/core';
const emit = defineEmits(['export']);
-const { toObject } = useVueFlow();
+const { toObject,fromObject } = useVueFlow();
+const { files, open, reset, onCancel, onChange } = useFileDialog({
+ // accept: 'image/*', // Set to accept only image files
+ // 閫夋嫨 json鏂囦欢
+ accept: 'application/json',
+ directory: false, // Select directories instead of files if set true
+});
+onChange((file) => {
+ console.log(file);
+ // 鑾峰彇json 涓殑鍐呭
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const jsonStr = e.target?.result;
+ const json = JSON.parse(jsonStr);
+ fromObject(json).then((val)=>{
+ }).catch((err)=>{
+ });
+ };
+ reader.readAsText(file[0]);
+
+});
const handleCommand = (command: string | number | object) => {
const obj = toObject();
if (command === 'export') {
const jsonStr = obj ? JSONFormat(obj) : '';
- downloadJSON(jsonStr, 'flow');
- } else {
+ downloadJSON(jsonStr, 'flow');
+ } else if (command === 'import') {
+ open();
}
};
</script>
diff --git a/vite.config.ts b/vite.config.ts
index 919f58d..ecd34be 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,7 +44,7 @@
host: '0.0.0.0',
port: env.VITE_PORT as unknown as number,
open: JSON.parse(env.VITE_OPEN),
- hmr: false,
+ hmr: true,
proxy: {
'/gitee': {
target: 'https://gitee.com',
--
Gitblit v1.9.3