1. Excel交互组件封装

apps/web-antd/src/components/context-menu/global-context-menu.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
+import { nextTick } from 'vue';
+
 import type { ContextMenuItem } from './types';
 import MIcon from '#/components/icon/icon.vue';
 import {
   contextMenuState,
   getSubmenuPosition,
   hideContextMenu,
-  MENU_ITEM_HEIGHT,
   MENU_WIDTH,
   showSubmenu,
   submenuState,
@@ -14,6 +15,10 @@ import {
 defineOptions({ name: 'GlobalContextMenu' });
 
 function onItemEnter(item: ContextMenuItem, e: MouseEvent) {
+  if (item.type === 'divider') {
+    showSubmenu('', [], 0, 0);
+    return;
+  }
   if (!item.children?.length || item.disabled) {
     showSubmenu('', [], 0, 0);
     return;
@@ -29,16 +34,22 @@ function handleClick(item: ContextMenuItem) {
   if (item.disabled || item.children?.length) {
     return;
   }
-  item.handler?.(contextMenuState.payload);
+  const payload = contextMenuState.payload;
   hideContextMenu();
+  void nextTick(() => {
+    item.handler?.(payload);
+  });
 }
 
 function handleSubmenuClick(item: ContextMenuItem) {
   if (item.disabled) {
     return;
   }
-  item.handler?.(contextMenuState.payload);
+  const payload = contextMenuState.payload;
   hideContextMenu();
+  void nextTick(() => {
+    item.handler?.(payload);
+  });
 }
 </script>
 
@@ -50,21 +61,23 @@ function handleSubmenuClick(item: ContextMenuItem) {
       :style="{ left: `${contextMenuState.x}px`, top: `${contextMenuState.y}px`, width: `${MENU_WIDTH}px` }"
       @contextmenu.prevent
     >
-      <div
-        v-for="item in contextMenuState.items"
-        :key="item.key"
-        class="context-menu-item"
-        :class="{ disabled: item.disabled, 'has-children': !!item.children?.length }"
-        @click.stop="handleClick(item)"
-        @mouseenter="onItemEnter(item, $event)"
-      >
-        <span class="item-icon">
-          <component :is="item.icon" v-if="item.icon" />
-          <MIcon v-else-if="item.iconName" :icon="item.iconName" size="14" />
-        </span>
-        <span class="item-label">{{ item.label }}</span>
-        <span v-if="item.children?.length" class="item-arrow">›</span>
-      </div>
+      <template v-for="item in contextMenuState.items" :key="item.key">
+        <div v-if="item.type === 'divider'" class="context-menu-divider" />
+        <div
+          v-else
+          class="context-menu-item"
+          :class="{ disabled: item.disabled, 'has-children': !!item.children?.length }"
+          @click.stop="handleClick(item)"
+          @mouseenter="onItemEnter(item, $event)"
+        >
+          <span class="item-icon">
+            <component :is="item.icon" v-if="item.icon" />
+            <MIcon v-else-if="item.iconName" :icon="item.iconName" size="14" />
+          </span>
+          <span class="item-label">{{ item.label }}</span>
+          <span v-if="item.children?.length" class="item-arrow">›</span>
+        </div>
+      </template>
     </div>
 
     <div
@@ -148,6 +161,12 @@ function handleSubmenuClick(item: ContextMenuItem) {
   font-size: 14px;
 }
 
+.context-menu-divider {
+  height: 1px;
+  margin: 4px 8px;
+  background: #e5e6eb;
+}
+
 .dark {
   .global-context-menu {
     background: #1f2937;
@@ -162,5 +181,9 @@ function handleSubmenuClick(item: ContextMenuItem) {
       color: #93c5fd;
     }
   }
+
+  .context-menu-divider {
+    background: #374151;
+  }
 }
 </style>