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

package/src/components/FileGrid.tsx

@@ -1,278 +0,0 @@
-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>
-        </>
-      ) : (
-        // 无扩展名（包含文件夹/无扩展名文件/隐藏文件等）：允许两行并省略
-        <span className="file-grid-item-name-base file-grid-item-name-base--two-lines">{baseName}</span>
-      )}
-    </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

@@ -1,41 +0,0 @@
-.file-icon--folder {
-  color: var(--huyooo-primary);
-  fill: var(--huyooo-primary);
-}
-
-.file-icon--image {
-  color: var(--huyooo-primary);
-}
-
-.file-icon--text {
-  color: var(--huyooo-text-muted);
-}
-
-.file-icon--code {
-  color: var(--huyooo-success);
-}
-
-.file-icon--music {
-  color: var(--huyooo-danger);
-}
-
-.file-icon--video {
-  color: var(--huyooo-primary);
-}
-
-.file-icon--pdf {
-  color: var(--huyooo-danger);
-}
-
-.file-icon--application {
-  color: var(--huyooo-primary);
-}
-
-.file-icon--archive {
-  color: var(--huyooo-warning);
-}
-
-.file-icon--default {
-  color: var(--huyooo-text-disabled);
-}
-

package/src/components/FileIcon.tsx

@@ -1,86 +0,0 @@
-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 ?? 'ic:round-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>
-  );
-}
-

package/src/components/FileInfoDialog.css

@@ -1,214 +0,0 @@
-/* FileInfoDialog 样式 */
-
-.file-info-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--huyooo-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-  animation: file-info-fadeIn 0.15s ease-out;
-}
-
-@keyframes file-info-fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.file-info-dialog {
-  background: var(--huyooo-panel-bg);
-  border: 1px solid var(--huyooo-border);
-  border-radius: 12px;
-  width: 420px;
-  max-width: 90vw;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--huyooo-menu-shadow);
-  animation: file-info-slideIn 0.2s ease-out;
-}
-
-@keyframes file-info-slideIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-/* 深色模式由 token 负责 */
-
-/* 头部 */
-.file-info-dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--huyooo-border);
-  gap: 12px;
-}
-
-/* 深色模式由 token 负责 */
-
-.file-info-dialog-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  flex: 1;
-}
-
-.file-info-dialog-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--huyooo-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 深色模式由 token 负责 */
-
-.file-info-dialog-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: transparent;
-  color: var(--huyooo-text-muted);
-  border-radius: 6px;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
-}
-
-.file-info-dialog-close:hover {
-  background: var(--huyooo-muted);
-  color: var(--huyooo-text);
-}
-
-/* 深色模式由 token 负责 */
-
-/* 内容 */
-.file-info-dialog-content {
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  overflow-y: auto;
-}
-
-.file-info-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-}
-
-.file-info-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 90px;
-  flex-shrink: 0;
-  color: var(--huyooo-text-muted);
-  font-size: 13px;
-}
-
-/* 深色模式由 token 负责 */
-
-.file-info-label svg {
-  flex-shrink: 0;
-}
-
-.file-info-value {
-  flex: 1;
-  color: var(--huyooo-text);
-  font-size: 13px;
-  word-break: break-all;
-  line-height: 1.4;
-}
-
-/* 深色模式由 token 负责 */
-
-.file-info-value--path {
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
-  font-size: 12px;
-  background: var(--huyooo-code-bg);
-  color: var(--huyooo-code-text);
-  padding: 4px 8px;
-  border-radius: 4px;
-  user-select: all;
-}
-
-/* 深色模式由 token 负责 */
-
-/* 图标样式 */
-.file-info-icon {
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-}
-
-.file-info-icon--folder {
-  color: var(--huyooo-filetype-folder);
-}
-
-.file-info-icon--image {
-  color: var(--huyooo-filetype-image);
-}
-
-.file-info-icon--video {
-  color: var(--huyooo-filetype-video);
-}
-
-.file-info-icon--music {
-  color: var(--huyooo-filetype-music);
-}
-
-.file-info-icon--document {
-  color: var(--huyooo-filetype-document);
-}
-
-.file-info-icon--code {
-  color: var(--huyooo-filetype-code);
-}
-
-.file-info-icon--archive {
-  color: var(--huyooo-filetype-archive);
-}
-
-.file-info-icon--file {
-  color: var(--huyooo-filetype-file);
-}
-
-/* 底部 */
-.file-info-dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: 12px 20px;
-  border-top: 1px solid var(--huyooo-border);
-}
-
-/* 深色模式由 token 负责 */
-
-.file-info-dialog-btn {
-  padding: 6px 16px;
-  border: none;
-  border-radius: 6px;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  background: var(--huyooo-primary);
-  color: white;
-}
-
-.file-info-dialog-btn:hover {
-  background: var(--huyooo-primary-hover, var(--huyooo-primary));
-}
-