@huyooo/file-explorer-frontend-react 0.4.2

package/src/components/Breadcrumb.css

@@ -0,0 +1,61 @@
+.file-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  overflow-x: auto;
+  padding: 0 0.25rem;
+  max-width: 100%;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-app-region: no-drag; /* 面包屑内容不可拖拽，但空白区域可拖拽 */
+}
+
+.file-breadcrumb::-webkit-scrollbar {
+  display: none;
+}
+
+.file-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.file-breadcrumb-link {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  transition: all 200ms;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: rgb(75, 85, 99);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-breadcrumb-link:hover {
+  background: rgba(229, 231, 233, 0.6);
+  color: rgb(17, 24, 39);
+}
+
+.file-breadcrumb-link--current {
+  font-weight: 600;
+  color: rgb(17, 24, 39);
+  background: rgba(229, 231, 233, 0.5);
+  cursor: default;
+}
+
+.file-breadcrumb-link--current:hover {
+  background: rgba(229, 231, 233, 0.5);
+}
+
+.file-breadcrumb-separator {
+  color: rgb(156, 163, 175);
+  margin: 0 0.25rem;
+  flex-shrink: 0;
+}
+

package/src/components/Breadcrumb.tsx

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

@@ -0,0 +1,264 @@
+.compress-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.compress-dialog {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  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 rgb(229, 231, 233);
+}
+
+.compress-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 16px;
+  color: rgb(17, 24, 39);
+}
+
+.compress-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;
+}
+
+.compress-dialog-close:hover {
+  background: rgb(243, 244, 246);
+  color: rgb(55, 65, 81);
+}
+
+.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: rgb(249, 250, 251);
+  border-radius: 8px;
+  color: rgb(55, 65, 81);
+  font-size: 14px;
+}
+
+.compress-dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.compress-dialog-field > label {
+  font-size: 13px;
+  font-weight: 500;
+  color: rgb(55, 65, 81);
+}
+
+.compress-dialog-input-group {
+  display: flex;
+  align-items: stretch;
+}
+
+.compress-dialog-input-group input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid rgb(209, 213, 219);
+  border-radius: 6px 0 0 6px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.compress-dialog-input-group input:focus {
+  border-color: rgb(59, 130, 246);
+}
+
+.compress-dialog-ext {
+  padding: 8px 12px;
+  background: rgb(243, 244, 246);
+  border: 1px solid rgb(209, 213, 219);
+  border-left: none;
+  border-radius: 0 6px 6px 0;
+  font-size: 14px;
+  color: rgb(107, 114, 128);
+}
+
+.compress-dialog-toggle-password {
+  padding: 8px 12px;
+  background: rgb(243, 244, 246);
+  border: 1px solid rgb(209, 213, 219);
+  border-left: none;
+  border-radius: 0 6px 6px 0;
+  font-size: 12px;
+  color: rgb(59, 130, 246);
+  cursor: pointer;
+}
+
+.compress-dialog-toggle-password:hover {
+  background: rgb(229, 231, 235);
+}
+
+.compress-dialog-field select {
+  padding: 8px 12px;
+  border: 1px solid rgb(209, 213, 219);
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+  background: white;
+  cursor: pointer;
+}
+
+.compress-dialog-field select:focus {
+  border-color: rgb(59, 130, 246);
+}
+
+.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 rgb(229, 231, 233);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.compress-dialog-level:hover {
+  background: rgb(249, 250, 251);
+}
+
+.compress-dialog-level:has(input:checked) {
+  border-color: rgb(59, 130, 246);
+  background: rgb(239, 246, 255);
+}
+
+.compress-dialog-level input {
+  margin: 0;
+}
+
+.compress-dialog-level-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgb(17, 24, 39);
+}
+
+.compress-dialog-level-desc {
+  font-size: 12px;
+  color: rgb(107, 114, 128);
+  margin-left: auto;
+}
+
+.compress-dialog-checkbox label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  color: rgb(55, 65, 81);
+}
+
+.compress-dialog-checkbox input {
+  margin: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.compress-dialog-preview {
+  padding: 10px 12px;
+  background: rgb(249, 250, 251);
+  border-radius: 6px;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.compress-dialog-preview-label {
+  color: rgb(107, 114, 128);
+}
+
+.compress-dialog-preview-path {
+  color: rgb(55, 65, 81);
+  word-break: break-all;
+}
+
+.compress-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid rgb(229, 231, 233);
+}
+
+.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: white;
+  border: 1px solid rgb(209, 213, 219);
+  color: rgb(55, 65, 81);
+}
+
+.compress-dialog-btn-cancel:hover {
+  background: rgb(249, 250, 251);
+}
+
+.compress-dialog-btn-confirm {
+  background: rgb(59, 130, 246);
+  border: 1px solid rgb(59, 130, 246);
+  color: white;
+}
+
+.compress-dialog-btn-confirm:hover {
+  background: rgb(37, 99, 235);
+}
+
+.compress-dialog-btn-confirm:disabled {
+  background: rgb(156, 163, 175);
+  border-color: rgb(156, 163, 175);
+  cursor: not-allowed;
+}
+

package/src/components/CompressDialog.tsx

@@ -0,0 +1,222 @@
+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
+  );
+}
+