fix: 优化组件列表多选键盘快捷键监听体验

packages/editor/src/layouts/sidebar/LayerPanel.vue

@@ -1,9 +1,6 @@
 <template>
-  <TMagicScrollbar
+  <div ref="layerPanel">
-    class="magic-editor-layer-panel"
+    <TMagicScrollbar class="magic-editor-layer-panel">
-    @mouseenter="addSelectModeListener"
-    @mouseleave="removeSelectModeListener"
-  >
       <slot name="layer-panel-header"></slot>
 
       <TMagicInput
@@ -63,10 +60,11 @@
         <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
       </Teleport>
     </TMagicScrollbar>
+  </div>
 </template>
 
 <script lang="ts" setup name="MEditorLayerPanel">
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
@@ -264,32 +262,47 @@ watch([selectedIds, tree], async () => {
   setTreeKeyStatus();
 });
 
-const keycon = ref<KeyController>();
+const layerPanel = ref<HTMLDivElement>();
-// 监听模式选择
+const mouseenterHandler = () => {
-const addSelectModeListener = () => {
+  layerPanel.value?.focus();
-  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-  const ctrl = isMac ? 'meta' : 'ctrl';
-  keycon.value = new KeyController();
-  keycon.value.keydown(ctrl, (e) => {
-    e.inputEvent.preventDefault();
-    isMultiSelectStatus.value = true;
-  });
-  // ctrl+tab切到其他窗口，需要将多选状态置为false
-  keycon.value.on('blur', () => {
-    isMultiSelectStatus.value = false;
-  });
-  keycon.value.keyup(ctrl, (e) => {
-    e.inputEvent.preventDefault();
-    isMultiSelectStatus.value = false;
-  });
 };
-// 移除监听
+
-const removeSelectModeListener = () => {
+const mouseleaveHandler = () => {
-  keycon.value?.destroy();
+  layerPanel.value?.blur();
   // 如果鼠标移出监听范围，且当前只选中了一个，置为单选模式(修复按住ctrl不放但鼠标移出的情况)
   if (selectedIds.value.length === 1) isMultiSelectStatus.value = false;
 };
 
+let keycon: KeyController;
+
+onMounted(() => {
+  layerPanel.value?.addEventListener('mouseenter', mouseenterHandler);
+  layerPanel.value?.addEventListener('mouseleave', mouseleaveHandler);
+
+  keycon = new KeyController(layerPanel.value);
+  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+  const ctrl = isMac ? 'meta' : 'ctrl';
+
+  keycon
+    .keydown(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      isMultiSelectStatus.value = true;
+    })
+    .on('blur', () => {
+      isMultiSelectStatus.value = false;
+    })
+    .keyup(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      isMultiSelectStatus.value = false;
+    });
+});
+
+onUnmounted(() => {
+  layerPanel.value?.removeEventListener('mouseenter', mouseenterHandler);
+  layerPanel.value?.removeEventListener('mouseleave', mouseleaveHandler);
+  keycon.destroy();
+});
+
 // 鼠标是否按下标志，用于高亮状态互斥
 const clicked = ref(false);
 // 高亮的节点

packages/editor/src/services/editor.ts

@@ -461,7 +461,6 @@ class Editor extends BaseService {
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
       if (isObject(srcValue) && Array.isArray(objValue)) {
         // 原来的配置是数组，新的配置是对象，则直接使用新的值
-        console.log('--srcValue-', srcValue);
         return srcValue;
       }
       if (Array.isArray(srcValue)) {