From 5cd7db9dc319ce7e2e81511910ec03f9aed34b0b Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 12 十二月 2024 09:49:35 +0800
Subject: [PATCH] refactor(components): 优化节点组件并添加输入框自动聚焦功能
---
src/components/vue-flow/ui/nodes/StartNode.vue | 38 +++++++++++++++++++++++++-------------
1 files changed, 25 insertions(+), 13 deletions(-)
diff --git a/src/components/vue-flow/ui/nodes/StartNode.vue b/src/components/vue-flow/ui/nodes/StartNode.vue
index 551f1a2..5f2e58a 100644
--- a/src/components/vue-flow/ui/nodes/StartNode.vue
+++ b/src/components/vue-flow/ui/nodes/StartNode.vue
@@ -29,14 +29,14 @@
<img src="/@/components/vue-flow/ui/assets/images/icon_Start.png" class="h-4 w-4" alt="Start icon" />
<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 v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
</div>
</div>
</div>
<div class="flex-auto gap-y-2 flex-col flex nodrag">
<div class="text-lg font-bold">鍙傛暟</div>
- <el-table size="small" class="flex-auto" :data="parameterTable" border>
+ <el-table size="small" class="flex-auto" :data="varList" border>
<el-table-column prop="name" width="90" label="鍙傛暟鍚�" fixed>
<template #default="scope">
<el-input v-model="scope.row.name"></el-input>
@@ -79,7 +79,7 @@
<el-button class="w-fit" type="primary" @click="handleClickAddBtn">娣诲姞鍙傛暟</el-button>
</div>
</div>
- <Handle type="source" :position="Position.Right" />
+ <Handle :id="handleId" type="source" :position="Position.Right" />
</div>
<!-- <div>
@@ -91,11 +91,12 @@
<script lang="ts" setup>
import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core';
-import { ref } from 'vue';
+import { ref, watchEffect } from 'vue';
import type { NodeProps } from '@vue-flow/core';
import { computed } from 'vue';
import { VueFlowConstant } from '../../VueFlowConstant';
+import { VueFlowHelper } from '../../VueFlowHelper';
import { parameterTypeMap } from '../../vueFlowEnum';
import { LLMNodeData, LLMNodeEvents } from './index';
import { deepClone } from '/@/utils/other';
@@ -103,16 +104,24 @@
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();
const node = useNode();
+const handleId = ref(VueFlowHelper.getHandleId(node.node, 'source'));
const data = ref(node.node.data);
-const titleIsEdit = ref(false);
-const parameterTable = computed(() => data.value[VueFlowConstant.PARAMS_KEY]);
-function handleClickAddBtn() {
- if (!data.value[VueFlowConstant.PARAMS_KEY]) {
- data.value[VueFlowConstant.PARAMS_KEY] = [];
- }
- data.value[VueFlowConstant.PARAMS_KEY].push({
+const getVarList = () =>{
+ const varList = data.value[VueFlowConstant.GROUP_PARAMS_KEY][0][VueFlowConstant.PARAMS_KEY].find(
+ (item) => item.key === 'condition'
+ ).value;
+ return varList;
+}
+
+const varList = ref(VueFlowHelper.getFieldValue(data.value,'var_list'));
+const titleIsEdit = ref(false);
+
+function handleClickAddBtn() {
+
+
+ varList.value.push({
name: '',
description: '',
type: '',
@@ -121,14 +130,14 @@
}
function handleClickDeleteBtn(index: number) {
- data.value[VueFlowConstant.PARAMS_KEY].splice(index, 1);
+ varList.value.splice(index, 1);
}
const { removeNodes, nodes, addNodes } = useVueFlow();
function handleClickDuplicateBtn() {
const { type, position, data } = node.node;
const newNode = {
- id: (nodes.value.length + 1).toString(),
+ id: VueFlowHelper.genGeometryId(),
type,
position: {
x: position.x + 100,
@@ -141,4 +150,7 @@
const clickDeleteBtn = () => {
removeNodes(node.id);
};
+
+
+
</script>
--
Gitblit v1.9.3