@huyooo/file-explorer-frontend-react 0.4.2

package/src/hooks/useApplicationIcon.ts

@@ -0,0 +1,80 @@
+import { useState, useCallback, useEffect } from 'react';
+import type { FileItem } from '../types';
+import { FileType } from '../types';
+
+// 扩展 Window 类型
+declare global {
+  interface Window {
+    fileExplorerAPI?: {
+      getApplicationIcon?: (appPath: string) => Promise<string | null>;
+    };
+  }
+}
+
+/**
+ * 应用程序图标管理 hook
+ */
+export function useApplicationIcon(items: FileItem[]) {
+  // 应用程序图标缓存（避免重复请求）
+  const appIconCache = new Map<string, string>();
+
+  // 使用响应式的图标 URL 映射
+  const [appIconUrls, setAppIconUrls] = useState<Map<string, string>>(new Map());
+
+  /**
+   * 为应用程序获取图标
+   */
+  const loadApplicationIcon = useCallback(async (item: FileItem) => {
+    if (item.type !== FileType.APPLICATION || !item.id) return;
+    
+    // 检查缓存
+    if (appIconCache.has(item.id)) {
+      const cachedUrl = appIconCache.get(item.id);
+      if (cachedUrl) {
+        setAppIconUrls(prev => new Map(prev).set(item.id, cachedUrl));
+      }
+      return;
+    }
+    
+    // 检查响应式映射
+    if (appIconUrls.has(item.id)) {
+      return;
+    }
+    
+    if (typeof window.fileExplorerAPI !== 'undefined' && window.fileExplorerAPI.getApplicationIcon) {
+      try {
+        const iconUrl = await window.fileExplorerAPI.getApplicationIcon(item.id);
+        if (iconUrl) {
+          appIconCache.set(item.id, iconUrl);
+          setAppIconUrls(prev => new Map(prev).set(item.id, iconUrl));
+        }
+      } catch (error) {
+        console.error(`Failed to load application icon for ${item.name}:`, error);
+      }
+    }
+  }, [appIconUrls]);
+
+  /**
+   * 监听 items 变化，为应用程序加载图标
+   */
+  useEffect(() => {
+    items.forEach(item => {
+      if (item.type === FileType.APPLICATION && !appIconUrls.has(item.id)) {
+        loadApplicationIcon(item);
+      }
+    });
+  }, [items, appIconUrls, loadApplicationIcon]);
+
+  /**
+   * 获取应用程序图标的响应式 URL
+   */
+  const getAppIconUrl = useCallback((item: FileItem): string | undefined => {
+    return appIconUrls.get(item.id);
+  }, [appIconUrls]);
+
+  return {
+    getAppIconUrl,
+    loadApplicationIcon
+  };
+}
+

package/src/hooks/useDragAndDrop.ts

@@ -0,0 +1,104 @@
+import { useState, useCallback } from 'react';
+import type { FileItem } from '../types';
+import { FileType } from '../types';
+
+/**
+ * 拖拽操作管理
+ */
+export function useDragAndDrop(
+  getSelectedIds: () => Set<string>,
+  onSelect: (id: string, multi: boolean, range: boolean) => void,
+  onMove: (targetFolderId: string, itemIds: Set<string>) => void
+) {
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  /**
+   * 开始拖拽
+   */
+  const handleDragStart = useCallback((e: React.DragEvent, itemId: string) => {
+    if (!e.dataTransfer) return;
+    
+    const selectedIds = getSelectedIds();
+    
+    // 如果拖拽的项目未被选中，先选中它
+    if (!selectedIds.has(itemId)) {
+      onSelect(itemId, false, false);
+    }
+
+    // 设置拖拽数据
+    const draggedIds = selectedIds.has(itemId) ? selectedIds : new Set([itemId]);
+    e.dataTransfer.setData('text/plain', JSON.stringify([...draggedIds]));
+    e.dataTransfer.effectAllowed = 'move';
+    
+    setIsDragging(true);
+  }, [getSelectedIds, onSelect]);
+
+  /**
+   * 拖拽经过
+   */
+  const handleDragOver = useCallback((e: React.DragEvent, item: FileItem) => {
+    if (!isDragging) return;
+    
+    // 只有文件夹可以作为放置目标
+    if (item.type === FileType.FOLDER) {
+      const selectedIds = getSelectedIds();
+      // 不能拖拽到自己身上
+      if (!selectedIds.has(item.id)) {
+        e.preventDefault();
+        setDragOverId(item.id);
+      }
+    }
+  }, [isDragging, getSelectedIds]);
+
+  /**
+   * 拖拽离开
+   */
+  const handleDragLeave = useCallback(() => {
+    setDragOverId(null);
+  }, []);
+
+  /**
+   * 放置
+   */
+  const handleDrop = useCallback((e: React.DragEvent, targetItem: FileItem) => {
+    setDragOverId(null);
+    setIsDragging(false);
+
+    if (!e.dataTransfer || targetItem.type !== FileType.FOLDER) return;
+
+    const data = e.dataTransfer.getData('text/plain');
+    if (!data) return;
+
+    try {
+      const draggedIds: string[] = JSON.parse(data);
+      const itemIds = new Set(draggedIds);
+      
+      // 不能移动到自己
+      if (itemIds.has(targetItem.id)) return;
+      
+      onMove(targetItem.id, itemIds);
+    } catch {
+      // 忽略解析错误
+    }
+  }, [onMove]);
+
+  /**
+   * 拖拽结束
+   */
+  const handleDragEnd = useCallback(() => {
+    setDragOverId(null);
+    setIsDragging(false);
+  }, []);
+
+  return {
+    dragOverId,
+    isDragging,
+    handleDragStart,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleDragEnd
+  };
+}
+

