增强菜单交互体验，添加键盘导航支持和过渡效果，优化样式和事件处理逻辑

src/App.vue

@@ -51,29 +51,80 @@ const showContextMenu = (data) => {
   handleSelect(item)
   // 显示菜单
   showMenu.value = true
-  listFrozen.value = true  // 冻结列表
+  listFrozen.value = true // 冻结列表
 }
 
 // 修改关闭菜单的处理
 const closeMenu = () => {
   showMenu.value = false
-  listFrozen.value = false  // 解冻列表
+  listFrozen.value = false
+  selectedMenuIndex.value = -1 // 重置菜单选中项
+}
+
+// 添加当前选中的菜单项索引
+const selectedMenuIndex = ref(-1)
+
+// 修改键盘事件处理函数
+const handleKeyDown = (e) => {
+  if (e.key === 'ArrowRight' && !showMenu.value && selectedItem.value) {
+    e.preventDefault()
+    handleMenuTriggerClick(e)
+  } else if (e.key === 'ArrowLeft' && showMenu.value) {
+    e.preventDefault()
+    showMenu.value = false
+    listFrozen.value = false
+    selectedMenuIndex.value = -1 // 重置菜单选中项
+  } else if (e.key === 'Escape') {
+    // ESC 键只在菜单打开时响应
+    if (showMenu.value) {
+      e.preventDefault()
+      closeMenu()
+    }
+  } else if (showMenu.value) {
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault()
+        selectedMenuIndex.value =
+          selectedMenuIndex.value <= 0
+            ? menuItems.length - 1
+            : selectedMenuIndex.value - 1
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        selectedMenuIndex.value =
+          selectedMenuIndex.value >= menuItems.length - 1
+            ? 0
+            : selectedMenuIndex.value + 1
+        break
+      case 'Enter':
+        e.preventDefault()
+        if (selectedMenuIndex.value >= 0) {
+          handleMenuClick(menuItems[selectedMenuIndex.value])
+          selectedMenuIndex.value = -1 // 重置菜单选中项
+        }
+        break
+    }
+  }
 }
 
 onMounted(() => {
   // 添加全局点击事件来关闭菜单
   document.addEventListener('click', closeMenu)
+  // 添加键盘事件监听
+  document.addEventListener('keydown', handleKeyDown)
 })
 
 onBeforeUnmount(() => {
   document.removeEventListener('click', closeMenu)
+  // 移除键盘事件监听
+  document.removeEventListener('keydown', handleKeyDown)
 })
 
-// 修改菜单点击处理
+// 修改菜单击处理
 const handleMenuClick = (item) => {
   console.log('Menu clicked:', item)
   showMenu.value = false
-  listFrozen.value = false  // 解冻列表
+  listFrozen.value = false // 解冻列表
 }
 
 // 修改菜单触发器点击处理
@@ -82,19 +133,30 @@ const handleMenuTriggerClick = (e) => {
   // 切换菜单显示状态
   if (showMenu.value) {
     showMenu.value = false
-    listFrozen.value = false  // 解冻列表
+    listFrozen.value = false // 解冻列表
   } else {
-    // 如果<EFBFBD><EFBFBD><EFBFBD>有选中项，选中第一个可见项
+    // 如果有选中项，选中第一个可见项
     if (listData.length > 0) {
       // 如果已有选中项就保持当前选中，否则选中第一项
       const itemToSelect = selectedItem.value || listData[0]
       showContextMenu({ item: itemToSelect })
     } else {
       showMenu.value = true
-      listFrozen.value = true  // 冻结列表
+      listFrozen.value = true // 冻结列表
     }
   }
 }
+
+// 添加过渡钩子函数
+const onBeforeLeave = (el) => {
+  // 确保元素在离开过渡开始时可见
+  el.style.display = 'block'
+}
+
+const onAfterLeave = (el) => {
+  // 过渡结束后重置样式
+  el.style.display = ''
+}
 </script>
 
 <template>
