fix(editor,stage): 优化悬停出现组件列表的交互体验

packages/editor/src/components/ToolButton.vue

@@ -16,7 +16,7 @@
           ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
         >
       </TMagicTooltip>
-      <TMagicButton v-else size="small" text :disabled="disabled"
+      <TMagicButton v-else size="small" text :disabled="disabled" :title="data.text"
         ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
       >
     </template>

packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -1,6 +1,8 @@
 <template>
-  <content-menu
+  <ContentMenu
     ref="menu"
+    class="magic-editor-node-list-menu"
+    style="max-width: 280px"
     :menu-data="menuData"
     :active="node?.id"
     :auto-hide="!pinned"
@@ -9,7 +11,7 @@
     <template #title>
       <NodeListMenuTitle v-model:pinned="pinned" @change="dragMenuHandler" @close="closeHandler"></NodeListMenuTitle>
     </template>
-  </content-menu>
+  </ContentMenu>
 </template>
 
 <script lang="ts" setup>
@@ -53,6 +55,14 @@ const cancel = () => {
   menu.value?.hide();
 };
 
+const clearTimeoutLazy = () => {
+  globalThis.setTimeout(() => {
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+    }
+  }, 300);
+};
+
 const unWatch = watch(
   stage,
   (stage) => {
@@ -90,7 +100,8 @@ const unWatch = watch(
     });
 
     stage.on('mouseleave', () => {
-      cancel();
+      // mouseleave后，大概率还有最后一个mousemove事件，这里延迟清除
+      clearTimeoutLazy();
     });
 
     unWatch();
@@ -135,11 +146,7 @@ const menuData = computed<MenuButton[]>(() =>
 
 const mouseenterHandler = () => {
   // menu的mouseenter后，大概率还有最后一个mousemove事件，这里延迟清除
-  globalThis.setTimeout(() => {
-    if (timeout) {
-      globalThis.clearTimeout(timeout);
-    }
-  }, 300);
+  clearTimeoutLazy();
 };
 
 const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {

packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <content-menu :menu-data="menuData" ref="menu"></content-menu>
+  <ContentMenu :menu-data="menuData" ref="menu"></ContentMenu>
 </template>
 
 <script lang="ts" setup>

packages/stage/src/ActionManager.ts

@@ -567,8 +567,9 @@ export default class ActionManager extends EventEmitter {
     }
   };
 
-  private mouseLeaveHandler = () => {
+  private mouseLeaveHandler = (event: MouseEvent) => {
     setTimeout(() => this.clearHighlight(), throttleTime);
+    this.emit('mouseleave', event);
   };
 
   private mouseWheelHandler = () => {

packages/stage/src/StageCore.ts

@@ -367,10 +367,10 @@ export default class StageCore extends EventEmitter {
    */
   private initMouseEvent(): void {
     this.actionManager
-      .on('mousemove', async (event: MouseEvent) => {
+      .on('mousemove', (event: MouseEvent) => {
         this.emit('mousemove', event);
       })
-      .on('mouseleave', async (event: MouseEvent) => {
+      .on('mouseleave', (event: MouseEvent) => {
         this.emit('mouseleave', event);
       })
       .on('drag-start', (e: OnDragStart) => {