修改

src/views/formula/component/formulaItem.vue

@@ -1,22 +1,28 @@
 <template>
-  <el-tag 
-    v-if="item.type === 'Element'"
-    type="info"   
-    :effect="item.selected ? 'dark' : 'plain'"
-    @click="itemClick(item)"
-    class="ellipse-tag"
-    :class="{'selected-tag': item.selected}"
-  > 
-    {{ item.name }}
-  </el-tag>
-  <span 
-    :class="getItemClass(item)" 
-    @click="itemClick(item)" 
-    v-else
-    class="element-span"
-  >
-    {{ item.name }}
-  </span>
+  <div class="inline-container">
+    <!-- 元素标签 -->
+    <el-tag 
+      v-if="item.type === 'Element'"
+      type="info"   
+      :effect="item.selected ? 'dark' : 'plain'"
+      @click="itemClick(item)"
+      class="ellipse-tag"
+      :class="{'selected-tag': item.selected}"
+    > 
+      {{ item.name }}
+    </el-tag>
+    <span 
+      :class="getItemClass(item)" 
+      @click="itemClick(item)" 
+      v-else
+      class="element-span"
+    >
+      {{ item.name }}
+    </span>
+    
+    <!-- 光标指示器 - 只在选中时显示 -->
+    <span v-if="item.selected" class="cursor-blink"></span>
+  </div>
 </template>
 
 <script>
@@ -92,5 +98,26 @@ export default {
   align-items: center;
   height: 32px;
 }
+
+// 新增样式
+.inline-container {
+  display: inline-flex;
+  align-items: center;
+}
+
+// 光标样式 - 模拟输入框闪烁效果
+.cursor-blink {
+  width: 2px;
+  height: 1.2em;
+  background-color: #333;
+  margin: 0 1px;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  from, to { background-color: transparent }
+  50% { background-color: #333 }
+}
+
 </style>
     

src/views/formula/edit.vue

@@ -113,16 +113,28 @@
                     </div>
                   </div>
       
-                  
-                <div class="border-grey sele-ele-box1"  @keydown.shift.187="handleShiftPlus" tabindex="0">
-                    <draggable v-model="selectEleFormula">
-                      <formula-item
-                        v-for="(item,index) in selectEleFormula" :key="index"
-                        :item="item" @click="obj => eleFormulaClick(obj,index)"  
-                      >
-                      </formula-item>
-                    </draggable>
-                  </div>
+               <div 
+                  class="border-grey sele-ele-box1"  
+                  @keydown.shift.187="handleShiftPlus" 
+                  tabindex="0"
+                  @keydown.left="handleLeftArrow"
+                  @keydown.right="handleRightArrow"
+                  @keydown.delete="handleDelete"
+                  @keydown.backspace="handleDelete"
+                  @focus="containerFocused = true"
+                  @blur="containerFocused = false"
+                >
+                  <draggable v-model="selectEleFormula">
+                    <formula-item
+                      v-for="(item,index) in selectEleFormula" 
+                      :key="index"
+                      :item="item" 
+                      @click="obj => eleFormulaClick(obj,index)"  
+                    >
+                    </formula-item>
+                  </draggable>
+                </div>
+            
                   <div class="flex mg-t-10" style="justify-content: space-between;width:100%;">
                     <el-select v-model="eleTableId" @change="getTableEle" placeholder="请选择元素表1" style="width:45%">
                       <el-option v-if="paramDataList.length" label="选择节点参数2" value="选择节点参数"></el-option>
@@ -499,6 +511,12 @@ export default {
       type:String,
       default:''
     }
+  },
+    mounted() {
+    // 初始时让容器获得焦点
+    this.$nextTick(() => {
+      this.$el.querySelector('.sele-ele-box1').focus();
+    });
   },
   data() {
     return {
@@ -601,6 +619,7 @@ export default {
       dataForm:'',
       remark:'',//备注
       initTableName:'',//初始表名
+      containerFocused:false,//公式编辑区域是否聚焦
 
     };
   },
@@ -1092,18 +1111,80 @@ export default {
     },
 
     //点选公式中的元素
-    eleFormulaClick({selected,item},index){
-      if(selected){
-        this.selectEleFormula.forEach((ele)=>{
-          ele.selected = false;
-        })
-        item.selected = true;
-        this.curSeleEleIndex = index;
-      }else{
-        this.curSeleEleIndex = -1;
+    // eleFormulaClick({selected,item},index){
+    //   if(selected){
+    //     this.selectEleFormula.forEach((ele)=>{
+    //       ele.selected = false;
+    //     })
+    //     item.selected = true;
+    //     this.curSeleEleIndex = index;
+    //   }else{
+    //     this.curSeleEleIndex = -1;
+    //   }
+    // },  // 点击元素时的处理
+    eleFormulaClick(obj, index) {
+      // 先取消所有选中状态
+      this.selectEleFormula.forEach(item => {
+        item.selected = false;
+      });
+      
+      // 设置当前选中项
+      obj.item.selected = obj.selected;
+      this.curSeleEleIndex = index;
+      
+      // 确保容器获得焦点以接收键盘事件
+      this.$nextTick(() => {
+        this.$el.querySelector('.sele-ele-box1').focus();
+      });
+    },
+    
+    // 左箭头导航
+    handleLeftArrow(e) {
+      e.preventDefault(); // 阻止默认行为
+      if (this.curSeleEleIndex > 0) {
+        // 取消当前选中项
+        if (this.selectEleFormula[this.curSeleEleIndex]) {
+          this.selectEleFormula[this.curSeleEleIndex].selected = false;
+        }
+        
+        // 选中左侧项
+        this.curSeleEleIndex--;
+        this.selectEleFormula[this.curSeleEleIndex].selected = true;
+      }
+    },
+    
+    // 右箭头导航
+    handleRightArrow(e) {
+      e.preventDefault(); // 阻止默认行为
+      if (this.curSeleEleIndex < this.selectEleFormula.length - 1) {
+        // 取消当前选中项
+        if (this.selectEleFormula[this.curSeleEleIndex]) {
+          this.selectEleFormula[this.curSeleEleIndex].selected = false;
+        }
+        
+        // 选中右侧项
+        this.curSeleEleIndex++;
+        this.selectEleFormula[this.curSeleEleIndex].selected = true;
+      }
+    },
+    
+    // 处理删除操作
+    handleDelete(e) {
+      e.preventDefault(); // 阻止默认行为
+      this.removeSelect();
+      
+      // 删除后自动选中下一项或上一项
+      if (this.selectEleFormula.length > 0) {
+        // 如果删除的是最后一项，选中前一项
+        if (this.curSeleEleIndex >= this.selectEleFormula.length) {
+          this.curSeleEleIndex = this.selectEleFormula.length - 1;
+        }
+        // 如果还有元素，选中当前索引位置的元素
+        if (this.curSeleEleIndex > -1) {
+          this.selectEleFormula[this.curSeleEleIndex].selected = true;
+        }
       }
     },
-
     //取消勾选
     unCheckEleFormulac(eleId){
       for (let i = 0; i < this.eleList.length; i++) {