@huyooo/file-explorer-frontend-react 0.4.2

package/src/components/FileSidebar.tsx

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

@@ -0,0 +1,211 @@
+.progress-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10001;
+}
+
+.progress-dialog {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  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 rgb(229, 231, 233);
+}
+
+.progress-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+  font-size: 16px;
+  color: rgb(17, 24, 39);
+}
+
+.progress-dialog-close {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: rgb(107, 114, 128);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-dialog-close:hover {
+  background: rgb(243, 244, 246);
+  color: rgb(55, 65, 81);
+}
+
+.progress-dialog-content {
+  padding: 24px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.progress-dialog-status {
+  font-size: 14px;
+  color: rgb(55, 65, 81);
+  text-align: center;
+}
+
+.progress-dialog-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.progress-dialog-bar {
+  flex: 1;
+  height: 8px;
+  background: rgb(229, 231, 233);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-dialog-bar-fill {
+  height: 100%;
+  background: rgb(59, 130, 246);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-dialog-percent {
+  font-size: 13px;
+  font-weight: 500;
+  color: rgb(55, 65, 81);
+  min-width: 40px;
+  text-align: right;
+}
+
+.progress-dialog-current-file {
+  font-size: 12px;
+  color: rgb(107, 114, 128);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.progress-dialog-count {
+  font-size: 12px;
+  color: rgb(107, 114, 128);
+  text-align: center;
+}
+
+.progress-dialog-error {
+  padding: 12px;
+  background: rgb(254, 242, 242);
+  border: 1px solid rgb(254, 202, 202);
+  border-radius: 6px;
+  color: rgb(185, 28, 28);
+  font-size: 13px;
+}
+
+.progress-dialog-output {
+  padding: 12px;
+  background: rgb(240, 253, 244);
+  border: 1px solid rgb(187, 247, 208);
+  border-radius: 6px;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.progress-dialog-output-label {
+  color: rgb(22, 101, 52);
+  font-weight: 500;
+}
+
+.progress-dialog-output-path {
+  color: rgb(21, 128, 61);
+  word-break: break-all;
+}
+
+.progress-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid rgb(229, 231, 233);
+}
+
+.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: white;
+  border: 1px solid rgb(209, 213, 219);
+  color: rgb(55, 65, 81);
+}
+
+.progress-dialog-btn-cancel:hover {
+  background: rgb(249, 250, 251);
+}
+
+.progress-dialog-btn-folder {
+  background: rgb(240, 253, 244);
+  border: 1px solid rgb(187, 247, 208);
+  color: rgb(22, 101, 52);
+}
+
+.progress-dialog-btn-folder:hover {
+  background: rgb(220, 252, 231);
+}
+
+.progress-dialog-btn-close {
+  background: rgb(59, 130, 246);
+  border: 1px solid rgb(59, 130, 246);
+  color: white;
+}
+
+.progress-dialog-btn-close:hover {
+  background: rgb(37, 99, 235);
+}
+
+/* 旋转动画 */
+.progress-dialog-icon-spin {
+  animation: spin 1s linear infinite;
+  color: rgb(59, 130, 246);
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.progress-dialog-icon-success {
+  color: rgb(34, 197, 94);
+}
+
+.progress-dialog-icon-error {
+  color: rgb(239, 68, 68);
+}
+

package/src/components/ProgressDialog.tsx

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

@@ -0,0 +1,7 @@
+.sort-indicator {
+  margin-left: 4px;
+  display: inline-flex;
+  align-items: center;
+  color: rgb(59, 130, 246);
+}
+

package/src/components/SortIndicator.tsx

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

@@ -0,0 +1,20 @@
+.file-status-bar {
+  height: 1.5rem;
+  background-color: rgb(249, 250, 251);
+  border-top: 1px solid rgb(229, 231, 233);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  font-size: 10px;
+  color: rgb(107, 114, 128);
+  user-select: none;
+  flex-shrink: 0;
+  z-index: 20;
+  gap: 4px;
+}
+
+.file-status-bar > * {
+  flex-shrink: 0;
+}
+

package/src/components/StatusBar.tsx

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

@@ -0,0 +1,150 @@
+.file-toolbar {
+  height: 3rem;
+  background: rgba(249, 250, 251, 0.9);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgb(229, 231, 233);
+  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: rgb(75, 85, 99);
+  background: rgba(229, 231, 233, 0.5);
+  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: rgb(31, 41, 55);
+}
+
+.file-toolbar-button:hover:not(:disabled) {
+  background: rgb(209, 213, 219);
+}
+
+.file-toolbar-button:disabled {
+  color: rgb(156, 163, 175);
+  cursor: default;
+}
+
+.file-toolbar-button--active {
+  background: white;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  color: rgb(31, 41, 55);
+}
+
+.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: rgb(156, 163, 175);
+  transition: color 200ms;
+}
+
+.file-toolbar-search:focus-within .file-toolbar-search-icon {
+  color: rgb(59, 130, 246);
+}
+
+.file-toolbar-search-input {
+  background: rgb(243, 244, 246);
+  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: rgb(55, 65, 81);
+}
+
+.file-toolbar-search-input::placeholder {
+  color: rgb(156, 163, 175);
+}
+
+.file-toolbar-search-input:focus {
+  background: white;
+  border-color: rgb(96, 165, 250);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  width: 12rem;
+}
+
+.file-toolbar-view-toggle {
+  display: flex;
+  align-items: center;
+  background: rgba(229, 231, 233, 0.5);
+  border-radius: 0.5rem;
+  padding: 0.125rem;
+  color: rgb(75, 85, 99);
+}
+
+.file-toolbar-view-toggle .file-toolbar-button--active {
+  background: white;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  color: rgb(31, 41, 55);
+}
+
+.file-toolbar-view-toggle .file-toolbar-button:not(.file-toolbar-button--active):hover {
+  background: rgba(209, 213, 219, 0.5);
+}
+