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

package/src/components/ProgressDialog.tsx

@@ -1,183 +0,0 @@
-import { createPortal } from 'react-dom';
-import { Icon } from '@iconify/react';
-import './ProgressDialog.css';
-
-/** 进度状态 */
-export type ProgressStatus = 'pending' | 'processing' | 'success' | 'error';
-
-/** 进度信息 */
-export interface ProgressInfo {
-  /** 操作类型 */
-  type: 'compress' | 'extract';
-  /** 状态 */
-  status: ProgressStatus;
-  /** 进度百分比 0-100 */
-  percent: number;
-  /** 当前处理的文件 */
-  currentFile?: string;
-  /** 已处理文件数 */
-  processedCount?: number;
-  /** 总文件数 */
-  totalCount?: number;
-  /** 错误信息 */
-  error?: string;
-  /** 输出路径 */
-  outputPath?: string;
-}
-
-interface ProgressDialogProps {
-  visible: boolean;
-  progress: ProgressInfo;
-  onCancel?: () => void;
-  onClose?: () => void;
-  /** 打开输出文件夹 */
-  onOpenFolder?: (path: string) => void;
-}
-
-/**
- * 进度对话框组件
- */
-export function ProgressDialog({
-  visible,
-  progress,
-  onCancel,
-  onClose,
-  onOpenFolder,
-}: ProgressDialogProps) {
-  const { type, status, percent, currentFile, processedCount, totalCount, error, outputPath } = progress;
-  
-  const title = type === 'compress' ? '压缩文件' : '解压文件';
-  const isCompleted = status === 'success' || status === 'error';
-
-  // 获取状态图标
-  const StatusIcon = () => {
-    switch (status) {
-      case 'processing':
-        return <Icon icon="lucide:loader-2" width={24} height={24} className="progress-dialog-icon-spin" />;
-      case 'success':
-        return <Icon icon="lucide:check-circle" width={24} height={24} className="progress-dialog-icon-success" />;
-      case 'error':
-        return <Icon icon="lucide:x-circle" width={24} height={24} className="progress-dialog-icon-error" />;
-      default:
-        return <Icon icon="lucide:archive" width={24} height={24} />;
-    }
-  };
-
-  // 获取状态文本
-  const getStatusText = () => {
-    switch (status) {
-      case 'pending':
-        return '准备中...';
-      case 'processing':
-        return type === 'compress' ? '正在压缩...' : '正在解压...';
-      case 'success':
-        return type === 'compress' ? '压缩完成' : '解压完成';
-      case 'error':
-        return '操作失败';
-      default:
-        return '';
-    }
-  };
-
-  const handleClose = () => {
-    if (isCompleted) {
-      onClose?.();
-    } else {
-      onCancel?.();
-    }
-  };
-
-  if (!visible) return null;
-
-  return createPortal(
-    <div className="progress-dialog-overlay">
-      <div className="progress-dialog">
-        {/* 头部 */}
-        <div className="progress-dialog-header">
-          <div className="progress-dialog-title">
-            <StatusIcon />
-            <span>{title}</span>
-          </div>
-          {isCompleted && (
-            <button className="progress-dialog-close" onClick={handleClose}>
-              <Icon icon="lucide:x" width={18} height={18} />
-            </button>
-          )}
-        </div>
-
-        {/* 内容 */}
-        <div className="progress-dialog-content">
-          {/* 状态文本 */}
-          <div className="progress-dialog-status">{getStatusText()}</div>
-
-          {/* 进度条 */}
-          {status === 'processing' && (
-            <div className="progress-dialog-bar-container">
-              <div className="progress-dialog-bar">
-                <div 
-                  className="progress-dialog-bar-fill"
-                  style={{ width: `${percent}%` }}
-                />
-              </div>
-              <span className="progress-dialog-percent">{percent}%</span>
-            </div>
-          )}
-
-          {/* 当前文件 */}
-          {currentFile && status === 'processing' && (
-            <div className="progress-dialog-current-file">
-              {currentFile}
-            </div>
-          )}
-
-          {/* 文件计数 */}
-          {totalCount && totalCount > 0 && status === 'processing' && (
-            <div className="progress-dialog-count">
-              {processedCount || 0} / {totalCount} 个文件
-            </div>
-          )}
-
-          {/* 错误信息 */}
-          {error && (
-            <div className="progress-dialog-error">
-              {error}
-            </div>
-          )}
-
-          {/* 成功后显示输出路径 */}
-          {status === 'success' && outputPath && (
-            <div className="progress-dialog-output">
-              <span className="progress-dialog-output-label">输出位置:</span>
-              <span className="progress-dialog-output-path">{outputPath}</span>
-            </div>
-          )}
-        </div>
-
-        {/* 底部按钮 */}
-        <div className="progress-dialog-footer">
-          {status === 'processing' && onCancel && (
-            <button className="progress-dialog-btn progress-dialog-btn-cancel" onClick={onCancel}>
-              取消
-            </button>
-          )}
-          {status === 'success' && outputPath && onOpenFolder && (
-            <button 
-              className="progress-dialog-btn progress-dialog-btn-folder" 
-              onClick={() => onOpenFolder(outputPath)}
-            >
-              <Icon icon="lucide:folder-open" width={16} height={16} />
-              打开文件夹
-            </button>
-          )}
-          {isCompleted && (
-            <button className="progress-dialog-btn progress-dialog-btn-close" onClick={handleClose}>
-              关闭
-            </button>
-          )}
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-}
-

package/src/components/SortIndicator.css

@@ -1,7 +0,0 @@
-.sort-indicator {
-  margin-left: 4px;
-  display: inline-flex;
-  align-items: center;
-  color: var(--huyooo-primary);
-}
-

package/src/components/SortIndicator.tsx

@@ -1,19 +0,0 @@
-import { Icon } from '@iconify/react';
-import './SortIndicator.css';
-
-interface SortIndicatorProps {
-  direction: 'asc' | 'desc';
-}
-
-export function SortIndicator({ direction }: SortIndicatorProps) {
-  return (
-    <span className="sort-indicator">
-      <Icon 
-        icon={direction === 'asc' ? 'lucide:chevron-up' : 'lucide:chevron-down'} 
-        width={12} 
-        height={12} 
-      />
-    </span>
-  );
-}
-

package/src/components/StatusBar.css

@@ -1,20 +0,0 @@
-.file-status-bar {
-  height: 32px;
-  background-color: var(--huyooo-surface-2);
-  border-top: 1px solid var(--huyooo-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 8px;
-  font-size: 10px;
-  color: var(--huyooo-text-muted);
-  user-select: none;
-  flex-shrink: 0;
-  z-index: 20;
-  gap: 4px;
-}
-
-.file-status-bar > * {
-  flex-shrink: 0;
-}
-

package/src/components/StatusBar.tsx

@@ -1,21 +0,0 @@
-import './StatusBar.css';
-
-interface StatusBarProps {
-  itemCount?: number;
-  selectedCount?: number;
-  children?: React.ReactNode;
-}
-
-export function StatusBar({ itemCount = 0, selectedCount = 0, children }: StatusBarProps) {
-  return (
-    <div className="file-status-bar">
-      {children || (
-        <>
-          <span>{itemCount} 个项目</span>
-          {selectedCount > 0 && <span> • 已选择 {selectedCount} 个</span>}
-        </>
-      )}
-    </div>
-  );
-}
-

package/src/components/Toolbar.css

@@ -1,150 +0,0 @@
-.file-toolbar {
-  height: 48px;
-  background: var(--huyooo-surface);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--huyooo-border);
-  display: flex;
-  align-items: center;
-  padding: 0 1rem;
-  user-select: none;
-  flex-shrink: 0;
-  z-index: 30;
-  position: relative;
-}
-
-.file-toolbar--draggable {
-  -webkit-app-region: drag;
-}
-
-.file-toolbar-nav {
-  display: flex;
-  align-items: center;
-  color: var(--huyooo-text-muted);
-  background: var(--huyooo-muted);
-  border-radius: 0.5rem;
-  padding: 0.125rem;
-  flex-shrink: 0;
-  -webkit-app-region: no-drag;
-}
-
-.file-toolbar-button {
-  padding: 0.25rem;
-  border-radius: 0.375rem;
-  transition: all 200ms;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--huyooo-text);
-}
-
-.file-toolbar-button:hover:not(:disabled) {
-  background: var(--huyooo-muted-hover);
-}
-
-.file-toolbar-button:disabled {
-  color: var(--huyooo-text-disabled);
-  cursor: default;
-}
-
-.file-toolbar-button--active {
-  background: var(--huyooo-surface-2);
-  box-shadow: var(--huyooo-shadow-sm);
-  color: var(--huyooo-text);
-}
-
-.file-toolbar-breadcrumb {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  margin-left: 1rem;
-  /* 不设置 no-drag，让空白区域可拖拽 */
-}
-
-.file-toolbar-custom {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  -webkit-app-region: no-drag;
-}
-
-.file-toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-shrink: 0;
-  margin-left: auto;
-  -webkit-app-region: no-drag;
-}
-
-.file-toolbar-search {
-  position: relative;
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .file-toolbar-search {
-    display: block;
-  }
-}
-
-.file-toolbar-search-icon {
-  position: absolute;
-  left: 0.625rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--huyooo-text-disabled);
-  transition: color 200ms;
-}
-
-.file-toolbar-search:focus-within .file-toolbar-search-icon {
-  color: var(--huyooo-primary);
-}
-
-.file-toolbar-search-input {
-  background: var(--huyooo-muted);
-  border: 1px solid transparent;
-  border-radius: 0.375rem;
-  padding-left: 2rem;
-  padding-right: 0.75rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  font-size: 0.875rem;
-  outline: none;
-  transition: all 200ms;
-  width: 8rem;
-  color: var(--huyooo-text);
-}
-
-.file-toolbar-search-input::placeholder {
-  color: var(--huyooo-text-disabled);
-}
-
-.file-toolbar-search-input:focus {
-  background: var(--huyooo-surface-2);
-  border-color: var(--huyooo-primary);
-  box-shadow: 0 0 0 2px var(--huyooo-focus-ring);
-  width: 12rem;
-}
-
-.file-toolbar-view-toggle {
-  display: flex;
-  align-items: center;
-  background: var(--huyooo-muted);
-  border-radius: 0.5rem;
-  padding: 0.125rem;
-  color: var(--huyooo-text-muted);
-}
-
-.file-toolbar-view-toggle .file-toolbar-button--active {
-  background: var(--huyooo-surface-2);
-  box-shadow: var(--huyooo-shadow-sm);
-  color: var(--huyooo-text);
-}
-
-.file-toolbar-view-toggle .file-toolbar-button:not(.file-toolbar-button--active):hover {
-  background: var(--huyooo-muted-hover);
-}
-