package/src/hooks/useMediaPlayer.ts

@@ -0,0 +1,164 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { FileType } from '../types';
+
+/**
+ * 媒体播放器功能管理
+ */
+export function useMediaPlayer(
+  mediaType: FileType,
+  mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>
+) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [isMuted, setIsMuted] = useState(false);
+  const [volume, setVolume] = useState(1);
+  const [lastVolume, setLastVolume] = useState(1);
+  const [showControls, setShowControls] = useState(false);
+
+  const isAudio = mediaType === FileType.MUSIC;
+
+  /**
+   * 更新播放进度
+   */
+  const updateProgress = useCallback(() => {
+    const media = mediaRef.current;
+    if (media) {
+      const curr = media.currentTime;
+      const dur = media.duration;
+      setCurrentTime(curr);
+      if (dur && !isNaN(dur)) {
+        setDuration(dur);
+        setProgress((curr / dur) * 100);
+      }
+    }
+  }, [mediaRef]);
+
+  /**
+   * 切换播放/暂停
+   */
+  const togglePlay = useCallback(() => {
+    const media = mediaRef.current;
+    if (media) {
+      if (isPlaying) {
+        media.pause();
+        setIsPlaying(false);
+      } else {
+        media.play();
+        setIsPlaying(true);
+      }
+    }
+  }, [isPlaying, mediaRef]);
+
+  /**
+   * 切换静音
+   */
+  const toggleMute = useCallback(() => {
+    const media = mediaRef.current;
+    if (media) {
+      if (isMuted) {
+        const volToRestore = lastVolume || 1;
+        media.volume = volToRestore;
+        media.muted = false;
+        setVolume(volToRestore);
+        setIsMuted(false);
+      } else {
+        setLastVolume(volume);
+        media.volume = 0;
+        media.muted = true;
+        setVolume(0);
+        setIsMuted(true);
+      }
+    }
+  }, [isMuted, lastVolume, volume, mediaRef]);
+
+  /**
+   * 音量变化
+   */
+  const handleVolumeChange = useCallback((val: number) => {
+    setVolume(val);
+    const media = mediaRef.current;
+    if (media) {
+      media.volume = val;
+      if (val === 0) {
+        setIsMuted(true);
+        media.muted = true;
+      } else {
+        setIsMuted(false);
+        media.muted = false;
+      }
+    }
+  }, [mediaRef]);
+
+  /**
+   * 跳转到指定时间
+   */
+  const seekTo = useCallback((time: number) => {
+    const media = mediaRef.current;
+    if (media && duration) {
+      media.currentTime = time;
+      setCurrentTime(time);
+      setProgress((time / duration) * 100);
+    }
+  }, [duration, mediaRef]);
+
+  /**
+   * 格式化时间显示
+   */
+  const formatTime = useCallback((time: number) => {
+    if (isNaN(time)) return '0:00';
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  }, []);
+
+  /**
+   * 自动播放
+   */
+  const autoPlay = useCallback(() => {
+    const media = mediaRef.current;
+    if ((mediaType === FileType.VIDEO || isAudio) && media) {
+      media.volume = volume;
+      media.play().catch(() => {});
+      setIsPlaying(true);
+    }
+  }, [mediaType, isAudio, volume, mediaRef]);
+
+  /**
+   * 监听媒体事件
+   */
+  useEffect(() => {
+    const media = mediaRef.current;
+    if (media) {
+      media.addEventListener('timeupdate', updateProgress);
+      media.addEventListener('loadedmetadata', updateProgress);
+      media.addEventListener('ended', () => {
+        setIsPlaying(false);
+      });
+      return () => {
+        media.removeEventListener('timeupdate', updateProgress);
+        media.removeEventListener('loadedmetadata', updateProgress);
+      };
+    }
+  }, [mediaRef, updateProgress]);
+
+  return {
+    isPlaying,
+    progress,
+    currentTime,
+    duration,
+    isMuted,
+    volume,
+    showControls,
+    isAudio,
+    togglePlay,
+    toggleMute,
+    handleVolumeChange,
+    seekTo,
+    formatTime,
+    autoPlay,
+    updateProgress
+  };
+}
+

