feat: 调整失焦的问题的

src/views/flow/components/NodeTitle.vue

@@ -5,11 +5,18 @@
         <img :src="imageUrl()" alt="" />
         <div class="text__container">
           <div class="text__title" v-if="showTextTitle">
-            <span class="text">{{ nodeName }}</span>
+            <span class="text">{{ localName }}</span>
-            <el-icon class="editIcon" @click="showTextTitle = false"><EditPen/></el-icon>
+            <el-icon class="editIcon" @click="startEditing"><EditPen/></el-icon>
           </div>
           <div class="input_name_container" v-else >
-            <el-input v-model="nodeName" @keydown="handleInputKeydown" />
+            <el-input
+              v-model="localName"
+              @focus="handleInputFocus"
+              @blur="handleInputBlur"
+              @keydown="handleInputKeydown"
+              @click.stop
+              @mousedown.stop
+              />
             <el-button
               class="input_name_select"
               circle
@@ -94,15 +101,31 @@ const props = defineProps({
 const emits = defineEmits(['setNodeName'])
 
 const showTextTitle = ref(true)
-const nodeName = ref(props.nodeProperties.name || props.nodeName)
+const localName = ref('')
+const isEditing = ref(false)
+
+// 开始编辑
+const startEditing = () => {
+  isEditing.value = true
+  showTextTitle.value = false
+
+  // 使用 nextTick 确保 DOM 更新后再聚焦
+  nextTick(() => {
+    if (inputRef.value && inputRef.value.input) {
+      inputRef.value.input.focus()
+      // 选择所有文本
+      inputRef.value.input.select()
+    }
+  })
+}
 
 const confirmNodeName = () => {
-  emits('setNodeName', nodeName.value)
+  emits('setNodeName', localName.value)
   showTextTitle.value = true
 }
 
 const cancelNodeName = () => {
-  nodeName.value = props.nodeProperties?.name || props.nodeName
+  localName.value = props.nodeProperties?.name || props.nodeName
   showTextTitle.value = true
 }
 
@@ -138,6 +161,32 @@ const execute = () => {
   document.dispatchEvent(myEvent);
 }
 
+const handleInputFocus = (e) => {
+  console.log('Input focused')
+  // 阻止事件冒泡到 LogicFlow
+  e.stopPropagation()
+  e.preventDefault()
+
+  // 设置编辑状态
+  isEditing.value = true
+
+  // 延迟执行，确保事件处理完成
+  setTimeout(() => {
+    if (inputRef.value && inputRef.value.input) {
+      inputRef.value.input.focus()
+    }
+  }, 0)
+}
+
+const handleInputBlur = (e) => {
+  console.log('Input blurred')
+  // 如果正在编辑，不要立即取消编辑状态
+  if (isEditing.value) {
+    // 可以选择在失焦时自动保存或取消
+    // 这里我们选择不自动保存，让用户点击确认按钮
+  }
+}
+
 const handleInputKeydown = (e) => {
   // 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
   e.stopPropagation();
@@ -151,7 +200,12 @@ const imageUrl = () => {
   return new URL(props.icon, import.meta.url).href;
 }
 
+onMounted(() => {
+  localName.value = props.nodeProperties?.name || props.nodeName
+})
+
 onUnmounted(() => {
+  console.log(34566)
   emitter.off("deleteNode");
 })
 </script>
@@ -164,6 +218,7 @@ onUnmounted(() => {
 
     .left {
       display: flex;
+      align-items: center; // 添加垂直居中
 
       img {
         width: 24px;
@@ -193,6 +248,18 @@ onUnmounted(() => {
           .el-input {
             margin-left: 12px;
             width: 120px;
+            // 确保输入框有更高的 z-index
+            position: relative;
+            z-index: 1000;
+
+            // 覆盖 Element Plus 的默认样式，确保焦点状态明显
+            :deep(.el-input__wrapper) {
+              box-shadow: 0 0 0 1px #409eff !important;
+
+              &:focus-within {
+                box-shadow: 0 0 0 2px #409eff !important;
+              }
+            }
           }
 
           .input_name_select {
@@ -226,4 +293,11 @@ onUnmounted(() => {
     margin: 8px 0;
   }
 }
+
+// 添加全局样式，确保输入框焦点不被其他元素干扰
+:global(.lf-node) {
+  .el-input__inner {
+    user-select: text !important;
+  }
+}
 </style>

src/views/flow/nodes/function/switch.vue

@@ -72,6 +72,10 @@
                 v-model="params.withOr"
                 placeholder="Select"
                 style="width: 240px"
+                @focus="handleInputFocus"
+                @blur="handleInputBlur"
+                @click.stop
+                @mousedown.stop
               >
                 <el-option key="and" label="AND" value="and" />
                 <el-option key="or" label="OR" value="or" />
@@ -88,6 +92,11 @@
                 <!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
                 <el-select
                   v-model="property.nameType"
+                  @focus="handleInputFocus"
+                  @blur="handleInputBlur"
+                  @keydown="handleInputKeydown"
+                  @click.stop
+                  @mousedown.stop
                   @change="handleTypeChange(index, pIndex)"
                 >
                   <el-option label="引用" value="quote" />
@@ -108,6 +117,11 @@
                     v-model="property.name"
                     placeholder="请输入"
                     clearable
+                    @focus="handleInputFocus"
+                    @blur="handleInputBlur"
+                    @keydown="handleInputKeydown"
+                    @click.stop
+                    @mousedown.stop
                   />
                 </el-form-item>
                 <el-form-item
@@ -126,6 +140,11 @@
                     :options="quoteOptions"
                     placeholder="请选择"
                     @visible-change="visibleChange"
+                    @focus="handleInputFocus"
+                    @blur="handleInputBlur"
+                    @keydown="handleInputKeydown"
+                    @click.stop
+                    @mousedown.stop
                   />
                 </el-form-item>
               </el-form-item>
@@ -136,7 +155,14 @@
                   { required: true, message: '请输入变量名', trigger: 'blur' },
                 ]"
               >
-                <el-select v-model="property.condition">
+                <el-select
+                  v-model="property.condition"
+                  @focus="handleInputFocus"
+                  @blur="handleInputBlur"
+                  @keydown="handleInputKeydown"
+                  @click.stop
+                  @mousedown.stop
+                >
                   <el-option label="等于" value="equal" />
                   <el-option label="不等于" value="notEqualTo" />
                   <el-option label="为空" value="null" />
@@ -156,6 +182,11 @@
                 <el-select
                   v-model="property.type"
                   @change="handleTypeChange(index, pIndex)"
+                  @focus="handleInputFocus"
+                  @blur="handleInputBlur"
+                  @keydown="handleInputKeydown"
+                  @click.stop
+                  @mousedown.stop
                 >
                   <el-option label="引用" value="quote" />
                   <el-option label="输入" value="input" />
@@ -175,6 +206,11 @@
                     v-model="property.input"
                     placeholder="请输入"
                     clearable
+                    @focus="handleInputFocus"
+                    @blur="handleInputBlur"
+                    @keydown="handleInputKeydown"
+                    @click.stop
+                    @mousedown.stop
                   />
                 </el-form-item>
                 <el-form-item
@@ -193,6 +229,11 @@
                     :options="quoteOptions"
                     placeholder="请选择"
                     @visible-change="visibleChange"
+                    @focus="handleInputFocus"
+                    @blur="handleInputBlur"
+                    @keydown="handleInputKeydown"
+                    @click.stop
+                    @mousedown.stop
                   />
                 </el-form-item>
               </el-form-item>
@@ -415,6 +456,41 @@ const closePopover = () => {
   }
 }
 
+const handleInputFocus = (e) => {
+  console.log('Input focused')
+  // 阻止事件冒泡到 LogicFlow
+  e.stopPropagation()
+  e.preventDefault()
+
+  // 设置编辑状态
+  isEditing.value = true
+
+  // 延迟执行，确保事件处理完成
+  setTimeout(() => {
+    if (inputRef.value && inputRef.value.input) {
+      inputRef.value.input.focus()
+    }
+  }, 0)
+}
+
+const handleInputBlur = (e) => {
+  console.log('Input blurred')
+  // 如果正在编辑，不要立即取消编辑状态
+  if (isEditing.value) {
+    // 可以选择在失焦时自动保存或取消
+    // 这里我们选择不自动保存，让用户点击确认按钮
+  }
+}
+
+const handleInputKeydown = (e) => {
+  // 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
+  e.stopPropagation();
+  // 可选：明确放行 Ctrl+V（增强兼容性）
+  if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+    e.returnValue = true; // 允许默认粘贴行为
+  }
+}
+
 onMounted(() => {
   emits("addAnchor", 280, "".concat(props.model.id, "_else"));