package/src/components/Toolbar.tsx

@@ -1,127 +0,0 @@
-import { Icon } from '@iconify/react';
-import { Breadcrumb } from './Breadcrumb';
-import type { BreadcrumbItem } from '../types';
-import './Toolbar.css';
-
-interface ToolbarProps {
-  canGoBack?: boolean;
-  canGoForward?: boolean;
-  breadcrumbs?: BreadcrumbItem[];
-  viewMode?: 'grid' | 'list';
-  searchQuery?: string;
-  showSearch?: boolean;
-  showViewToggle?: boolean;
-  draggable?: boolean;
-  onBack?: () => void;
-  onForward?: () => void;
-  onBreadcrumbNavigate?: (item: BreadcrumbItem) => void;
-  onViewModeChange?: (mode: 'grid' | 'list') => void;
-  onSearchQueryChange?: (query: string) => void;
-  children?: React.ReactNode;
-  breadcrumbSlot?: React.ReactNode;
-  actionsSlot?: React.ReactNode;
-}
-
-export function Toolbar({
-  canGoBack = false,
-  canGoForward = false,
-  breadcrumbs = [],
-  viewMode = 'grid',
-  searchQuery = '',
-  showSearch = false,
-  showViewToggle = true,
-  draggable = false,
-  onBack,
-  onForward,
-  onBreadcrumbNavigate,
-  onViewModeChange,
-  onSearchQueryChange,
-  children,
-  breadcrumbSlot,
-  actionsSlot,
-}: ToolbarProps) {
-  return (
-    <div
-      className={`file-toolbar ${draggable ? 'file-toolbar--draggable' : ''}`}
-    >
-      {/* 导航按钮 */}
-      <div className="file-toolbar-nav">
-        <button
-          className="file-toolbar-button"
-          onClick={onBack}
-          disabled={!canGoBack}
-          title="后退"
-        >
-          <Icon icon="lucide:chevron-left" width={18} height={18} />
-        </button>
-        <button
-          className="file-toolbar-button"
-          onClick={onForward}
-          disabled={!canGoForward}
-          title="前进"
-        >
-          <Icon icon="lucide:chevron-right" width={18} height={18} />
-        </button>
-      </div>
-
-      {/* 面包屑插槽 */}
-      <div className="file-toolbar-breadcrumb">
-        {breadcrumbSlot || (
-          breadcrumbs.length > 0 && (
-            <Breadcrumb
-              items={breadcrumbs}
-              onNavigate={onBreadcrumbNavigate}
-            />
-          )
-        )}
-      </div>
-
-      {/* 自定义内容插槽 */}
-      {children && <div className="file-toolbar-custom">{children}</div>}
-
-      {/* 操作区 */}
-      <div className="file-toolbar-actions">
-        {/* 搜索框 */}
-        {showSearch && (
-          <div className="file-toolbar-search">
-            <Icon icon="lucide:search" width={16} height={16} className="file-toolbar-search-icon" />
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => onSearchQueryChange?.(e.target.value)}
-              placeholder="搜索"
-              className="file-toolbar-search-input"
-            />
-          </div>
-        )}
-
-        {/* 视图切换 */}
-        {showViewToggle && (
-          <div className="file-toolbar-view-toggle">
-            <button
-              onClick={() => onViewModeChange?.('grid')}
-              className={`file-toolbar-button ${
-                viewMode === 'grid' ? 'file-toolbar-button--active' : ''
-              }`}
-              title="网格视图"
-            >
-              <Icon icon="lucide:layout-grid" width={18} height={18} />
-            </button>
-            <button
-              onClick={() => onViewModeChange?.('list')}
-              className={`file-toolbar-button ${
-                viewMode === 'list' ? 'file-toolbar-button--active' : ''
-              }`}
-              title="列表视图"
-            >
-              <Icon icon="lucide:list" width={18} height={18} />
-            </button>
-          </div>
-        )}
-
-        {/* 额外操作插槽 */}
-        {actionsSlot}
-      </div>
-    </div>
-  );
-}