@huyooo/file-explorer-frontend-react 0.4.2

package/src/components/FileList.tsx

@@ -0,0 +1,228 @@
+import { useRef } from 'react';
+import type { FileItem, SortConfig } from '../types';
+import { FileType } from '../types';
+import { FileIcon } from './FileIcon';
+import { SortIndicator } from './SortIndicator';
+import './FileList.css';
+
+interface FileListProps {
+  items: FileItem[];
+  selectedIds: Set<string>;
+  sortConfig?: SortConfig;
+  editingId?: string | null;
+  dragOverId?: string | null;
+  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;
+  onSort?: (field: string) => 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;
+}
+
+/**
+ * 获取类型标签
+ */
+function getTypeLabel(type: FileType): string {
+  const labels: Record<FileType, string> = {
+    [FileType.FOLDER]: '文件夹',
+    [FileType.FILE]: '文件',
+    [FileType.IMAGE]: '图片',
+    [FileType.VIDEO]: '视频',
+    [FileType.MUSIC]: '音频',
+    [FileType.DOCUMENT]: '文档',
+    [FileType.CODE]: '代码',
+    [FileType.TEXT]: '文本',
+    [FileType.PDF]: 'PDF',
+    [FileType.ARCHIVE]: '压缩包',
+    [FileType.APPLICATION]: '应用程序',
+    [FileType.UNKNOWN]: '未知',
+  };
+  return labels[type] || type;
+}
+
+export function FileList({
+  items,
+  selectedIds,
+  sortConfig,
+  editingId,
+  dragOverId,
+  onSelect,
+  onOpen,
+  onContextMenu,
+  onContextMenuEmpty,
+  onNameClick,
+  onRename,
+  onRenameCancel,
+  onSort,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+}: FileListProps) {
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  /**
+   * 空白处右键菜单
+   */
+  const handleEmptyContextMenu = (e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (!target.closest('tr')) {
+      onContextMenuEmpty?.(e);
+    }
+  };
+
+  /**
+   * 处理重命名（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-list" onContextMenu={(e) => { e.preventDefault(); handleEmptyContextMenu(e); }}>
+      <table className="file-list-table">
+        <thead className="file-list-header">
+          <tr>
+            <th
+              className="file-list-header-cell file-list-header-cell--name"
+              onClick={() => onSort?.('name')}
+            >
+              名称
+              {sortConfig?.field === 'name' && (
+                <SortIndicator direction={sortConfig.direction} />
+              )}
+            </th>
+            <th
+              className="file-list-header-cell"
+              onClick={() => onSort?.('dateModified')}
+            >
+              修改日期
+              {sortConfig?.field === 'dateModified' && (
+                <SortIndicator direction={sortConfig.direction} />
+              )}
+            </th>
+            <th
+              className="file-list-header-cell"
+              onClick={() => onSort?.('size')}
+            >
+              大小
+              {sortConfig?.field === 'size' && (
+                <SortIndicator direction={sortConfig.direction} />
+              )}
+            </th>
+            <th
+              className="file-list-header-cell"
+              onClick={() => onSort?.('type')}
+            >
+              类型
+              {sortConfig?.field === 'type' && (
+                <SortIndicator direction={sortConfig.direction} />
+              )}
+            </th>
+          </tr>
+        </thead>
+        <tbody className="file-list-body">
+          {items.map((item, index) => {
+            const isSelected = selectedIds.has(item.id);
+            const isEditing = editingId === item.id;
+            const isDragOver = dragOverId === item.id;
+
+            let rowClassName = 'file-list-row';
+            if (isSelected) {
+              rowClassName += ' file-list-row--selected';
+            } else if (isDragOver) {
+              rowClassName += ' file-list-row--drag-over';
+            } else if (index % 2 === 0) {
+              rowClassName += ' file-list-row--even';
+            } else {
+              rowClassName += ' file-list-row--odd';
+            }
+
+            return (
+              <tr
+                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={rowClassName}
+              >
+                <td className={`file-list-cell file-list-cell--name ${isSelected ? 'file-list-cell--selected' : ''}`}>
+                  <FileIcon type={item.type} name={item.name} size={16} />
+                  {isEditing ? (
+                    <input
+                      ref={renameInputRef}
+                      type="text"
+                      className="file-list-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
+                    />
+                  ) : (
+                    <span
+                      onClick={(e) => { e.stopPropagation(); onNameClick?.(item, e); }}
+                      className={`file-list-name ${isSelected ? 'file-list-name--selected' : ''}`}
+                    >
+                      {item.name}
+                    </span>
+                  )}
+                </td>
+                <td className={`file-list-cell ${isSelected ? 'file-list-cell--selected' : ''}`}>
+                  {item.dateModified || '--'}
+                </td>
+                <td className={`file-list-cell file-list-cell--size ${isSelected ? 'file-list-cell--selected' : ''}`}>
+                  {item.size || '--'}
+                </td>
+                <td className={`file-list-cell ${isSelected ? 'file-list-cell--selected' : ''}`}>
+                  {getTypeLabel(item.type)}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/FileListView.css

@@ -0,0 +1,36 @@
+.file-list-view {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+  user-select: none;
+  min-height: 0;
+}
+
+.file-list-view-loading,
+.file-list-view-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: rgb(156, 163, 175);
+  gap: 16px;
+}
+
+.file-list-view-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(156, 163, 175, 0.2);
+  border-top-color: rgb(59, 130, 246);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.file-list-view-empty-icon {
+  opacity: 0.3;
+}
+

package/src/components/FileListView.tsx

@@ -0,0 +1,355 @@
+import { useState, useCallback, useImperativeHandle, forwardRef } from 'react';
+import { Icon } from '@iconify/react';
+import { FileGrid } from './FileGrid';
+import { FileList } from './FileList';
+import { FileType, type FileItem, type SortConfig, type FileExplorerAdapter } from '../types';
+import './FileListView.css';
+
+interface FileListViewProps {
+  items: FileItem[];
+  viewMode?: 'grid' | 'list';
+  loading?: boolean;
+  adapter?: FileExplorerAdapter;
+  currentPath?: string;
+  getAppIconUrl?: (item: FileItem) => string | undefined;
+  onOpen?: (item: FileItem) => void;
+  onSelectionChange?: (ids: Set<string>, items: FileItem[]) => void;
+  onContextMenu?: (event: React.MouseEvent, item: FileItem) => void;
+  onContextMenuEmpty?: (event: React.MouseEvent) => void;
+  onRename?: (item: FileItem, newName: string) => void;
+  onSortChange?: (config: SortConfig) => void;
+  onMove?: (sourceIds: string[], targetId: string) => void;
+}
+
+export interface FileListViewHandle {
+  clearSelection: () => void;
+  startRename: (id: string) => void;
+  selectAll: () => void;
+  selectedIds: Set<string>;
+  selectedItems: FileItem[];
+}
+
+export const FileListView = forwardRef<FileListViewHandle, FileListViewProps>(
+  (
+    {
+      items,
+      viewMode = 'grid',
+      loading = false,
+      adapter,
+      currentPath,
+      getAppIconUrl,
+      onOpen,
+      onSelectionChange,
+      onContextMenu,
+      onContextMenuEmpty,
+      onRename,
+      onSortChange,
+      onMove,
+    },
+    ref
+  ) => {
+    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+    const [editingId, setEditingId] = useState<string | null>(null);
+    const [dragOverId, setDragOverId] = useState<string | null>(null);
+    const [sortConfig, setSortConfig] = useState<SortConfig>({
+      field: 'name',
+      direction: 'asc',
+    });
+
+    // 获取选中的文件项
+    const selectedItems = items.filter((item) => selectedIds.has(item.id));
+
+    // 选择处理
+    const handleSelect = useCallback(
+      (item: FileItem, e: React.MouseEvent) => {
+        if (e.metaKey || e.ctrlKey) {
+          // 多选
+          setSelectedIds((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(item.id)) {
+              newSet.delete(item.id);
+            } else {
+              newSet.add(item.id);
+            }
+            const newItems = items.filter((i) => newSet.has(i.id));
+            onSelectionChange?.(newSet, newItems);
+            return newSet;
+          });
+        } else if (e.shiftKey && selectedIds.size > 0) {
+          // 范围选择
+          const lastId = Array.from(selectedIds).pop();
+          const lastIndex = items.findIndex((i) => i.id === lastId);
+          const currentIndex = items.findIndex((i) => i.id === item.id);
+          const start = Math.min(lastIndex, currentIndex);
+          const end = Math.max(lastIndex, currentIndex);
+          const newSet = new Set<string>();
+          for (let i = start; i <= end; i++) {
+            newSet.add(items[i]!.id);
+          }
+          setSelectedIds(newSet);
+          const newItems = items.filter((i) => newSet.has(i.id));
+          onSelectionChange?.(newSet, newItems);
+        } else {
+          // 单选
+          const newSet = new Set([item.id]);
+          setSelectedIds(newSet);
+          onSelectionChange?.(newSet, [item]);
+        }
+      },
+      [items, selectedIds, onSelectionChange]
+    );
+
+    const handleEmptyClick = useCallback(
+      (e: React.MouseEvent) => {
+        if (e.target === e.currentTarget) {
+          clearSelection();
+        }
+      },
+      []
+    );
+
+    // 清除选择
+    const clearSelection = useCallback(() => {
+      setSelectedIds(new Set());
+      onSelectionChange?.(new Set(), []);
+    }, [onSelectionChange]);
+
+    // 打开文件/文件夹
+    const handleOpen = useCallback(
+      (item: FileItem) => {
+        onOpen?.(item);
+      },
+      [onOpen]
+    );
+
+    // 右键菜单
+    const handleContextMenu = useCallback(
+      (item: FileItem, e: React.MouseEvent) => {
+        if (!selectedIds.has(item.id)) {
+          const newSet = new Set([item.id]);
+          setSelectedIds(newSet);
+          onSelectionChange?.(newSet, [item]);
+        }
+        onContextMenu?.(e, item);
+      },
+      [selectedIds, onSelectionChange, onContextMenu]
+    );
+
+    const handleEmptyContextMenu = useCallback(
+      (e: React.MouseEvent) => {
+        const target = e.target as HTMLElement;
+        if (
+          !target.closest('.file-grid-item') &&
+          !target.closest('.file-list-row')
+        ) {
+          clearSelection();
+          onContextMenuEmpty?.(e);
+        }
+      },
+      [clearSelection, onContextMenuEmpty]
+    );
+
+    // 从子组件触发的空白处右键菜单
+    const handleEmptyContextMenuFromChild = useCallback(
+      (e: React.MouseEvent) => {
+        clearSelection();
+        onContextMenuEmpty?.(e);
+      },
+      [clearSelection, onContextMenuEmpty]
+    );
+
+    // 名称点击（用于重命名）
+    const handleNameClick = useCallback(
+      (item: FileItem, e: React.MouseEvent) => {
+        if (selectedIds.has(item.id) && selectedIds.size === 1) {
+          setTimeout(() => {
+            if (selectedIds.has(item.id)) {
+              setEditingId(item.id);
+            }
+          }, 500);
+        }
+      },
+      [selectedIds]
+    );
+
+    // 重命名
+    const handleRename = useCallback(
+      (item: FileItem, newName: string) => {
+        if (newName && newName !== item.name) {
+          onRename?.(item, newName);
+        }
+        setEditingId(null);
+      },
+      [onRename]
+    );
+
+    const handleRenameCancel = useCallback(() => {
+      setEditingId(null);
+    }, []);
+
+    // 排序
+    const handleSort = useCallback(
+      (field: string) => {
+        setSortConfig((prev) => {
+          const newConfig: SortConfig =
+            prev.field === field
+              ? { ...prev, direction: prev.direction === 'asc' ? 'desc' : 'asc' }
+              : { field: field as SortConfig['field'], direction: 'asc' };
+          onSortChange?.(newConfig);
+          return newConfig;
+        });
+      },
+      [onSortChange]
+    );
+
+    // 拖拽
+    const handleDragStart = useCallback(
+      (e: React.DragEvent, item: FileItem) => {
+        if (!selectedIds.has(item.id)) {
+          const newSet = new Set([item.id]);
+          setSelectedIds(newSet);
+          onSelectionChange?.(newSet, [item]);
+        }
+        e.dataTransfer.setData(
+          'text/plain',
+          JSON.stringify([...selectedIds])
+        );
+      },
+      [selectedIds, onSelectionChange]
+    );
+
+    const handleDragOver = useCallback(
+      (e: React.DragEvent, item: FileItem) => {
+        if (item.type === FileType.FOLDER && !selectedIds.has(item.id)) {
+          setDragOverId(item.id);
+        }
+      },
+      [selectedIds]
+    );
+
+    const handleDragLeave = useCallback(() => {
+      setDragOverId(null);
+    }, []);
+
+    const handleDrop = useCallback(
+      (e: React.DragEvent, targetItem: FileItem) => {
+        setDragOverId(null);
+
+        if (targetItem.type !== FileType.FOLDER) return;
+
+        const data = e.dataTransfer.getData('text/plain');
+        if (!data) return;
+
+        try {
+          const draggedIds: string[] = JSON.parse(data);
+          if (draggedIds.includes(targetItem.id)) return;
+
+          onMove?.(draggedIds, targetItem.id);
+          clearSelection();
+        } catch (error) {
+          console.error('拖拽解析失败:', error);
+        }
+      },
+      [onMove, clearSelection]
+    );
+
+    // 开始重命名（供外部调用）
+    const startRename = useCallback((id: string) => {
+      setEditingId(id);
+    }, []);
+
+    // 全选
+    const selectAll = useCallback(() => {
+      const newSet = new Set(items.map((i) => i.id));
+      setSelectedIds(newSet);
+      onSelectionChange?.(newSet, items);
+    }, [items, onSelectionChange]);
+
+    // 暴露方法
+    useImperativeHandle(
+      ref,
+      () => ({
+        clearSelection,
+        startRename,
+        selectAll,
+        selectedIds,
+        selectedItems,
+      }),
+      [selectedIds, selectedItems, clearSelection, startRename, selectAll]
+    );
+
+    return (
+      <div
+        className="file-list-view"
+        onClick={handleEmptyClick}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          handleEmptyContextMenu(e);
+        }}
+      >
+        {/* 加载中 */}
+        {loading && (
+          <div className="file-list-view-loading">
+            <div className="file-list-view-spinner"></div>
+            <p>加载中...</p>
+          </div>
+        )}
+
+        {/* 空文件夹 */}
+        {!loading && items.length === 0 && (
+          <div className="file-list-view-empty">
+            <Icon icon="lucide:folder-open" width={64} height={64} className="file-list-view-empty-icon" />
+            <p>文件夹为空</p>
+          </div>
+        )}
+
+        {/* 网格视图 */}
+        {!loading && items.length > 0 && viewMode === 'grid' && (
+          <FileGrid
+            items={items}
+            selectedIds={selectedIds}
+            editingId={editingId}
+            dragOverId={dragOverId}
+            getAppIconUrl={getAppIconUrl}
+            onSelect={handleSelect}
+            onOpen={handleOpen}
+            onContextMenu={handleContextMenu}
+            onContextMenuEmpty={handleEmptyContextMenuFromChild}
+            onNameClick={handleNameClick}
+            onRename={handleRename}
+            onRenameCancel={handleRenameCancel}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          />
+        )}
+
+        {/* 列表视图 */}
+        {!loading && items.length > 0 && viewMode === 'list' && (
+          <FileList
+            items={items}
+            selectedIds={selectedIds}
+            editingId={editingId}
+            dragOverId={dragOverId}
+            sortConfig={sortConfig}
+            onSelect={handleSelect}
+            onOpen={handleOpen}
+            onContextMenu={handleContextMenu}
+            onContextMenuEmpty={handleEmptyContextMenuFromChild}
+            onNameClick={handleNameClick}
+            onRename={handleRename}
+            onRenameCancel={handleRenameCancel}
+            onSort={handleSort}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+FileListView.displayName = 'FileListView';

package/src/components/FileSidebar.css

@@ -0,0 +1,94 @@
+.file-sidebar {
+  width: 12rem;
+  background: rgba(243, 244, 246, 0.5);
+  backdrop-filter: blur(24px);
+  border-right: 1px solid rgba(229, 231, 233, 0.5);
+  display: flex;
+  flex-direction: column;
+  padding-top: 2rem;
+  padding-bottom: 1rem;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  user-select: none;
+  -webkit-app-region: drag; /* 整个侧边栏可拖拽 */
+}
+
+/* 自定义滚动条样式 */
+.file-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.file-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.file-sidebar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.file-sidebar::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.file-sidebar-section {
+  margin-bottom: 0;
+  -webkit-app-region: no-drag; /* section 内容区域不可拖拽 */
+}
+
+.file-sidebar-section-title {
+  padding: 0 1rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgb(107, 114, 128);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.file-sidebar-section + .file-sidebar-section .file-sidebar-section-title {
+  margin-top: 1.5rem;
+}
+
+.file-sidebar-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0 0.5rem;
+  margin: 0;
+}
+
+.file-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgb(75, 85, 99);
+  transition: all 200ms;
+  /* no-drag 已由 section 继承 */
+}
+
+.file-sidebar-item:hover {
+  background: rgba(229, 231, 233, 0.5);
+  color: black;
+}
+
+.file-sidebar-item--active {
+  background: rgba(209, 213, 219, 0.6);
+  color: black;
+}
+
+.file-sidebar-item-icon {
+  color: rgb(107, 114, 128);
+}
+
+.file-sidebar-item-icon--active {
+  color: rgb(37, 99, 235);
+}