From bdcd8e12b62ec5e049271a492fd2fd7e18c90490 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 12 十二月 2024 10:06:28 +0800
Subject: [PATCH] refactor(ui): 优化节点标题编辑和输入框聚焦逻辑
---
src/directive/customDirective.ts | 19 ++++++---
src/components/vue-flow/ui/nodes/AgentNode.vue | 2
src/components/vue-flow/ui/nodes/EndNode.vue | 4 +-
src/components/vue-flow/ui/nodes/OutputNode.vue | 8 ++--
src/components/vue-flow/ui/nodes/ConditionNode.vue | 17 ++------
src/components/vue-flow/ui/nodes/LLMNode.vue | 8 +--
src/components/vue-flow/ui/nodes/StartNode.vue | 16 ++-----
7 files changed, 32 insertions(+), 42 deletions(-)
diff --git a/src/components/vue-flow/ui/nodes/AgentNode.vue b/src/components/vue-flow/ui/nodes/AgentNode.vue
index 6a1cc38..b2d1acf 100644
--- a/src/components/vue-flow/ui/nodes/AgentNode.vue
+++ b/src/components/vue-flow/ui/nodes/AgentNode.vue
@@ -30,7 +30,7 @@
<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-elInputFocus v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
+ <el-input v-elInputFocus="true" v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
</div>
</div>
</div>
diff --git a/src/components/vue-flow/ui/nodes/ConditionNode.vue b/src/components/vue-flow/ui/nodes/ConditionNode.vue
index 6ab028b..e37835d 100644
--- a/src/components/vue-flow/ui/nodes/ConditionNode.vue
+++ b/src/components/vue-flow/ui/nodes/ConditionNode.vue
@@ -30,7 +30,7 @@
<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-elInputFocus v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
+ <el-input v-elInputFocus="true" v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
</div>
</div>
</div>
@@ -59,14 +59,7 @@
<div class="flex-column gap-y-2">
<div v-for="(subItem, subIndex) in item.conditions" class="ml-5 flex-items-center gap-x-2 group/conditionItem">
- <el-input
- filterable
- class="w-[120px] flex-0"
- v-model="subItem.left_value"
-
- placeholder="杈撳叆鍙橀噺"
- >
- </el-input>
+ <el-input filterable class="w-[120px] flex-0" v-model="subItem.left_value" placeholder="杈撳叆鍙橀噺"> </el-input>
<el-select v-model="subItem.comparison_operation" class="flex-0 w-[120px]" placeholder="閫夋嫨鏉′欢">
<el-option
v-for="item in Object.keys(compareOperationMap)"
@@ -151,7 +144,7 @@
import { computed } from 'vue';
import { VueFlowConstant } from '../../VueFlowConstant';
import { ConditionHelper, VueFlowHelper } from '../../VueFlowHelper';
-import { compareOperationMap, VarType, conditionOperatorMap, varTypeMap } from '../../vueFlowEnum';
+import { VarType, compareOperationMap, conditionOperatorMap, varTypeMap } from '../../vueFlowEnum';
import { LLMNodeData, LLMNodeEvents } from './index';
import { deepClone } from '/@/utils/other';
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();
@@ -199,7 +192,7 @@
groupName: item?.data.title ?? item?.label,
options: [],
};
- const varList = VueFlowHelper.getFieldValue(item.data,'var_list');
+ const varList = VueFlowHelper.getFieldValue(item.data, 'var_list');
if (varList) {
varList
.filter((item: any) => Boolean(item.name))
@@ -218,7 +211,7 @@
});
const data = ref(node.node.data);
-const conditionGroupList = ref(VueFlowHelper.getFieldValue(data.value,'condition'));
+const conditionGroupList = ref(VueFlowHelper.getFieldValue(data.value, 'condition'));
const titleIsEdit = ref(false);
function handleClickAddBtn() {
diff --git a/src/components/vue-flow/ui/nodes/EndNode.vue b/src/components/vue-flow/ui/nodes/EndNode.vue
index ab9ff1f..07fb440 100644
--- a/src/components/vue-flow/ui/nodes/EndNode.vue
+++ b/src/components/vue-flow/ui/nodes/EndNode.vue
@@ -31,7 +31,7 @@
<img src="/@/components/vue-flow/ui/assets/images/icon_End.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-elInputFocus v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
+ <el-input v-elInputFocus="true" v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
</div>
</div>
</div>
@@ -51,9 +51,9 @@
import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core';
import { computed, ref } from 'vue';
import { VueFlowConstant } from '../../VueFlowConstant';
+import { VueFlowHelper } from '../../VueFlowHelper';
import { LLMNodeData, LLMNodeEvents } from './index';
import { deepClone } from '/@/utils/other';
-import { VueFlowHelper } from '../../VueFlowHelper';
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();
diff --git a/src/components/vue-flow/ui/nodes/LLMNode.vue b/src/components/vue-flow/ui/nodes/LLMNode.vue
index 2115202..2430ec9 100644
--- a/src/components/vue-flow/ui/nodes/LLMNode.vue
+++ b/src/components/vue-flow/ui/nodes/LLMNode.vue
@@ -30,7 +30,7 @@
<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-elInputFocus v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
+ <el-input v-else v-elInputFocus="true" v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
</div>
</div>
</div>
@@ -78,13 +78,11 @@
<script lang="ts" setup>
import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core';
-import { ref, watchEffect } from 'vue';
+import { ref } 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';
@@ -100,7 +98,7 @@
const titleIsEdit = ref(false);
const modelSetting = ref(VueFlowHelper.getGroupParam(data.value, 0));
-const prompt = ref(VueFlowHelper.getGroupParam(data.value,1));
+const prompt = ref(VueFlowHelper.getGroupParam(data.value, 1));
const { removeNodes, nodes, addNodes } = useVueFlow();
diff --git a/src/components/vue-flow/ui/nodes/OutputNode.vue b/src/components/vue-flow/ui/nodes/OutputNode.vue
index 9c6cd7b..7aeacb5 100644
--- a/src/components/vue-flow/ui/nodes/OutputNode.vue
+++ b/src/components/vue-flow/ui/nodes/OutputNode.vue
@@ -30,7 +30,7 @@
<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-elInputFocus v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
+ <el-input v-elInputFocus="true" v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
</div>
</div>
</div>
@@ -82,7 +82,7 @@
></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>
@@ -107,11 +107,11 @@
import { ref } from 'vue';
import type { NodeProps } from '@vue-flow/core';
+import { nextTick } from 'vue';
import { VueFlowHelper } from '../../VueFlowHelper';
+import { InteractionType, interactionTypeMap } from '../../vueFlowEnum';
import { LLMNodeData, LLMNodeEvents } from './index';
import { deepClone } from '/@/utils/other';
-import { InteractionType, interactionTypeMap } from '../../vueFlowEnum';
-import { nextTick } from 'vue';
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();
const node = useNode();
diff --git a/src/components/vue-flow/ui/nodes/StartNode.vue b/src/components/vue-flow/ui/nodes/StartNode.vue
index 5f2e58a..a2b4094 100644
--- a/src/components/vue-flow/ui/nodes/StartNode.vue
+++ b/src/components/vue-flow/ui/nodes/StartNode.vue
@@ -29,7 +29,7 @@
<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-elInputFocus v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
+ <el-input v-elInputFocus="true" v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input>
</div>
</div>
</div>
@@ -91,10 +91,9 @@
<script lang="ts" setup>
import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core';
-import { ref, watchEffect } from 'vue';
+import { ref } 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';
@@ -108,19 +107,17 @@
const data = ref(node.node.data);
-const getVarList = () =>{
+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 varList = ref(VueFlowHelper.getFieldValue(data.value, 'var_list'));
const titleIsEdit = ref(false);
function handleClickAddBtn() {
-
-
varList.value.push({
name: '',
description: '',
@@ -150,7 +147,4 @@
const clickDeleteBtn = () => {
removeNodes(node.id);
};
-
-
-
</script>
diff --git a/src/directive/customDirective.ts b/src/directive/customDirective.ts
index 525793c..a62d939 100644
--- a/src/directive/customDirective.ts
+++ b/src/directive/customDirective.ts
@@ -1,4 +1,4 @@
-import type { App } from 'vue';
+import { nextTick, type App } from 'vue';
const map = new WeakMap();
const ob = new ResizeObserver((entries) => {
for (const entry of entries) {
@@ -203,13 +203,18 @@
});
};
-
-
export const eleFocusDirective = (app: App) => {
app.directive('elInputFocus', {
- mounted: (el) => {
- el.querySelector('input.el-input__inner')?.focus();
+ mounted: (el, binding: any) => {
+ const inputInner = el.querySelector('input.el-input__inner');
+ inputInner?.focus();
+ // 閫変腑 input 涓殑鎵�鏈夊唴瀹�
+ // 鍒ゆ柇鏄惁缁戝畾鍊兼湁瑕侀�変腑
+ if (binding.value) {
+ nextTick(() => {
+ inputInner?.select();
+ });
+ }
},
-
});
-};
\ No newline at end of file
+};
--
Gitblit v1.9.3