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

package/src/hooks/useDragAndDrop.ts

@@ -1,104 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

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