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

package/src/components/FileListView.tsx

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

@@ -1,94 +0,0 @@
-.file-sidebar {
-  width: 12rem;
-  background: var(--huyooo-muted);
-  backdrop-filter: blur(24px);
-  border-right: 1px solid var(--huyooo-border);
-  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: var(--huyooo-scrollbar);
-  border-radius: 3px;
-}
-
-.file-sidebar::-webkit-scrollbar-thumb:hover {
-  background: var(--huyooo-scrollbar-hover);
-}
-
-.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: var(--huyooo-text-muted);
-  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: var(--huyooo-text-muted);
-  transition: all 200ms;
-  /* no-drag 已由 section 继承 */
-}
-
-.file-sidebar-item:hover {
-  background: var(--huyooo-muted-hover);
-  color: var(--huyooo-text);
-}
-
-.file-sidebar-item--active {
-  background: var(--huyooo-muted-hover);
-  color: var(--huyooo-text);
-}
-
-.file-sidebar-item-icon {
-  color: var(--huyooo-text-muted);
-}
-
-.file-sidebar-item-icon--active {
-  color: var(--huyooo-primary);
-}

package/src/components/FileSidebar.tsx

@@ -1,66 +0,0 @@
-import { Icon } from '@iconify/react';
-import type { SidebarItem } from '../types';
-import './FileSidebar.css';
-
-interface SidebarSection {
-  id: string;
-  title: string;
-  items: SidebarItem[];
-}
-
-interface FileSidebarProps {
-  sections: SidebarSection[];
-  activeId?: string;
-  onNavigate?: (item: SidebarItem) => void;
-}
-
-export function FileSidebar({ sections, activeId, onNavigate }: FileSidebarProps) {
-  const handleNavigate = (item: SidebarItem) => {
-    onNavigate?.(item);
-  };
-
-  // 将 Lucide 图标名称转换为 Iconify 格式
-  const getIconName = (iconName?: string): string => {
-    if (!iconName) return 'mdi:folder';
-    // 如果已经是 Iconify 格式，直接返回
-    if (iconName.includes(':')) return iconName;
-    // 否则转换为 lucide: 格式
-    return `lucide:${iconName.toLowerCase()}`;
-  };
-
-  return (
-    <div className="file-sidebar">
-      {sections.map((section) => (
-        <div key={section.id} className="file-sidebar-section">
-          <div className="file-sidebar-section-title">{section.title}</div>
-          <ul className="file-sidebar-list">
-            {section.items.map((item) => {
-              const isActive = activeId === item.id;
-              return (
-                <li
-                  key={item.id}
-                  onClick={() => handleNavigate(item)}
-                  className={`file-sidebar-item ${
-                    isActive ? 'file-sidebar-item--active' : ''
-                  }`}
-                >
-                  <Icon
-                    icon={getIconName(item.icon)}
-                    width={18}
-                    height={18}
-                    className={
-                      isActive
-                        ? 'file-sidebar-item-icon--active'
-                        : 'file-sidebar-item-icon'
-                    }
-                  />
-                  <span>{item.label}</span>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/ProgressDialog.css

@@ -1,211 +0,0 @@
-.progress-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--huyooo-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10001;
-}
-
-.progress-dialog {
-  background: var(--huyooo-panel-bg);
-  border-radius: 12px;
-  box-shadow: var(--huyooo-shadow-lg);
-  width: 380px;
-  max-width: 90vw;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.progress-dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--huyooo-border);
-}
-
-.progress-dialog-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 600;
-  font-size: 16px;
-  color: var(--huyooo-text);
-}
-
-.progress-dialog-close {
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  color: var(--huyooo-text-muted);
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.progress-dialog-close:hover {
-  background: var(--huyooo-muted);
-  color: var(--huyooo-text);
-}
-
-.progress-dialog-content {
-  padding: 24px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.progress-dialog-status {
-  font-size: 14px;
-  color: var(--huyooo-text);
-  text-align: center;
-}
-
-.progress-dialog-bar-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.progress-dialog-bar {
-  flex: 1;
-  height: 8px;
-  background: var(--huyooo-border);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-dialog-bar-fill {
-  height: 100%;
-  background: var(--huyooo-primary);
-  border-radius: 4px;
-  transition: width 0.3s ease;
-}
-
-.progress-dialog-percent {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--huyooo-text);
-  min-width: 40px;
-  text-align: right;
-}
-
-.progress-dialog-current-file {
-  font-size: 12px;
-  color: var(--huyooo-text-muted);
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.progress-dialog-count {
-  font-size: 12px;
-  color: var(--huyooo-text-muted);
-  text-align: center;
-}
-
-.progress-dialog-error {
-  padding: 12px;
-  background: var(--huyooo-danger-bg);
-  border: 1px solid var(--huyooo-danger-border);
-  border-radius: 6px;
-  color: var(--huyooo-danger);
-  font-size: 13px;
-}
-
-.progress-dialog-output {
-  padding: 12px;
-  background: var(--huyooo-success-bg);
-  border: 1px solid var(--huyooo-success-border);
-  border-radius: 6px;
-  font-size: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.progress-dialog-output-label {
-  color: var(--huyooo-success);
-  font-weight: 500;
-}
-
-.progress-dialog-output-path {
-  color: var(--huyooo-success);
-  word-break: break-all;
-}
-
-.progress-dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 20px;
-  border-top: 1px solid var(--huyooo-border);
-}
-
-.progress-dialog-btn {
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.progress-dialog-btn-cancel {
-  background: var(--huyooo-surface-2);
-  border: 1px solid var(--huyooo-border);
-  color: var(--huyooo-text);
-}
-
-.progress-dialog-btn-cancel:hover {
-  background: var(--huyooo-surface);
-}
-
-.progress-dialog-btn-folder {
-  background: var(--huyooo-success-bg);
-  border: 1px solid var(--huyooo-success-border);
-  color: var(--huyooo-success);
-}
-
-.progress-dialog-btn-folder:hover {
-  background: color-mix(in srgb, var(--huyooo-success-bg) 75%, var(--huyooo-success) 25%);
-}
-
-.progress-dialog-btn-close {
-  background: var(--huyooo-primary);
-  border: 1px solid var(--huyooo-primary);
-  color: white;
-}
-
-.progress-dialog-btn-close:hover {
-  background: var(--huyooo-primary-hover, var(--huyooo-primary));
-}
-
-/* 旋转动画 */
-.progress-dialog-icon-spin {
-  animation: spin 1s linear infinite;
-  color: var(--huyooo-primary);
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.progress-dialog-icon-success {
-  color: var(--huyooo-success);
-}
-
-.progress-dialog-icon-error {
-  color: var(--huyooo-danger);
-}
-