@huyooo/file-explorer-frontend-react 0.4.2

package/src/components/FileGrid.css

@@ -0,0 +1,267 @@
+/**
+ * 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: rgba(0, 0, 0, 0.04);
+}
+
+/* 选中状态 - macOS 风格的蓝色高亮 */
+.file-grid-item--selected {
+  background: rgba(0, 122, 255, 0.12);
+  border-color: rgba(0, 122, 255, 0.2);
+}
+
+.file-grid-item--selected:hover {
+  background: rgba(0, 122, 255, 0.16);
+}
+
+/* 拖拽悬停 */
+.file-grid-item--drag-over {
+  background: rgba(0, 122, 255, 0.2);
+  border-color: rgba(0, 122, 255, 0.4);
+}
+
+/* 图标/缩略图容器 - 统一尺寸 */
+.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: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  background: #f5f5f5;
+  /* 确保图片能作为加载占位符，平滑过渡到原图 */
+  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 2px 6px rgba(0, 122, 255, 0.2), 0 0 0 2px rgba(0, 122, 255, 0.3);
+}
+
+/* 视频缩略图容器 */
+.file-grid-item-thumbnail--video {
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #000;
+  width: 48px;
+  height: 48px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  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: rgba(0, 0, 0, 0.5);
+  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: #1d1d1f;
+  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-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 #007aff;
+  border-radius: 3px;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+  background: white;
+  cursor: text;
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .file-grid-item--normal:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  .file-grid-item--selected {
+    background: rgba(10, 132, 255, 0.25);
+    border-color: rgba(10, 132, 255, 0.3);
+  }
+
+  .file-grid-item--selected:hover {
+    background: rgba(10, 132, 255, 0.3);
+  }
+
+  .file-grid-item--drag-over {
+    background: rgba(10, 132, 255, 0.35);
+    border-color: rgba(10, 132, 255, 0.5);
+  }
+
+  .file-grid-item-thumbnail {
+    background: #2c2c2e;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  .file-grid-item-name {
+    color: #f5f5f7;
+  }
+
+  .file-grid-item-rename-input {
+    background: #1c1c1e;
+    border-color: #0a84ff;
+    color: #f5f5f7;
+  }
+}

package/src/components/FileGrid.tsx

