@huyooo/file-explorer-frontend-react 0.4.18 → 0.4.21

package/src/components/ContextMenu.tsx

@@ -1,375 +0,0 @@
-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
-  );
-}

package/src/components/FileGrid.css

@@ -1,239 +0,0 @@
-/**
- * FileGrid - 网格视图样式
- * 参考 macOS Finder 和 Windows Explorer 的设计
- */
-
-.file-grid {
-  display: grid;
-  /* macOS Finder 默认约 90-100px */
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  gap: 6px;
-  padding: 12px;
-  align-content: start;
-  grid-auto-rows: min-content;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-/* 网格项 - 更紧凑的布局 */
-.file-grid-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 4px;
-  border-radius: 6px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: background-color 120ms ease, border-color 120ms ease;
-  position: relative;
-  overflow: hidden;
-  min-width: 0;
-  width: 100%;
-}
-
-/* 拖拽时的鼠标样式 */
-.file-grid-item[draggable="true"] {
-  cursor: grab;
-}
-
-.file-grid-item:active {
-  cursor: grabbing;
-}
-
-/* 悬停效果 - 类似 macOS */
-.file-grid-item--normal:hover {
-  background: var(--huyooo-muted-hover);
-}
-
-/* 选中状态 - macOS 风格的蓝色高亮 */
-.file-grid-item--selected {
-  background: var(--huyooo-focus-ring);
-  border-color: var(--huyooo-primary);
-}
-
-.file-grid-item--selected:hover {
-  background: var(--huyooo-focus-ring);
-}
-
-/* 拖拽悬停 */
-.file-grid-item--drag-over {
-  background: var(--huyooo-focus-ring);
-  border-color: var(--huyooo-primary);
-}
-
-/* 图标/缩略图容器 - 统一尺寸 */
-.file-grid-item-icon {
-  position: relative;
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* 统一 48x48 尺寸，更紧凑 */
-  width: 48px;
-  height: 48px;
-  flex-shrink: 0;
-}
-
-/* 缩略图样式 - 统一尺寸和圆角 */
-/* 缩略图保持原图比例，使用 object-fit: cover 填充固定尺寸容器 */
-.file-grid-item-thumbnail {
-  width: 48px;
-  height: 48px;
-  object-fit: cover;
-  object-position: center;
-  border-radius: 4px;
-  /* 轻微阴影增加层次感 */
-  box-shadow: var(--huyooo-shadow-sm);
-  background: var(--huyooo-muted);
-  /* 确保图片能作为加载占位符，平滑过渡到原图 */
-  display: block;
-}
-
-/* 应用程序图标 - 无背景 */
-.file-grid-item-thumbnail--application {
-  object-fit: contain;
-  background: transparent;
-  box-shadow: none;
-  border-radius: 10px;
-}
-
-.file-grid-item-thumbnail--selected {
-  box-shadow: 0 0 0 2px var(--huyooo-primary), 0 0 0 6px var(--huyooo-focus-ring);
-}
-
-/* 视频缩略图容器 */
-.file-grid-item-thumbnail--video {
-  position: relative;
-  border-radius: 4px;
-  overflow: hidden;
-  background: var(--huyooo-overlay-strong);
-  width: 48px;
-  height: 48px;
-  box-shadow: var(--huyooo-shadow-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* 视频缩略图内的图片 - 保持比例，填充容器 */
-.file-grid-item-thumbnail--video > img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  display: block;
-}
-
-/* 视频播放图标 */
-.file-grid-item-video-play {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  opacity: 0.9;
-  transition: opacity 150ms;
-}
-
-.file-grid-item-thumbnail--video:hover .file-grid-item-video-play {
-  opacity: 0;
-}
-
-.file-grid-item-video-play-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--huyooo-overlay);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.file-grid-item-video-play-icon::before {
-  content: "";
-  width: 0;
-  height: 0;
-  border-top: 4px solid transparent;
-  border-left: 7px solid white;
-  border-bottom: 4px solid transparent;
-  margin-left: 2px;
-}
-
-/* 文件名容器 */
-.file-grid-item-name-wrapper {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-  min-height: 0;
-}
-
-/* 文件名 - macOS 风格，最多2行，保留扩展名 */
-.file-grid-item-name {
-  font-size: 12px;
-  line-height: 1.3;
-  text-align: center;
-  padding: 2px;
-  border-radius: 3px;
-  user-select: none;
-  cursor: default;
-  transition: color 100ms;
-  color: var(--huyooo-text);
-  width: 100%;
-  /* 使用 flexbox 布局，让扩展名始终显示 */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  min-height: 0;
-}
-
-/* 文件名主体部分 - 可换行，最多1行 */
-.file-grid-item-name-base {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  word-break: break-word;
-  text-overflow: ellipsis;
-  width: 100%;
-  text-align: center;
-}
-
-/* 无扩展名：文件名允许两行（总高度仍控制在两行内） */
-.file-grid-item-name-base--two-lines {
-  -webkit-line-clamp: 2;
-}
-
-/* 扩展名部分 - 始终显示，不换行 */
-.file-grid-item-name-ext {
-  display: block;
-  white-space: nowrap;
-  flex-shrink: 0;
-  text-align: center;
-}
-
-/* 选中后点击文件名可编辑 */
-.file-grid-item-name--selected {
-  cursor: text;
-}
-
-/* 重命名输入框 */
-.file-grid-item-rename-input {
-  width: 100%;
-  font-size: 11px;
-  line-height: 1.3;
-  text-align: center;
-  padding: 2px 4px;
-  border: 1px solid var(--huyooo-primary);
-  border-radius: 3px;
-  outline: none;
-  box-shadow: 0 0 0 3px var(--huyooo-focus-ring);
-  background: var(--huyooo-surface-2);
-  color: var(--huyooo-text);
-  cursor: text;
-}
-
-/* 深色模式由 token 负责 */