@huyooo/file-explorer-frontend-react 0.4.2

package/src/components/ContextMenu.css

@@ -0,0 +1,155 @@
+/* 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-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--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-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;
+}
+

package/src/components/ContextMenu.tsx

@@ -0,0 +1,375 @@
+import { createPortal } from 'react-dom';
+import { useMemo, useEffect, useRef, useCallback, useState } from 'react';
+import { Icon } from '@iconify/react';
+import type { ContextMenuItem } from '../types';
+import './ContextMenu.css';
+
+interface ContextMenuProps {
+  visible: boolean;
+  x: number;
+  y: number;
+  options: ContextMenuItem[];
+  onClose?: () => void;
+  onSelect?: (option: ContextMenuItem) => void;
+}
+
+/** 边距常量 */
+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 标准行为：优先右侧，空间不足时左侧）
+ * @param parentRect 父菜单项的边界矩形
+ * @param submenuHeight 子菜单高度
+ * @returns 子菜单位置
+ */
+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 };
+}
+
+export function ContextMenu({
+  visible,
+  x,
+  y,
+  options,
+  onClose,
+  onSelect,
+}: ContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);
+  const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);
+  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  // 使用 useMemo 在渲染前计算位置（使用估算高度，避免位置调整动画）
+  const position = useMemo(() => {
+    const estimatedHeight = estimateMenuHeight(options);
+    return calculateMenuPosition(x, y, estimatedHeight);
+  }, [x, y, options]);
+
+  const menuStyle = useMemo(
+    () => ({
+      left: `${position.x}px`,
+      top: `${position.y}px`,
+    }),
+    [position]
+  );
+
+  // 获取当前悬停项的子菜单
+  const hoveredItem = useMemo(() => {
+    if (!hoveredItemId) return null;
+    return options.find(opt => opt.id === hoveredItemId && opt.children && opt.children.length > 0);
+  }, [hoveredItemId, options]);
+
+  // 计算子菜单位置
+  useEffect(() => {
+    if (!hoveredItemId || !hoveredItem) {
+      setSubmenuPosition(null);
+      return;
+    }
+
+    const itemEl = itemRefs.current.get(hoveredItemId);
+    if (!itemEl) {
+      setSubmenuPosition(null);
+      return;
+    }
+
+    const rect = itemEl.getBoundingClientRect();
+    const submenuHeight = estimateMenuHeight(hoveredItem.children || []);
+    const pos = calculateSubmenuPosition(rect, submenuHeight);
+    setSubmenuPosition(pos);
+  }, [hoveredItemId, hoveredItem]);
+
+  // 点击外部或按 ESC 键时关闭
+  useEffect(() => {
+    if (!visible) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      
+      // 检查是否点击在菜单内（包括主菜单和子菜单）
+      const menuContainer = document.querySelector('.context-menu-container');
+      if (menuContainer && menuContainer.contains(target)) {
+        return;
+      }
+
+      onClose?.();
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose?.();
+      }
+    };
+
+    // 使用 mousedown 来更快响应（Windows/Mac 标准行为）
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [visible, onClose]);
+
+  // 重置状态当菜单关闭时
+  useEffect(() => {
+    if (!visible) {
+      setHoveredItemId(null);
+      setSubmenuPosition(null);
+    }
+  }, [visible]);
+
+  // Iconify 图标渲染函数
+  const renderIcon = (iconName: string) => {
+    if (!iconName) return null;
+    return <Icon icon={iconName} width={16} height={16} className="context-menu-item-icon" />;
+  };
+
+  const handleOptionClick = useCallback(
+    (option: ContextMenuItem) => {
+      if (option.disabled) return;
+
+      // 如果有子菜单，不执行 action，只显示子菜单
+      if (option.children && option.children.length > 0) {
+        return;
+      }
+
+      if (option.action) {
+        option.action();
+      }
+      onSelect?.(option);
+      onClose?.();
+    },
+    [onClose, onSelect]
+  );
+
+  // 处理菜单项鼠标进入
+  const handleItemMouseEnter = useCallback((option: ContextMenuItem) => {
+    if (option.children && option.children.length > 0) {
+      setHoveredItemId(option.id);
+    } else {
+      setHoveredItemId(null);
+    }
+  }, []);
+
+  if (!visible) return null;
+
+  return createPortal(
+    <div className="context-menu-container">
+      {/* 主菜单 - 不使用 overlay，通过 document mousedown 事件来关闭菜单 */}
+      <div ref={menuRef} className="context-menu" style={menuStyle}>
+        {options.map((option, index) => {
+          if (option.separator) {
+            return <div key={index} className="context-menu-separator" />;
+          }
+
+          const hasChildren = option.children && option.children.length > 0;
+          const isHovered = hoveredItemId === option.id;
+
+          return (
+            <div
+              key={option.id || index}
+              ref={(el) => {
+                if (el) {
+                  itemRefs.current.set(option.id, el);
+                } else {
+                  itemRefs.current.delete(option.id);
+                }
+              }}
+              className={`context-menu-item ${
+                option.disabled ? 'context-menu-item--disabled' : ''
+              } ${
+                option.danger ? 'context-menu-item--danger' : ''
+              } ${
+                hasChildren ? 'context-menu-item--has-children' : ''
+              } ${
+                isHovered ? 'context-menu-item--active' : ''
+              }`}
+              onClick={() => handleOptionClick(option)}
+              onMouseEnter={() => handleItemMouseEnter(option)}
+            >
+              {option.icon && renderIcon(option.icon)}
+              <span className="context-menu-item-label">{option.label}</span>
+              {option.checked && (
+                <Icon icon="lucide:check" width={14} height={14} className="context-menu-item-check" />
+              )}
+              {option.shortcut && !hasChildren && (
+                <span className="context-menu-item-shortcut">
+                  {option.shortcut}
+                </span>
+              )}
+              {hasChildren && (
+                <Icon icon="lucide:chevron-right" width={14} height={14} className="context-menu-item-arrow" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 二级菜单（独立渲染，避免定位问题） */}
+      {hoveredItem && submenuPosition && (
+        <div
+          className="context-menu context-menu-submenu"
+          style={{
+            left: `${submenuPosition.x}px`,
+            top: `${submenuPosition.y}px`,
+          }}
+          onMouseEnter={() => setHoveredItemId(hoveredItem.id)}
+          onMouseLeave={() => setHoveredItemId(null)}
+        >
+          {hoveredItem.children!.map((child, childIndex) => {
+            if (child.separator) {
+              return <div key={`child-sep-${childIndex}`} className="context-menu-separator" />;
+            }
+
+            return (
+              <div
+                key={child.id || childIndex}
+                className={`context-menu-item ${
+                  child.disabled ? 'context-menu-item--disabled' : ''
+                } ${
+                  child.danger ? 'context-menu-item--danger' : ''
+                }`}
+                onClick={() => handleOptionClick(child)}
+              >
+                {child.icon && renderIcon(child.icon)}
+                <span className="context-menu-item-label">{child.label}</span>
+                {child.checked && (
+                  <Icon icon="lucide:check" width={14} height={14} className="context-menu-item-check" />
+                )}
+                {child.shortcut && (
+                  <span className="context-menu-item-shortcut">
+                    {child.shortcut}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>,
+    document.body
+  );
+}