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

package/src/components/Breadcrumb.tsx

@@ -1,38 +0,0 @@
-import { Icon } from '@iconify/react';
-import type { BreadcrumbItem } from '../types';
-import './Breadcrumb.css';
-
-interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-  onNavigate?: (item: BreadcrumbItem, index: number) => void;
-}
-
-export function Breadcrumb({ items, onNavigate }: BreadcrumbProps) {
-  const handleClick = (item: BreadcrumbItem, index: number) => {
-    // 点击最后一项不触发导航
-    if (index < items.length - 1) {
-      onNavigate?.(item, index);
-    }
-  };
-
-  return (
-    <div className="file-breadcrumb">
-      {items.map((item, index) => (
-        <span key={item.id} className="file-breadcrumb-item">
-          <span
-            onClick={() => handleClick(item, index)}
-            className={`file-breadcrumb-link ${
-              index === items.length - 1 ? 'file-breadcrumb-link--current' : ''
-            }`}
-          >
-            {item.name}
-          </span>
-          {index < items.length - 1 && (
-            <Icon icon="lucide:chevron-right" width={14} height={14} className="file-breadcrumb-separator" />
-          )}
-        </span>
-      ))}
-    </div>
-  );
-}
-

package/src/components/CompressDialog.css

@@ -1,267 +0,0 @@
-.compress-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--huyooo-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-}
-
-.compress-dialog {
-  background: var(--huyooo-panel-bg);
-  border-radius: 12px;
-  box-shadow: var(--huyooo-shadow-lg);
-  width: 420px;
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.compress-dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--huyooo-border);
-}
-
-.compress-dialog-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-  font-size: 16px;
-  color: var(--huyooo-text);
-}
-
-.compress-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;
-}
-
-.compress-dialog-close:hover {
-  background: var(--huyooo-muted);
-  color: var(--huyooo-text);
-}
-
-.compress-dialog-content {
-  padding: 20px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.compress-dialog-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background: var(--huyooo-surface);
-  border-radius: 8px;
-  color: var(--huyooo-text);
-  font-size: 14px;
-}
-
-.compress-dialog-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.compress-dialog-field > label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--huyooo-text);
-}
-
-.compress-dialog-input-group {
-  display: flex;
-  align-items: stretch;
-}
-
-.compress-dialog-input-group input {
-  flex: 1;
-  padding: 8px 12px;
-  border: 1px solid var(--huyooo-border);
-  border-radius: 6px 0 0 6px;
-  font-size: 14px;
-  outline: none;
-  transition: border-color 0.2s;
-  background: var(--huyooo-surface-2);
-  color: var(--huyooo-text);
-}
-
-.compress-dialog-input-group input:focus {
-  border-color: var(--huyooo-primary);
-}
-
-.compress-dialog-ext {
-  padding: 8px 12px;
-  background: var(--huyooo-muted);
-  border: 1px solid var(--huyooo-border);
-  border-left: none;
-  border-radius: 0 6px 6px 0;
-  font-size: 14px;
-  color: var(--huyooo-text-muted);
-}
-
-.compress-dialog-toggle-password {
-  padding: 8px 12px;
-  background: var(--huyooo-muted);
-  border: 1px solid var(--huyooo-border);
-  border-left: none;
-  border-radius: 0 6px 6px 0;
-  font-size: 12px;
-  color: var(--huyooo-primary);
-  cursor: pointer;
-}
-
-.compress-dialog-toggle-password:hover {
-  background: var(--huyooo-muted-hover);
-}
-
-.compress-dialog-field select {
-  padding: 8px 12px;
-  border: 1px solid var(--huyooo-border);
-  border-radius: 6px;
-  font-size: 14px;
-  outline: none;
-  background: var(--huyooo-surface-2);
-  color: var(--huyooo-text);
-  cursor: pointer;
-}
-
-.compress-dialog-field select:focus {
-  border-color: var(--huyooo-primary);
-}
-
-.compress-dialog-levels {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.compress-dialog-level {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border: 1px solid var(--huyooo-border);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.compress-dialog-level:hover {
-  background: var(--huyooo-surface);
-}
-
-.compress-dialog-level:has(input:checked) {
-  border-color: var(--huyooo-primary);
-  background: var(--huyooo-focus-ring);
-}
-
-.compress-dialog-level input {
-  margin: 0;
-}
-
-.compress-dialog-level-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--huyooo-text);
-}
-
-.compress-dialog-level-desc {
-  font-size: 12px;
-  color: var(--huyooo-text-muted);
-  margin-left: auto;
-}
-
-.compress-dialog-checkbox label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--huyooo-text);
-}
-
-.compress-dialog-checkbox input {
-  margin: 0;
-  width: 16px;
-  height: 16px;
-}
-
-.compress-dialog-preview {
-  padding: 10px 12px;
-  background: var(--huyooo-surface);
-  border-radius: 6px;
-  font-size: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.compress-dialog-preview-label {
-  color: var(--huyooo-text-muted);
-}
-
-.compress-dialog-preview-path {
-  color: var(--huyooo-text);
-  word-break: break-all;
-}
-
-.compress-dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 20px;
-  border-top: 1px solid var(--huyooo-border);
-}
-
-.compress-dialog-btn {
-  padding: 8px 20px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.compress-dialog-btn-cancel {
-  background: var(--huyooo-surface-2);
-  border: 1px solid var(--huyooo-border);
-  color: var(--huyooo-text);
-}
-
-.compress-dialog-btn-cancel:hover {
-  background: var(--huyooo-surface);
-}
-
-.compress-dialog-btn-confirm {
-  background: var(--huyooo-primary);
-  border: 1px solid var(--huyooo-primary);
-  color: white;
-}
-
-.compress-dialog-btn-confirm:hover {
-  background: var(--huyooo-primary-hover, var(--huyooo-primary));
-}
-
-.compress-dialog-btn-confirm:disabled {
-  background: var(--huyooo-text-disabled);
-  border-color: var(--huyooo-text-disabled);
-  cursor: not-allowed;
-}
-

package/src/components/CompressDialog.tsx

@@ -1,222 +0,0 @@
-import { useState, useMemo, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { Icon } from '@iconify/react';
-import './CompressDialog.css';
-import type { CompressFormat, CompressLevel, CompressOptions } from '../types';
-
-type CompressDialogOptions = Omit<CompressOptions, 'outputDir'>;
-
-interface CompressDialogProps {
-  visible: boolean;
-  /** 要压缩的文件/文件夹路径列表 */
-  filePaths: string[];
-  /** 输出目录 */
-  outputDir: string;
-  onConfirm: (options: CompressDialogOptions) => void;
-  onCancel: () => void;
-}
-
-/** 格式选项配置 */
-const FORMAT_OPTIONS: { value: CompressFormat; label: string; ext: string }[] = [
-  { value: 'zip', label: 'ZIP', ext: '.zip' },
-  { value: 'tgz', label: 'TAR.GZ (gzip)', ext: '.tar.gz' },
-  { value: 'tarbz2', label: 'TAR.BZ2 (bzip2)', ext: '.tar.bz2' },
-  { value: 'tar', label: 'TAR (无压缩)', ext: '.tar' },
-];
-
-/** 压缩级别选项 */
-const LEVEL_OPTIONS: { value: CompressLevel; label: string; desc: string }[] = [
-  { value: 'fast', label: '快速', desc: '压缩速度快，文件较大' },
-  { value: 'normal', label: '标准', desc: '平衡速度和大小' },
-  { value: 'best', label: '最佳', desc: '文件最小，速度较慢' },
-];
-
-/**
- * 压缩对话框组件
- */
-export function CompressDialog({
-  visible,
-  filePaths,
-  outputDir,
-  onConfirm,
-  onCancel,
-}: CompressDialogProps) {
-  const [format, setFormat] = useState<CompressFormat>('zip');
-  const [level, setLevel] = useState<CompressLevel>('normal');
-  const [outputName, setOutputName] = useState('');
-  const [deleteSource, setDeleteSource] = useState(false);
-  const [password, setPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-
-  // 根据选中文件生成默认输出名称
-  const defaultOutputName = useMemo(() => {
-    if (filePaths.length === 0) return 'archive';
-    if (filePaths.length === 1) {
-      const name = filePaths[0].split('/').pop() || 'archive';
-      // 移除扩展名
-      return name.replace(/\.[^.]+$/, '');
-    }
-    return '压缩文件';
-  }, [filePaths]);
-
-  // 初始化输出名称
-  useEffect(() => {
-    if (visible) {
-      setOutputName(defaultOutputName);
-      setFormat('zip');
-      setLevel('normal');
-      setDeleteSource(false);
-      setPassword('');
-    }
-  }, [visible, defaultOutputName]);
-
-  // 获取当前格式的扩展名
-  const currentExt = FORMAT_OPTIONS.find(f => f.value === format)?.ext || '.zip';
-
-  // 完整输出路径预览
-  const fullOutputPath = `${outputDir}/${outputName}${currentExt}`;
-
-  const handleConfirm = () => {
-    onConfirm({
-      format,
-      level,
-      outputName: outputName + currentExt,
-      deleteSource,
-    });
-  };
-
-  // 当前后端未实现密码压缩，避免 UI 误导：直接关闭密码选项
-  const supportsPassword = false;
-
-  if (!visible) return null;
-
-  return createPortal(
-    <div className="compress-dialog-overlay" onClick={onCancel}>
-      <div className="compress-dialog" onClick={e => e.stopPropagation()}>
-        {/* 头部 */}
-        <div className="compress-dialog-header">
-          <div className="compress-dialog-title">
-            <Icon icon="lucide:archive" width={20} height={20} />
-            <span>压缩文件</span>
-          </div>
-          <button className="compress-dialog-close" onClick={onCancel}>
-            <Icon icon="lucide:x" width={18} height={18} />
-          </button>
-        </div>
-
-        {/* 内容 */}
-        <div className="compress-dialog-content">
-          {/* 文件信息 */}
-          <div className="compress-dialog-info">
-            <Icon icon="lucide:file-archive" width={16} height={16} />
-            <span>
-              {filePaths.length === 1 
-                ? filePaths[0].split('/').pop() 
-                : `${filePaths.length} 个项目`}
-            </span>
-          </div>
-
-          {/* 输出文件名 */}
-          <div className="compress-dialog-field">
-            <label>文件名</label>
-            <div className="compress-dialog-input-group">
-              <input
-                type="text"
-                value={outputName}
-                onChange={e => setOutputName(e.target.value)}
-                placeholder="输入文件名"
-              />
-              <span className="compress-dialog-ext">{currentExt}</span>
-            </div>
-          </div>
-
-          {/* 压缩格式 */}
-          <div className="compress-dialog-field">
-            <label>压缩格式</label>
-            <select value={format} onChange={e => setFormat(e.target.value as CompressFormat)}>
-              {FORMAT_OPTIONS.map(opt => (
-                <option key={opt.value} value={opt.value}>{opt.label}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* 压缩级别 */}
-          <div className="compress-dialog-field">
-            <label>压缩级别</label>
-            <div className="compress-dialog-levels">
-              {LEVEL_OPTIONS.map(opt => (
-                <label key={opt.value} className="compress-dialog-level">
-                  <input
-                    type="radio"
-                    name="level"
-                    value={opt.value}
-                    checked={level === opt.value}
-                    onChange={() => setLevel(opt.value)}
-                  />
-                  <span className="compress-dialog-level-label">{opt.label}</span>
-                  <span className="compress-dialog-level-desc">{opt.desc}</span>
-                </label>
-              ))}
-            </div>
-          </div>
-
-          {/* 密码保护（仅 zip/7z） */}
-          {supportsPassword && (
-            <div className="compress-dialog-field">
-              <label>密码保护（可选）</label>
-              <div className="compress-dialog-input-group">
-                <input
-                  type={showPassword ? 'text' : 'password'}
-                  value={password}
-                  onChange={e => setPassword(e.target.value)}
-                  placeholder="设置密码"
-                />
-                <button
-                  type="button"
-                  className="compress-dialog-toggle-password"
-                  onClick={() => setShowPassword(!showPassword)}
-                >
-                  {showPassword ? '隐藏' : '显示'}
-                </button>
-              </div>
-            </div>
-          )}
-
-          {/* 删除源文件选项 */}
-          <div className="compress-dialog-field compress-dialog-checkbox">
-            <label>
-              <input
-                type="checkbox"
-                checked={deleteSource}
-                onChange={e => setDeleteSource(e.target.checked)}
-              />
-              <span>压缩后删除源文件</span>
-            </label>
-          </div>
-
-          {/* 输出路径预览 */}
-          <div className="compress-dialog-preview">
-            <span className="compress-dialog-preview-label">输出位置:</span>
-            <span className="compress-dialog-preview-path">{fullOutputPath}</span>
-          </div>
-        </div>
-
-        {/* 底部按钮 */}
-        <div className="compress-dialog-footer">
-          <button className="compress-dialog-btn compress-dialog-btn-cancel" onClick={onCancel}>
-            取消
-          </button>
-          <button 
-            className="compress-dialog-btn compress-dialog-btn-confirm" 
-            onClick={handleConfirm}
-            disabled={!outputName.trim()}
-          >
-            压缩
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-}
-

package/src/components/ContextMenu.css

@@ -1,155 +0,0 @@
-/* container 不拦截事件，让右键事件可以穿透到下层文件列表 */
-.context-menu-container {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  pointer-events: none;
-}
-
-.context-menu {
-  position: fixed;
-  z-index: 10000;
-  width: 220px; /* 固定宽度，与 calculateMenuPosition 中的 MENU_WIDTH 一致 */
-  background: var(--huyooo-menu-bg);
-  backdrop-filter: blur(24px);
-  border: 1px solid var(--huyooo-border);
-  border-radius: 0.5rem;
-  box-shadow: var(--huyooo-menu-shadow);
-  padding: 0.25rem 0;
-  font-size: 0.875rem;
-  user-select: none;
-  animation: fade-in 100ms ease-out, zoom-in 100ms ease-out;
-  pointer-events: auto;
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes zoom-in {
-  from { transform: scale(0.95); }
-  to { transform: scale(1); }
-}
-
-.context-menu-item {
-  width: 100%;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 1rem;
-  color: var(--huyooo-text);
-  transition: all 200ms;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
-
-.context-menu-item:hover {
-  background: var(--huyooo-primary);
-  color: white;
-}
-
-.context-menu-item:hover .context-menu-item-icon {
-  color: white;
-}
-
-.context-menu-item:hover .context-menu-item-shortcut {
-  color: var(--huyooo-on-primary-muted);
-}
-
-.context-menu-item--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.context-menu-item--disabled:hover {
-  background: transparent;
-  color: var(--huyooo-text);
-}
-
-.context-menu-item--disabled:hover .context-menu-item-icon {
-  color: var(--huyooo-text-muted);
-}
-
-.context-menu-item--danger {
-  color: var(--huyooo-danger);
-}
-
-.context-menu-item--danger:hover {
-  background: var(--huyooo-danger);
-  color: white;
-}
-
-.context-menu-item--danger .context-menu-item-icon {
-  color: var(--huyooo-danger);
-}
-
-.context-menu-item--danger:hover .context-menu-item-icon {
-  color: white;
-}
-
-.context-menu-item-icon {
-  color: var(--huyooo-text-muted);
-  flex-shrink: 0;
-}
-
-.context-menu-item-label {
-  flex: 1;
-}
-
-.context-menu-item-shortcut {
-  color: var(--huyooo-text-disabled);
-  font-size: 0.6875rem;
-}
-
-.context-menu-separator {
-  height: 1px;
-  background: var(--huyooo-border);
-  margin: 0.25rem 0.5rem;
-}
-
-.context-menu-item--has-children {
-  position: relative;
-}
-
-.context-menu-item--active {
-  background: var(--huyooo-primary);
-  color: white;
-}
-
-.context-menu-item--active .context-menu-item-icon {
-  color: white;
-}
-
-.context-menu-item--active .context-menu-item-shortcut {
-  color: var(--huyooo-on-primary-muted);
-}
-
-.context-menu-item-check {
-  color: var(--huyooo-text-muted);
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.context-menu-item:hover .context-menu-item-check,
-.context-menu-item--active .context-menu-item-check {
-  color: white;
-}
-
-.context-menu-item-arrow {
-  color: var(--huyooo-text-disabled);
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.context-menu-item:hover .context-menu-item-arrow,
-.context-menu-item--active .context-menu-item-arrow {
-  color: white;
-}
-
-.context-menu-submenu {
-  z-index: 10001;
-}
-