fix: 在tree上增加tabindex来监听focus事件,完善组件树多选体验

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

@@ -1,5 +1,4 @@
 <template>
-  <div ref="layerPanel" style="height: 100%">
   <TMagicScrollbar class="magic-editor-layer-panel">
     <slot name="layer-panel-header"></slot>
 
@@ -15,6 +14,7 @@
 
     <TMagicTree
       v-if="values.length"
+      tabindex="-1"
       class="magic-editor-layer-tree"
       ref="tree"
       node-key="id"
@@ -40,6 +40,8 @@
       @check="multiClickHandler"
       @mousedown="toggleClickFlag"
       @mouseup="toggleClickFlag"
+      @mouseenter="mouseenterHandler"
+      @mouseleave="mouseleaveHandler"
     >
       <template #default="{ node, data }">
         <div
@@ -61,7 +63,6 @@
       <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
     </Teleport>
   </TMagicScrollbar>
-  </div>
 </template>
 
 <script lang="ts" setup name="MEditorLayerPanel">
@@ -263,24 +264,19 @@ watch([selectedIds, tree], async () => {
   setTreeKeyStatus();
 });
 
-const layerPanel = ref<HTMLDivElement>();
 const mouseenterHandler = () => {
-  layerPanel.value?.focus();
+  tree.value?.$el.focus();
 };
 
 const mouseleaveHandler = () => {
-  layerPanel.value?.blur();
+  tree.value?.$el.blur();
-  // 如果鼠标移出监听范围，且当前只选中了一个，置为单选模式(修复按住ctrl不放但鼠标移出的情况)
+  isMultiSelectStatus.value = false;
-  if (selectedIds.value.length === 1) isMultiSelectStatus.value = false;
 };
 
 let keycon: KeyController;
 
 onMounted(() => {
-  layerPanel.value?.addEventListener('mouseenter', mouseenterHandler);
+  keycon = new KeyController(tree.value?.$el);
-  layerPanel.value?.addEventListener('mouseleave', mouseleaveHandler);
-
-  keycon = new KeyController(layerPanel.value);
   const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
   const ctrl = isMac ? 'meta' : 'ctrl';
 
@@ -289,9 +285,6 @@ onMounted(() => {
       e.inputEvent.preventDefault();
       isMultiSelectStatus.value = true;
     })
-    .on('blur', () => {
-      isMultiSelectStatus.value = false;
-    })
     .keyup(ctrl, (e) => {
       e.inputEvent.preventDefault();
       isMultiSelectStatus.value = false;
@@ -299,8 +292,6 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  layerPanel.value?.removeEventListener('mouseenter', mouseenterHandler);
-  layerPanel.value?.removeEventListener('mouseleave', mouseleaveHandler);
   keycon.destroy();
 });