package/src/hooks/useSelection.ts

@@ -0,0 +1,112 @@
+import { useState, useCallback } from 'react';
+import type { FileItem } from '../types';
+
+/**
+ * 文件选择状态管理
+ */
+export function useSelection() {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  /**
+   * 清除选择
+   */
+  const clearSelection = useCallback(() => {
+    setSelectedIds(new Set());
+    setLastSelectedId(null);
+  }, []);
+
+  /**
+   * 选择项目
+   * @param id 项目 ID（null 表示清除选择）
+   * @param items 当前显示的项目列表
+   * @param multi 是否多选（Cmd/Ctrl）
+   * @param range 是否范围选择（Shift）
+   */
+  const selectItem = useCallback((
+    id: string | null, 
+    items: FileItem[],
+    multi: boolean = false, 
+    range: boolean = false
+  ) => {
+    if (!id) {
+      clearSelection();
+      return;
+    }
+
+    setSelectedIds(prev => {
+      setLastSelectedId(prevLast => {
+        // 范围选择
+        if (range && prevLast) {
+          const indexA = items.findIndex(i => i.id === prevLast);
+          const indexB = items.findIndex(i => i.id === id);
+          
+          if (indexA !== -1 && indexB !== -1) {
+            const start = Math.min(indexA, indexB);
+            const end = Math.max(indexA, indexB);
+            const newSet = new Set(multi ? prev : []);
+            for (let i = start; i <= end; i++) {
+              const item = items[i];
+              if (item) {
+                newSet.add(item.id);
+              }
+            }
+            setSelectedIds(newSet);
+            return id;
+          }
+        }
+
+        // 多选切换
+        if (multi) {
+          const newSet = new Set(prev);
+          if (newSet.has(id)) {
+            newSet.delete(id);
+          } else {
+            newSet.add(id);
+          }
+          setSelectedIds(newSet);
+          return id;
+        }
+
+        // 单选
+        setSelectedIds(new Set([id]));
+        return id;
+      });
+      return prev;
+    });
+  }, [clearSelection]);
+
+  /**
+   * 全选
+   */
+  const selectAll = useCallback((items: FileItem[]) => {
+    setSelectedIds(new Set(items.map(i => i.id)));
+  }, []);
+
+  /**
+   * 设置编辑状态
+   */
+  const setEditing = useCallback((id: string | null) => {
+    setEditingId(id);
+  }, []);
+
+  /**
+   * 检查是否选中
+   */
+  const isSelected = useCallback((id: string): boolean => {
+    return selectedIds.has(id);
+  }, [selectedIds]);
+
+  return {
+    selectedIds,
+    lastSelectedId,
+    editingId,
+    clearSelection,
+    selectItem,
+    selectAll,
+    setEditing,
+    isSelected
+  };
+}
+

package/src/hooks/useWindowDrag.ts

@@ -0,0 +1,60 @@
+import { useState, useCallback, useEffect } from 'react';
+
+/**
+ * 窗口拖拽功能管理
+ */
+export function useWindowDrag() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+
+  /**
+   * 鼠标移动处理
+   */
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging) return;
+    setPosition(prev => ({
+      x: prev.x + e.movementX,
+      y: prev.y + e.movementY
+    }));
+  }, [isDragging]);
+
+  /**
+   * 鼠标释放处理
+   */
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  /**
+   * 开始拖拽
+   */
+  const startDrag = useCallback((e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    // 检查是否点击在可拖拽区域，但排除按钮
+    if (target.closest('.draggable-area') && !target.closest('button')) {
+      e.preventDefault();
+      setIsDragging(true);
+    }
+  }, []);
+
+  /**
+   * 监听拖拽状态变化
+   */
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  return {
+    position,
+    isDragging,
+    startDrag
+  };
+}
+

package/src/hooks/useWindowResize.ts

