@huyooo/file-explorer-frontend-vue 0.4.2

package/src/composables/useDragAndDrop.ts

@@ -0,0 +1,103 @@
+import { ref } from 'vue';
+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 = ref<string | null>(null);
+  const isDragging = ref(false);
+
+  /**
+   * 开始拖拽
+   */
+  const handleDragStart = (e: 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';
+    
+    isDragging.value = true;
+  };
+
+  /**
+   * 拖拽经过
+   */
+  const handleDragOver = (e: DragEvent, item: FileItem) => {
+    if (!isDragging.value) return;
+    
+    // 只有文件夹可以作为放置目标
+    if (item.type === FileType.FOLDER) {
+      const selectedIds = getSelectedIds();
+      // 不能拖拽到自己身上
+      if (!selectedIds.has(item.id)) {
+        e.preventDefault();
+        dragOverId.value = item.id;
+      }
+    }
+  };
+
+  /**
+   * 拖拽离开
+   */
+  const handleDragLeave = () => {
+    dragOverId.value = null;
+  };
+
+  /**
+   * 放置
+   */
+  const handleDrop = (e: DragEvent, targetItem: FileItem) => {
+    dragOverId.value = null;
+    isDragging.value = 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 {
+      // 忽略解析错误
+    }
+  };
+
+  /**
+   * 拖拽结束
+   */
+  const handleDragEnd = () => {
+    dragOverId.value = null;
+    isDragging.value = false;
+  };
+
+  return {
+    dragOverId,
+    isDragging,
+    handleDragStart,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleDragEnd
+  };
+}

package/src/composables/useMediaPlayer.ts

