@huyooo/file-explorer-frontend-vue 0.4.2

package/src/components/ContextMenu.vue

@@ -0,0 +1,550 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="context-menu-container">
+      <!-- 主菜单 - 不使用 overlay，通过 document mousedown 事件来关闭菜单 -->
+      <div 
+        ref="menuRef"
+        class="context-menu"
+        :style="menuStyle"
+      >
+        <template v-for="(option, index) in options" :key="option.id || index">
+          <div v-if="option.separator" class="context-menu-separator" />
+          <div
+            v-else
+            :ref="(el) => setItemRef(option.id, el)"
+            :class="[
+              'context-menu-item',
+              option.disabled ? 'context-menu-item--disabled' : '',
+              option.danger ? 'context-menu-item--danger' : '',
+              hasChildren(option) ? 'context-menu-item--has-children' : '',
+              hoveredItemId === option.id ? 'context-menu-item--active' : ''
+            ]"
+            @click="handleOptionClick(option)"
+            @mouseenter="handleItemMouseEnter(option)"
+          >
+            <Icon 
+              v-if="option.icon" 
+              :icon="option.icon" 
+              width="16" 
+              height="16" 
+              class="context-menu-item-icon" 
+            />
+            <span class="context-menu-item-label">{{ option.label }}</span>
+            <Icon 
+              v-if="option.checked" 
+              icon="lucide:check" 
+              width="14" 
+              height="14" 
+              class="context-menu-item-check" 
+            />
+            <span v-if="option.shortcut && !hasChildren(option)" class="context-menu-item-shortcut">
+              {{ option.shortcut }}
+            </span>
+            <Icon 
+              v-if="hasChildren(option)"
+              icon="lucide:chevron-right" 
+              width="14" 
+              height="14" 
+              class="context-menu-item-arrow" 
+            />
+          </div>
+        </template>
+      </div>
+      
+      <!-- 二级菜单（独立渲染，避免定位问题） -->
+      <div
+        v-if="hoveredItem && submenuPosition"
+        class="context-menu context-menu-submenu"
+        :style="submenuStyle"
+        @mouseenter="keepSubmenuOpen"
+        @mouseleave="closeSubmenu"
+      >
+        <template v-for="(child, childIndex) in hoveredItem.children" :key="child.id || childIndex">
+          <div v-if="child.separator" class="context-menu-separator" />
+          <div
+            v-else
+            :class="[
+              'context-menu-item',
+              child.disabled ? 'context-menu-item--disabled' : '',
+              child.danger ? 'context-menu-item--danger' : ''
+            ]"
+            @click="handleOptionClick(child)"
+          >
+            <Icon 
+              v-if="child.icon" 
+              :icon="child.icon" 
+              width="16" 
+              height="16" 
+              class="context-menu-item-icon" 
+            />
+            <span class="context-menu-item-label">{{ child.label }}</span>
+            <Icon 
+              v-if="child.checked" 
+              icon="lucide:check" 
+              width="14" 
+              height="14" 
+              class="context-menu-item-check" 
+            />
+            <span v-if="child.shortcut" class="context-menu-item-shortcut">
+              {{ child.shortcut }}
+            </span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import type { ContextMenuItem } from '../types';
+
+interface Props {
+  visible: boolean;
+  x: number;
+  y: number;
+  options: ContextMenuItem[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  close: [];
+  select: [option: ContextMenuItem];
+}>();
+
+/** 边距常量 */
+const MARGIN = 8;
+/** 菜单固定宽度 */
+const MENU_WIDTH = 220;
+/** 菜单项高度 */
+const MENU_ITEM_HEIGHT = 32;
+/** 分隔线高度 */
+const SEPARATOR_HEIGHT = 9;
+/** 菜单内边距 */
+const MENU_PADDING = 8;
+/** 子菜单与父菜单的间距 */
+const SUBMENU_GAP = 0;
+
+/**
+ * 估算菜单高度（根据菜单项数量）
+ */
+function estimateMenuHeight(items: ContextMenuItem[]): number {
+  let height = MENU_PADDING;
+  for (const item of items) {
+    height += item.separator ? SEPARATOR_HEIGHT : MENU_ITEM_HEIGHT;
+  }
+  return height;
+}
+
+/**
+ * 计算自适应菜单位置
+ * 使用固定宽度，只需测量高度，简化计算逻辑
+ */
+function calculateMenuPosition(
+  clickX: number,
+  clickY: number,
+  menuHeight: number
+): { x: number; y: number } {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  let adjustedX = clickX;
+  let adjustedY = clickY;
+
+  // 水平方向调整（使用固定宽度）
+  const spaceRight = viewportWidth - clickX;
+  const spaceLeft = clickX;
+
+  // 如果右边空间不足，尝试在左边显示
+  if (spaceRight < MENU_WIDTH + MARGIN) {
+    // 左边空间足够，在左边显示
+    if (spaceLeft >= MENU_WIDTH + MARGIN) {
+      adjustedX = clickX - MENU_WIDTH;
+    } else {
+      // 左右空间都不足，选择空间更大的一边，并留出边距
+      if (spaceRight > spaceLeft) {
+        adjustedX = viewportWidth - MENU_WIDTH - MARGIN;
+      } else {
+        adjustedX = MARGIN;
+      }
+    }
+  }
+
+  // 垂直方向调整
+  const spaceBottom = viewportHeight - clickY;
+  const spaceTop = clickY;
+
+  // 如果下边空间不足，尝试在上边显示
+  if (spaceBottom < menuHeight + MARGIN) {
+    // 上边空间足够，在上边显示
+    if (spaceTop >= menuHeight + MARGIN) {
+      adjustedY = clickY - menuHeight;
+    } else {
+      // 上下空间都不足，选择空间更大的一边，并留出边距
+      if (spaceBottom > spaceTop) {
+        adjustedY = viewportHeight - menuHeight - MARGIN;
+      } else {
+        adjustedY = MARGIN;
+      }
+    }
+  }
+
+  // 最终边界检查，确保不会超出视口
+  adjustedX = Math.max(MARGIN, Math.min(adjustedX, viewportWidth - MENU_WIDTH - MARGIN));
+  adjustedY = Math.max(MARGIN, Math.min(adjustedY, viewportHeight - menuHeight - MARGIN));
+
+  return { x: adjustedX, y: adjustedY };
+}
+
+/**
+ * 计算二级菜单位置（Windows/Mac 标准行为：优先右侧，空间不足时左侧）
+ */
+function calculateSubmenuPosition(
+  parentRect: DOMRect,
+  submenuHeight: number
+): { x: number; y: number } {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  // 计算可用空间
+  const spaceRight = viewportWidth - parentRect.right;
+  const spaceLeft = parentRect.left;
+
+  let submenuX: number;
+  let submenuY: number;
+
+  // 水平方向：优先右侧，空间不足时左侧（Windows/Mac 标准行为）
+  if (spaceRight >= MENU_WIDTH + SUBMENU_GAP + MARGIN) {
+    // 右侧有足够空间，在右侧显示（紧贴父菜单右边缘）
+    submenuX = parentRect.right + SUBMENU_GAP;
+  } else if (spaceLeft >= MENU_WIDTH + SUBMENU_GAP + MARGIN) {
+    // 右侧空间不足，左侧有足够空间，在左侧显示（紧贴父菜单左边缘）
+    submenuX = parentRect.left - MENU_WIDTH - SUBMENU_GAP;
+  } else {
+    // 左右空间都不足，选择空间更大的一边
+    if (spaceRight > spaceLeft) {
+      submenuX = viewportWidth - MENU_WIDTH - MARGIN;
+    } else {
+      submenuX = MARGIN;
+    }
+  }
+
+  // 垂直方向：与父菜单项顶部对齐（Windows/Mac 标准行为）
+  submenuY = parentRect.top;
+
+  // 如果子菜单底部超出视口，向上调整
+  if (submenuY + submenuHeight > viewportHeight - MARGIN) {
+    submenuY = viewportHeight - submenuHeight - MARGIN;
+  }
+
+  // 如果子菜单顶部超出视口，向下调整
+  if (submenuY < MARGIN) {
+    submenuY = MARGIN;
+  }
+
+  return { x: submenuX, y: submenuY };
+}
+
+const menuRef = ref<HTMLDivElement | null>(null);
+const hoveredItemId = ref<string | null>(null);
+const submenuPosition = ref<{ x: number; y: number } | null>(null);
+const itemRefs = ref<Map<string, HTMLElement>>(new Map());
+
+// 使用 computed 在渲染前计算位置（使用估算高度，避免位置调整动画）
+const position = computed(() => {
+  const estimatedHeight = estimateMenuHeight(props.options);
+  return calculateMenuPosition(props.x, props.y, estimatedHeight);
+});
+
+const menuStyle = computed(() => ({
+  left: `${position.value.x}px`,
+  top: `${position.value.y}px`
+}));
+
+const submenuStyle = computed(() => {
+  if (!submenuPosition.value) return {};
+  return {
+    left: `${submenuPosition.value.x}px`,
+    top: `${submenuPosition.value.y}px`
+  };
+});
+
+// 获取当前悬停项的子菜单
+const hoveredItem = computed(() => {
+  if (!hoveredItemId.value) return null;
+  return props.options.find(opt => opt.id === hoveredItemId.value && opt.children && opt.children.length > 0);
+});
+
+// 设置菜单项 ref
+const setItemRef = (id: string, el: unknown) => {
+  if (el && el instanceof HTMLElement) {
+    itemRefs.value.set(id, el);
+  } else {
+    itemRefs.value.delete(id);
+  }
+};
+
+// 检查是否有子菜单
+const hasChildren = (option: ContextMenuItem) => {
+  return option.children && option.children.length > 0;
+};
+
+// 计算子菜单位置
+watch(hoveredItemId, (newId) => {
+  if (!newId || !hoveredItem.value) {
+    submenuPosition.value = null;
+    return;
+  }
+
+  nextTick(() => {
+    const itemEl = itemRefs.value.get(newId);
+    if (!itemEl || !hoveredItem.value?.children) {
+      submenuPosition.value = null;
+      return;
+    }
+
+    const rect = itemEl.getBoundingClientRect();
+    const submenuHeight = estimateMenuHeight(hoveredItem.value.children);
+    submenuPosition.value = calculateSubmenuPosition(rect, submenuHeight);
+  });
+});
+
+// 重置状态当菜单关闭时
+watch(() => props.visible, (visible) => {
+  if (!visible) {
+    hoveredItemId.value = null;
+    submenuPosition.value = null;
+  }
+});
+
+// 点击外部或按 ESC 键时关闭（事件处理函数定义在外部，确保引用一致）
+const handleClickOutside = (e: MouseEvent) => {
+  const target = e.target as Node;
+  
+  // 检查是否点击在菜单内（包括主菜单和子菜单）
+  const menuContainer = document.querySelector('.context-menu-container');
+  if (menuContainer && menuContainer.contains(target)) {
+    return;
+  }
+
+  emit('close');
+};
+
+const handleEscape = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    emit('close');
+  }
+};
+
+// 监听 visible 变化，添加/移除事件监听器
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    // 使用 mousedown 来更快响应（Windows/Mac 标准行为）
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+  } else {
+    document.removeEventListener('mousedown', handleClickOutside);
+    document.removeEventListener('keydown', handleEscape);
+  }
+}, { immediate: true });
+
+// 组件卸载时移除事件监听器
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside);
+  document.removeEventListener('keydown', handleEscape);
+});
+
+
+const handleOptionClick = (option: ContextMenuItem) => {
+  if (option.disabled) return;
+  
+  // 如果有子菜单，不执行 action，只显示子菜单
+  if (option.children && option.children.length > 0) {
+    return;
+  }
+  
+  if (option.action) {
+    option.action();
+  }
+  emit('select', option);
+  emit('close');
+};
+
+// 处理菜单项鼠标进入
+const handleItemMouseEnter = (option: ContextMenuItem) => {
+  if (option.children && option.children.length > 0) {
+    hoveredItemId.value = option.id;
+  } else {
+    hoveredItemId.value = null;
+  }
+};
+
+// 保持子菜单打开
+const keepSubmenuOpen = () => {
+  // 当鼠标在子菜单上时，保持 hoveredItemId 不变
+};
+
+// 关闭子菜单
+const closeSubmenu = () => {
+  hoveredItemId.value = null;
+};
+</script>
+
+<style scoped>
+/* container 不拦截事件，让右键事件可以穿透到下层文件列表 */
+.context-menu-container {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.context-menu {
+  position: fixed;
+  z-index: 10000;
+  width: 220px; /* 固定宽度，与 calculateMenuPosition 中的 MENU_WIDTH 一致 */
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(24px);
+  border: 1px solid rgba(229, 231, 233, 0.5);
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+  padding: 0.25rem 0;
+  font-size: 0.875rem;
+  user-select: none;
+  animation: fade-in 100ms ease-out, zoom-in 100ms ease-out;
+  pointer-events: auto;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes zoom-in {
+  from { transform: scale(0.95); }
+  to { transform: scale(1); }
+}
+
+.context-menu-item {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 1rem;
+  color: rgb(55, 65, 81);
+  transition: all 200ms;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.context-menu-item:hover {
+  background: rgb(59, 130, 246);
+  color: white;
+}
+
+.context-menu-item:hover .context-menu-item-icon {
+  color: white;
+}
+
+.context-menu-item:hover .context-menu-item-shortcut {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.context-menu-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.context-menu-item--disabled:hover {
+  background: transparent;
+  color: rgb(55, 65, 81);
+}
+
+.context-menu-item--disabled:hover .context-menu-item-icon {
+  color: rgb(107, 114, 128);
+}
+
+.context-menu-item--danger {
+  color: rgb(220, 38, 38);
+}
+
+.context-menu-item--danger:hover {
+  background: rgb(220, 38, 38);
+  color: white;
+}
+
+.context-menu-item--danger .context-menu-item-icon {
+  color: rgb(220, 38, 38);
+}
+
+.context-menu-item--danger:hover .context-menu-item-icon {
+  color: white;
+}
+
+.context-menu-item--has-children {
+  position: relative;
+}
+
+.context-menu-item--active {
+  background: rgb(59, 130, 246);
+  color: white;
+}
+
+.context-menu-item--active .context-menu-item-icon {
+  color: white;
+}
+
+.context-menu-item--active .context-menu-item-shortcut {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.context-menu-item-icon {
+  color: rgb(107, 114, 128);
+  flex-shrink: 0;
+}
+
+.context-menu-item-label {
+  flex: 1;
+}
+
+.context-menu-item-shortcut {
+  color: rgb(156, 163, 175);
+  font-size: 0.6875rem;
+}
+
+.context-menu-separator {
+  height: 1px;
+  background: rgb(229, 231, 233);
+  margin: 0.25rem 0.5rem;
+}
+
+.context-menu-item-check {
+  color: rgb(107, 114, 128);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.context-menu-item:hover .context-menu-item-check,
+.context-menu-item--active .context-menu-item-check {
+  color: white;
+}
+
+.context-menu-item-arrow {
+  color: rgb(156, 163, 175);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.context-menu-item:hover .context-menu-item-arrow,
+.context-menu-item--active .context-menu-item-arrow {
+  color: white;
+}
+
+.context-menu-submenu {
+  z-index: 10001;
+}
+</style>