@@ -111,41 +173,41 @@ const handleMenuTriggerClick = (e) => {
     </div>
     <div class="toolbar">
       <div class="toolbar-content">
-        <div class="total-count">
-          共 {{ listData.length }} 项
-        </div>
+        <div class="total-count">共 {{ listData.length }} 项</div>
         <div class="toolbar-spacer"></div>
         <div
           class="menu-trigger"
-          :class="{ 'active': showMenu }"
+          :class="{ active: showMenu }"
           @click="handleMenuTriggerClick"
         >
           <svg viewBox="0 0 24 24" width="16" height="16">
-            <circle cx="12" cy="6" r="2" fill="currentColor"/>
-            <circle cx="12" cy="12" r="2" fill="currentColor"/>
-            <circle cx="12" cy="18" r="2" fill="currentColor"/>
+            <circle cx="12" cy="6" r="2" fill="currentColor" />
+            <circle cx="12" cy="12" r="2" fill="currentColor" />
+            <circle cx="12" cy="18" r="2" fill="currentColor" />
           </svg>
-          <!-- 弹出菜单 -->
-          <div 
-            v-if="showMenu" 
-            class="popup-menu"
-            @click.stop
+          <!-- 使用 transition 组件包裹菜单 -->
+          <transition 
+            name="menu"
+            @before-leave="onBeforeLeave"
+            @after-leave="onAfterLeave"
           >
-            <!-- 添加选中项信息区域 -->
-            <div v-if="selectedItem" class="selected-item-info">
-              <div class="selected-item-name">{{ selectedItem.name }}</div>
-              <div class="selected-item-path">{{ selectedItem.path }}</div>
+            <div v-if="showMenu" class="popup-menu" @click.stop>
+              <div v-if="selectedItem" class="selected-item-info">
+                <div class="selected-item-name">{{ selectedItem.name }}</div>
+                <div class="selected-item-path">{{ selectedItem.path }}</div>
+              </div>
+              <div class="menu-divider"></div>
+              <div
+                v-for="(item, index) in menuItems"
+                :key="item.id"
+                class="menu-item"
+                :class="{ 'menu-item-selected': index === selectedMenuIndex }"
+                @click="handleMenuClick(item)"
+              >
+                {{ item.label }}
+              </div>
             </div>
-            <div class="menu-divider"></div>
-            <div
-              v-for="item in menuItems"
-              :key="item.id"
-              class="menu-item"
-              @click="handleMenuClick(item)"
-            >
-              {{ item.label }}
-            </div>
-          </div>
+          </transition>
         </div>
       </div>
     </div>
@@ -153,7 +215,8 @@ const handleMenuTriggerClick = (e) => {
 </template>
 
 <style>
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   height: 100%;
@@ -228,58 +291,78 @@ html, body {
   position: absolute;
   bottom: 100%;
   right: 0;
-  margin-bottom: 8px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  min-width: 240px;
-  padding: 6px 0;
+  margin-bottom: 23px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08),
+              0 2px 8px rgba(0, 0, 0, 0.04);
+  min-width: 260px;
+  padding: 8px 0;
   z-index: 1000;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  backdrop-filter: blur(8px);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(12px);
+  transform-origin: top right;
+}
+
+/* 添加 transition 相关样式 */
+.menu-enter-active,
+.menu-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.menu-enter-to,
+.menu-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.06);
+  margin: 6px 0;
 }
 
 .menu-item {
-  padding: 9px 16px;
+  padding: 10px 16px;
   margin: 0 4px;
   font-size: 13px;
   color: #333;
   cursor: pointer;
   transition: all 0.2s ease;
-  border-radius: 6px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
+  font-weight: 500;
 }
 
-.menu-item:hover {
-  background-color: #f5f5f5;
-  color: #1a1a1a;
+.menu-item:hover, .menu-item-selected {
+  background-color: rgba(79, 70, 229, 0.06);
+  color: #4f46e5;
 }
 
 .selected-item-info {
   padding: 12px 16px;
-  background-color: #f8f8f8;
   margin: 0 4px 4px 4px;
-  border-radius: 6px;
+  border-radius: 8px;
 }
 
 .selected-item-name {
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   color: #1a1a1a;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 
 .selected-item-path {
   font-size: 12px;
   color: #666;
   word-break: break-all;
-  line-height: 1.4;
-}
-
-.menu-divider {
-  height: 1px;
-  background-color: #f0f0f0;
-  margin: 4px 0;
+  line-height: 1.5;
 }
 </style>