@@ -0,0 +1,277 @@
+import { useRef, useMemo } from 'react';
+import type { FileItem } from '../types';
+import { FileType } from '../types';
+import { FileIcon } from './FileIcon';
+import './FileGrid.css';
+
+/**
+ * 分离文件名和扩展名
+ * 文件夹或无扩展名文件返回 { baseName: name, ext: '' }
+ */
+function splitFileName(name: string, isFolder: boolean): { baseName: string; ext: string } {
+  if (isFolder) {
+    return { baseName: name, ext: '' };
+  }
+  const lastDot = name.lastIndexOf('.');
+  // 没有扩展名，或者是隐藏文件（如 .gitignore）
+  if (lastDot <= 0) {
+    return { baseName: name, ext: '' };
+  }
+  return {
+    baseName: name.substring(0, lastDot),
+    ext: name.substring(lastDot), // 包含点号
+  };
+}
+
+/**
+ * 文件名组件 - 保留扩展名显示，只截断文件名部分
+ */
+function FileName({ 
+  name, 
+  isFolder, 
+  isSelected, 
+  onClick 
+}: { 
+  name: string; 
+  isFolder: boolean; 
+  isSelected: boolean;
+  onClick: (e: React.MouseEvent) => void;
+}) {
+  const { baseName, ext } = useMemo(() => splitFileName(name, isFolder), [name, isFolder]);
+  
+  return (
+    <span
+      onClick={onClick}
+      className={`file-grid-item-name ${isSelected ? 'file-grid-item-name--selected' : ''}`}
+      title={name}
+    >
+      {ext ? (
+        <>
+          <span className="file-grid-item-name-base">{baseName}</span>
+          <span className="file-grid-item-name-ext">{ext}</span>
+        </>
+      ) : (
+        name
+      )}
+    </span>
+  );
+}
+
+interface FileGridProps {
+  items: FileItem[];
+  selectedIds: Set<string>;
+  editingId?: string | null;
+  dragOverId?: string | null;
+  getAppIconUrl?: (item: FileItem) => string | undefined;
+  onSelect?: (item: FileItem, e: React.MouseEvent) => void;
+  onOpen?: (item: FileItem) => void;
+  onContextMenu?: (item: FileItem, e: React.MouseEvent) => void;
+  onContextMenuEmpty?: (e: React.MouseEvent) => void;
+  onNameClick?: (item: FileItem, e: React.MouseEvent) => void;
+  onRename?: (item: FileItem, newName: string) => void;
+  onRenameCancel?: (item: FileItem) => void;
+  onDragStart?: (e: React.DragEvent, item: FileItem) => void;
+  onDragOver?: (e: React.DragEvent, item: FileItem) => void;
+  onDragLeave?: (e: React.DragEvent) => void;
+  onDrop?: (e: React.DragEvent, item: FileItem) => void;
+  onThumbnailError?: (item: FileItem, e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}
+
+export function FileGrid({
+  items,
+  selectedIds,
+  editingId,
+  dragOverId,
+  getAppIconUrl,
+  onSelect,
+  onOpen,
+  onContextMenu,
+  onContextMenuEmpty,
+  onNameClick,
+  onRename,
+  onRenameCancel,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onThumbnailError,
+}: FileGridProps) {
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  /**
+   * 空白处右键菜单
+   */
+  const handleEmptyContextMenu = (e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (!target.closest('.file-grid-item')) {
+      onContextMenuEmpty?.(e);
+    }
+  };
+
+  /**
+   * 判断是否有缩略图或应用程序图标
+   */
+  const hasThumbnail = (item: FileItem): boolean => {
+    // 应用程序图标
+    if (item.type === FileType.APPLICATION && getAppIconUrl?.(item)) {
+      return true;
+    }
+    // 图片：必须有缩略图才显示，永远不显示原始 URL
+    if (item.type === FileType.IMAGE) {
+      return !!item.thumbnailUrl;
+    }
+    // 视频：必须有缩略图才显示，如果没有缩略图说明不应该被识别为视频
+    if (item.type === FileType.VIDEO) {
+      return !!item.thumbnailUrl;
+    }
+    return false;
+  };
+
+  /**
+   * 视频悬停播放
+   */
+  const handleVideoHover = (e: React.SyntheticEvent<HTMLVideoElement>, isHover: boolean) => {
+    const video = e.currentTarget;
+    if (isHover) {
+      video.play().catch(() => {});
+    } else {
+      video.pause();
+      video.currentTime = 0;
+    }
+  };
+
+  /**
+   * 处理重命名（blur 事件）
+   */
+  const handleRename = (item: FileItem, e: React.FocusEvent<HTMLInputElement>) => {
+    const input = e.target;
+    const newName = input.value.trim();
+    if (newName && newName !== item.name) {
+      onRename?.(item, newName);
+    } else {
+      onRenameCancel?.(item);
+    }
+  };
+
+  /**
+   * Enter 键保存
+   */
+  const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.currentTarget.blur();
+  };
+
+  /**
+   * Escape 键取消
+   */
+  const handleEscapeKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const input = e.currentTarget;
+    const item = items.find((i) => i.id === editingId);
+    if (item) {
+      input.value = item.name;
+    }
+    input.blur();
+  };
+
+  return (
+    <div className="file-grid" onContextMenu={(e) => { e.preventDefault(); handleEmptyContextMenu(e); }}>
+      {items.map((item) => {
+        const isSelected = selectedIds.has(item.id);
+        const isEditing = editingId === item.id;
+        const isDragOver = dragOverId === item.id;
+        const hasThumb = hasThumbnail(item);
+        const appIconUrl = item.type === FileType.APPLICATION ? getAppIconUrl?.(item) : undefined;
+
+        let itemClassName = 'file-grid-item';
+        if (isSelected && !isEditing) {
+          itemClassName += ' file-grid-item--selected';
+        } else if (isDragOver) {
+          itemClassName += ' file-grid-item--drag-over';
+        } else {
+          itemClassName += ' file-grid-item--normal';
+        }
+
+        return (
+          <div
+            key={item.id}
+            draggable={!isEditing}
+            onDragStart={(e) => onDragStart?.(e, item)}
+            onDragOver={(e) => { e.preventDefault(); onDragOver?.(e, item); }}
+            onDragLeave={(e) => onDragLeave?.(e)}
+            onDrop={(e) => { e.preventDefault(); onDrop?.(e, item); }}
+            onClick={(e) => { e.stopPropagation(); onSelect?.(item, e); }}
+            onDoubleClick={(e) => { e.stopPropagation(); onOpen?.(item); }}
+            onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); onContextMenu?.(item, e); }}
+            className={itemClassName}
+          >
+            <div className="file-grid-item-icon">
+              {/* 应用程序图标 */}
+              {appIconUrl && (
+                <img
+                  src={appIconUrl}
+                  alt={item.name}
+                  className={`file-grid-item-thumbnail file-grid-item-thumbnail--application ${
+                    isSelected && !isEditing ? 'file-grid-item-thumbnail--selected' : ''
+                  }`}
+                />
+              )}
+              {/* 视频缩略图 - 视频类型必须有缩略图，如果没有缩略图说明不应该被识别为视频，按普通文件处理 */}
+              {!appIconUrl && item.type === FileType.VIDEO && item.thumbnailUrl && hasThumb && (
+                <div className="file-grid-item-thumbnail file-grid-item-thumbnail--video">
+                  <img
+                    src={item.thumbnailUrl}
+                    alt={item.name}
+                    className="file-grid-item-thumbnail"
+                    onError={(e) => onThumbnailError?.(item, e)}
+                  />
+                  <div className="file-grid-item-video-play">
+                    <div className="file-grid-item-video-play-icon" />
+                  </div>
+                </div>
+              )}
+              {/* 图片缩略图 - 永远只显示缩略图，不显示原始 URL */}
+              {!appIconUrl && item.type === FileType.IMAGE && item.thumbnailUrl && hasThumb && (
+                <img
+                  src={item.thumbnailUrl}
+                  alt={item.name}
+                  className="file-grid-item-thumbnail"
+                  onError={(e) => onThumbnailError?.(item, e)}
+                />
+              )}
+              {/* 默认图标 */}
+              {!appIconUrl && !hasThumb && (
+                <FileIcon type={item.type} name={item.name} size={48} />
+              )}
+            </div>
+
+            <div className="file-grid-item-name-wrapper">
+              {isEditing ? (
+                <input
+                  ref={renameInputRef}
+                  type="text"
+                  className="file-grid-item-rename-input"
+                  defaultValue={item.name}
+                  onBlur={(e) => handleRename(item, e)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      handleEnterKey(e);
+                    } else if (e.key === 'Escape') {
+                      handleEscapeKey(e);
+                    }
+                  }}
+                  autoFocus
+                />
+              ) : (
+                <FileName
+                  name={item.name}
+                  isFolder={item.type === FileType.FOLDER}
+                  isSelected={isSelected}
+                  onClick={(e) => { e.stopPropagation(); onNameClick?.(item, e); }}
+                />
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/FileIcon.css

@@ -0,0 +1,41 @@
+.file-icon--folder {
+  color: rgb(96, 165, 250);
+  fill: rgb(96, 165, 250);
+}
+
+.file-icon--image {
+  color: rgb(168, 85, 247);
+}
+
+.file-icon--text {
+  color: rgb(107, 114, 128);
+}
+
+.file-icon--code {
+  color: rgb(34, 197, 94);
+}
+
+.file-icon--music {
+  color: rgb(248, 113, 113);
+}
+
+.file-icon--video {
+  color: rgb(37, 99, 235);
+}
+
+.file-icon--pdf {
+  color: rgb(220, 38, 38);
+}
+
+.file-icon--application {
+  color: rgb(139, 92, 246);
+}
+
+.file-icon--archive {
+  color: rgb(234, 179, 8);
+}
+
+.file-icon--default {
+  color: rgb(156, 163, 175);
+}
+

package/src/components/FileIcon.tsx

@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+import { Icon } from '@iconify/react';
+import { FileType, type FileType as FileTypeType } from '../types';
+import { getFileTypeIcon } from '../utils/fileTypeIcon';
+import { getFolderTypeIcon } from '../utils/folderTypeIcon';
+import './FileIcon.css';
+
+interface FileIconProps {
+  type: FileTypeType;
+  name?: string;
+  className?: string;
+  size?: number;
+}
+
+export function FileIcon({ type, name, className = '', size = 24 }: FileIconProps) {
+  const iconName = useMemo(() => {
+    if (type === FileType.FOLDER) {
+      // 文件夹：先查特定类型图标，否则用默认 folder
+      const folderIcon = name ? getFolderTypeIcon(name) : undefined;
+      return folderIcon ?? 'flat-color-icons:folder';
+    }
+    
+    // 如果有文件名，使用 material-icon-theme 图标映射（传递 type 作为兜底）
+    if (name) {
+      return getFileTypeIcon(name, type);
+    }
+    
+    // 回退逻辑（没有文件名时）
+    switch (type) {
+      case FileType.IMAGE:
+        return 'material-icon-theme:image';
+      case FileType.TEXT:
+        return 'material-icon-theme:document';
+      case FileType.CODE:
+        return 'material-icon-theme:javascript';
+      case FileType.MUSIC:
+        return 'material-icon-theme:audio';
+      case FileType.VIDEO:
+        return 'material-icon-theme:video';
+      case FileType.PDF:
+        return 'material-icon-theme:pdf';
+      case FileType.DOCUMENT:
+        return 'material-icon-theme:word';
+      case FileType.APPLICATION:
+        return 'material-icon-theme:exe';
+      case FileType.ARCHIVE:
+        return 'material-icon-theme:zip';
+      default:
+        return 'material-icon-theme:document';
+    }
+  }, [type, name]);
+
+  const iconClass = useMemo(() => {
+    const base = 'file-icon';
+    switch (type) {
+      case FileType.FOLDER:
+        return `${base} file-icon--folder`;
+      case FileType.IMAGE:
+        return `${base} file-icon--image`;
+      case FileType.TEXT:
+        return `${base} file-icon--text`;
+      case FileType.CODE:
+        return `${base} file-icon--code`;
+      case FileType.MUSIC:
+        return `${base} file-icon--music`;
+      case FileType.VIDEO:
+        return `${base} file-icon--video`;
+      case FileType.PDF:
+      case FileType.DOCUMENT:
+        return `${base} file-icon--pdf`;
+      case FileType.APPLICATION:
+        return `${base} file-icon--application`;
+      case FileType.ARCHIVE:
+        return `${base} file-icon--archive`;
+      default:
+        return `${base} file-icon--default`;
+    }
+  }, [type]);
+
+  return (
+    <div className={className}>
+      <Icon icon={iconName} width={size} height={size} className={iconClass} />
+    </div>
+  );
+}
+