@@ -0,0 +1,126 @@
+import { useState, useCallback, useEffect } from 'react';
+
+type ResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+
+/**
+ * 窗口调整大小功能管理
+ */
+export function useWindowResize(
+  initialWidth: number,
+  initialHeight: number,
+  minWidth: number,
+  minHeight: number,
+  maxWidth: number,
+  maxHeight: number
+) {
+  const [width, setWidth] = useState(initialWidth);
+  const [height, setHeight] = useState(initialHeight);
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizeDirection, setResizeDirection] = useState<ResizeDirection | null>(null);
+  const [startX, setStartX] = useState(0);
+  const [startY, setStartY] = useState(0);
+  const [startWidth, setStartWidth] = useState(0);
+  const [startHeight, setStartHeight] = useState(0);
+
+  /**
+   * 鼠标移动处理
+   */
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isResizing || !resizeDirection) return;
+
+    const deltaX = e.clientX - startX;
+    const deltaY = e.clientY - startY;
+
+    let newWidth = startWidth;
+    let newHeight = startHeight;
+
+    const direction = resizeDirection;
+
+    // 处理水平方向
+    if (direction.includes('e')) {
+      newWidth = Math.min(Math.max(startWidth + deltaX, minWidth), maxWidth);
+    } else if (direction.includes('w')) {
+      newWidth = Math.min(Math.max(startWidth - deltaX, minWidth), maxWidth);
+    }
+
+    // 处理垂直方向
+    if (direction.includes('s')) {
+      newHeight = Math.min(Math.max(startHeight + deltaY, minHeight), maxHeight);
+    } else if (direction.includes('n')) {
+      newHeight = Math.min(Math.max(startHeight - deltaY, minHeight), maxHeight);
+    }
+
+    setWidth(newWidth);
+    setHeight(newHeight);
+  }, [isResizing, resizeDirection, startX, startY, startWidth, startHeight, minWidth, minHeight, maxWidth, maxHeight]);
+
+  /**
+   * 鼠标释放处理
+   */
+  const handleMouseUp = useCallback(() => {
+    setIsResizing(false);
+    setResizeDirection(null);
+  }, []);
+
+  /**
+   * 开始调整大小
+   */
+  const startResize = useCallback((
+    e: React.MouseEvent,
+    direction: ResizeDirection,
+    currentWidth: number,
+    currentHeight: number
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeDirection(direction);
+    setStartX(e.clientX);
+    setStartY(e.clientY);
+    setStartWidth(currentWidth);
+    setStartHeight(currentHeight);
+  }, []);
+
+  /**
+   * 获取对应方向的鼠标样式
+   */
+  const getCursorForDirection = useCallback((direction: ResizeDirection): string => {
+    const cursors: Record<ResizeDirection, string> = {
+      n: 'n-resize',
+      s: 's-resize',
+      e: 'e-resize',
+      w: 'w-resize',
+      ne: 'ne-resize',
+      nw: 'nw-resize',
+      se: 'se-resize',
+      sw: 'sw-resize'
+    };
+    return cursors[direction];
+  }, []);
+
+  /**
+   * 监听调整大小状态变化
+   */
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = getCursorForDirection(resizeDirection || 'se');
+      document.body.style.userSelect = 'none';
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      };
+    }
+  }, [isResizing, resizeDirection, handleMouseMove, handleMouseUp, getCursorForDirection]);
+
+  return {
+    width,
+    height,
+    isResizing,
+    startResize
+  };
+}
+

package/src/index.css

@@ -0,0 +1,3 @@
+/* Base styles for file-explorer-frontend-react */
+/* This file will be copied to dist/style.css during build */
+

package/src/index.ts

@@ -0,0 +1,34 @@
+// Types
+export * from './types';
+
+// Core Components
+export { FileListView, type FileListViewHandle } from './components/FileListView';
+export { FileSidebar } from './components/FileSidebar';
+export { Toolbar } from './components/Toolbar';
+export { Breadcrumb } from './components/Breadcrumb';
+export { StatusBar } from './components/StatusBar';
+
+// Base Components
+export { FileIcon } from './components/FileIcon';
+export { FileGrid } from './components/FileGrid';
+export { FileList } from './components/FileList';
+export { ContextMenu } from './components/ContextMenu';
+export { SortIndicator } from './components/SortIndicator';
+
+// Window Component
+export { Window } from './components/Window';
+
+// Dialog Components
+export { CompressDialog } from './components/CompressDialog';
+export type { CompressOptions, CompressFormat, CompressLevel } from './types';
+export { ProgressDialog, type ProgressInfo, type ProgressStatus } from './components/ProgressDialog';
+export { FileInfoDialog, type FileInfoDialogProps } from './components/FileInfoDialog';
+
+// Hooks
+export { useSelection } from './hooks/useSelection';
+export { useDragAndDrop } from './hooks/useDragAndDrop';
+export { useMediaPlayer } from './hooks/useMediaPlayer';
+export { useWindowDrag } from './hooks/useWindowDrag';
+export { useWindowResize } from './hooks/useWindowResize';
+export { useApplicationIcon } from './hooks/useApplicationIcon';
+