@@ -0,0 +1,174 @@
+import { ref, nextTick } from 'vue';
+import { FileType } from '../types';
+
+/**
+ * 媒体播放器功能管理
+ */
+export function useMediaPlayer(
+  mediaType: FileType,
+  mediaRef: () => HTMLVideoElement | HTMLAudioElement | null
+) {
+  const isPlaying = ref(false);
+  const progress = ref(0);
+  const currentTime = ref(0);
+  const duration = ref(0);
+  const isMuted = ref(false);
+  const volume = ref(1);
+  const lastVolume = ref(1);
+  const showControls = ref(false);
+
+  const isAudio = mediaType === FileType.MUSIC;
+
+  /**
+   * 更新播放进度
+   */
+  const updateProgress = () => {
+    const media = mediaRef();
+    if (media) {
+      const curr = media.currentTime;
+      const dur = media.duration;
+      currentTime.value = curr;
+      if (dur && !isNaN(dur)) {
+        duration.value = dur;
+        progress.value = (curr / dur) * 100;
+      }
+    }
+  };
+
+  /**
+   * 切换播放/暂停
+   */
+  const togglePlay = () => {
+    const media = mediaRef();
+    if (media) {
+      if (isPlaying.value) {
+        media.pause();
+        isPlaying.value = false;
+      } else {
+        media.play();
+        isPlaying.value = true;
+      }
+    }
+  };
+
+  /**
+   * 切换静音
+   */
+  const toggleMute = () => {
+    const media = mediaRef();
+    if (media) {
+      if (isMuted.value) {
+        const volToRestore = lastVolume.value || 1;
+        media.volume = volToRestore;
+        media.muted = false;
+        volume.value = volToRestore;
+        isMuted.value = false;
+      } else {
+        lastVolume.value = volume.value;
+        media.volume = 0;
+        media.muted = true;
+        volume.value = 0;
+        isMuted.value = true;
+      }
+    }
+  };
+
+  /**
+   * 音量变化
+   */
+  const handleVolumeChange = (val: number) => {
+    volume.value = val;
+    const media = mediaRef();
+    if (media) {
+      media.volume = val;
+      if (val === 0) {
+        isMuted.value = true;
+        media.muted = true;
+      } else {
+        isMuted.value = false;
+        media.muted = false;
+      }
+    }
+  };
+
+  /**
+   * 跳转到指定时间
+   */
+  const seekTo = (time: number) => {
+    const media = mediaRef();
+    if (media && duration.value) {
+      media.currentTime = time;
+      currentTime.value = time;
+      progress.value = (time / duration.value) * 100;
+    }
+  };
+
+  /**
+   * 格式化时间显示
+   */
+  const formatTime = (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 = () => {
+    nextTick(() => {
+      const media = mediaRef();
+      if ((mediaType === FileType.VIDEO || isAudio) && media) {
+        media.volume = volume.value;
+        media.play().catch(() => {});
+        isPlaying.value = true;
+      }
+    });
+  };
+
+  /**
+   * 监听媒体事件
+   */
+  const setupMediaListeners = () => {
+    const media = mediaRef();
+    if (media) {
+      media.addEventListener('timeupdate', updateProgress);
+      media.addEventListener('loadedmetadata', updateProgress);
+      media.addEventListener('ended', () => {
+        isPlaying.value = false;
+      });
+    }
+  };
+
+  /**
+   * 清理媒体事件监听
+   */
+  const cleanupMediaListeners = () => {
+    const media = mediaRef();
+    if (media) {
+      media.removeEventListener('timeupdate', updateProgress);
+      media.removeEventListener('loadedmetadata', updateProgress);
+    }
+  };
+
+  return {
+    isPlaying,
+    progress,
+    currentTime,
+    duration,
+    isMuted,
+    volume,
+    showControls,
+    isAudio,
+    togglePlay,
+    toggleMute,
+    handleVolumeChange,
+    seekTo,
+    formatTime,
+    autoPlay,
+    setupMediaListeners,
+    cleanupMediaListeners,
+    updateProgress
+  };
+}

package/src/composables/useSelection.ts

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

package/src/composables/useWindowDrag.ts

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

package/src/composables/useWindowResize.ts

@@ -0,0 +1,134 @@
+import { ref, watch, onUnmounted } from 'vue';
+
+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 = ref(initialWidth);
+  const height = ref(initialHeight);
+  const isResizing = ref(false);
+  const resizeDirection = ref<ResizeDirection | null>(null);
+  const startX = ref(0);
+  const startY = ref(0);
+  const startWidth = ref(0);
+  const startHeight = ref(0);
+
+  /**
+   * 鼠标移动处理
+   */
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isResizing.value || !resizeDirection.value) return;
+
+    const deltaX = e.clientX - startX.value;
+    const deltaY = e.clientY - startY.value;
+
+    let newWidth = startWidth.value;
+    let newHeight = startHeight.value;
+
+    const direction = resizeDirection.value;
+
+    // 处理水平方向
+    if (direction.includes('e')) {
+      newWidth = Math.min(Math.max(startWidth.value + deltaX, minWidth), maxWidth);
+    } else if (direction.includes('w')) {
+      newWidth = Math.min(Math.max(startWidth.value - deltaX, minWidth), maxWidth);
+    }
+
+    // 处理垂直方向
+    if (direction.includes('s')) {
+      newHeight = Math.min(Math.max(startHeight.value + deltaY, minHeight), maxHeight);
+    } else if (direction.includes('n')) {
+      newHeight = Math.min(Math.max(startHeight.value - deltaY, minHeight), maxHeight);
+    }
+
+    width.value = newWidth;
+    height.value = newHeight;
+  };
+
+  /**
+   * 鼠标释放处理
+   */
+  const handleMouseUp = () => {
+    isResizing.value = false;
+    resizeDirection.value = null;
+  };
+
+  /**
+   * 开始调整大小
+   */
+  const startResize = (
+    e: MouseEvent,
+    direction: ResizeDirection,
+    currentWidth: number,
+    currentHeight: number
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    isResizing.value = true;
+    resizeDirection.value = direction;
+    startX.value = e.clientX;
+    startY.value = e.clientY;
+    startWidth.value = currentWidth;
+    startHeight.value = currentHeight;
+  };
+
+  /**
+   * 获取对应方向的鼠标样式
+   */
+  const getCursorForDirection = (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];
+  };
+
+  /**
+   * 监听调整大小状态变化
+   */
+  watch(isResizing, (resizing) => {
+    if (resizing) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = getCursorForDirection(resizeDirection.value || 'se');
+      document.body.style.userSelect = 'none';
+    } else {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+  });
+
+  /**
+   * 清理事件监听
+   */
+  onUnmounted(() => {
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  });
+
+  return {
+    width,
+    height,
+    isResizing,
+    startResize
+  };
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+// Types
+export * from './types';
+
+// Core Components
+export { default as FileListView } from './components/FileListView.vue';
+export { default as FileSidebar } from './components/FileSidebar.vue';
+export { default as Toolbar } from './components/Toolbar.vue';
+export { default as Breadcrumb } from './components/Breadcrumb.vue';
+export { default as StatusBar } from './components/StatusBar.vue';
+
+// Base Components
+export { default as FileIcon } from './components/FileIcon.vue';
+export { default as FileGrid } from './components/FileGrid.vue';
+export { default as FileList } from './components/FileList.vue';
+export { default as ContextMenu } from './components/ContextMenu.vue';
+export { default as SortIndicator } from './components/SortIndicator.vue';
+
+// Window Component
+export { default as Window } from './components/Window.vue';
+
+// Dialog Components
+export { default as CompressDialog } from './components/CompressDialog.vue';
+export { default as ProgressDialog } from './components/ProgressDialog.vue';
+export { default as FileInfoDialog } from './components/FileInfoDialog.vue';
+
+// Composables
+export { useSelection } from './composables/useSelection';
+export { useDragAndDrop } from './composables/useDragAndDrop';
+export { useMediaPlayer } from './composables/useMediaPlayer';
+export { useWindowDrag } from './composables/useWindowDrag';
+export { useWindowResize } from './composables/useWindowResize';
+export { useApplicationIcon } from './composables/useApplicationIcon';