@huyooo/file-explorer-frontend-react 0.4.2

package/src/components/FileInfoDialog.css

@@ -0,0 +1,252 @@
+/* FileInfoDialog 样式 */
+
+.file-info-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: file-info-fadeIn 0.15s ease-out;
+}
+
+@keyframes file-info-fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.file-info-dialog {
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  width: 420px;
+  max-width: 90vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
+  animation: file-info-slideIn 0.2s ease-out;
+}
+
+@keyframes file-info-slideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* 深色模式 */
+@media (prefers-color-scheme: dark) {
+  .file-info-dialog {
+    background: #2d2d2d;
+    border-color: #404040;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* 头部 */
+.file-info-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e0e0e0;
+  gap: 12px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .file-info-dialog-header {
+    border-bottom-color: #404040;
+  }
+}
+
+.file-info-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.file-info-dialog-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (prefers-color-scheme: dark) {
+  .file-info-dialog-name {
+    color: #e0e0e0;
+  }
+}
+
+.file-info-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: #666;
+  border-radius: 6px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+
+.file-info-dialog-close:hover {
+  background: #f0f0f0;
+  color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  .file-info-dialog-close {
+    color: #888;
+  }
+  .file-info-dialog-close:hover {
+    background: #404040;
+    color: #e0e0e0;
+  }
+}
+
+/* 内容 */
+.file-info-dialog-content {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+}
+
+.file-info-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.file-info-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 90px;
+  flex-shrink: 0;
+  color: #666;
+  font-size: 13px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .file-info-label {
+    color: #888;
+  }
+}
+
+.file-info-label svg {
+  flex-shrink: 0;
+}
+
+.file-info-value {
+  flex: 1;
+  color: #1a1a1a;
+  font-size: 13px;
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+@media (prefers-color-scheme: dark) {
+  .file-info-value {
+    color: #e0e0e0;
+  }
+}
+
+.file-info-value--path {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
+  font-size: 12px;
+  background: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 4px;
+  user-select: all;
+}
+
+@media (prefers-color-scheme: dark) {
+  .file-info-value--path {
+    background: #383838;
+  }
+}
+
+/* 图标样式 */
+.file-info-icon {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.file-info-icon--folder {
+  color: #dcb67a;
+}
+
+.file-info-icon--image {
+  color: #7ec699;
+}
+
+.file-info-icon--video {
+  color: #c678dd;
+}
+
+.file-info-icon--music {
+  color: #e06c75;
+}
+
+.file-info-icon--document {
+  color: #61afef;
+}
+
+.file-info-icon--code {
+  color: #98c379;
+}
+
+.file-info-icon--archive {
+  color: #d19a66;
+}
+
+.file-info-icon--file {
+  color: #abb2bf;
+}
+
+/* 底部 */
+.file-info-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 20px;
+  border-top: 1px solid #e0e0e0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .file-info-dialog-footer {
+    border-top-color: #404040;
+  }
+}
+
+.file-info-dialog-btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: #007aff;
+  color: white;
+}
+
+.file-info-dialog-btn:hover {
+  background: #0066d6;
+}
+

package/src/components/FileInfoDialog.tsx

@@ -0,0 +1,202 @@
+/**
+ * FileInfoDialog - 文件信息弹窗组件
+ * 
+ * 显示文件/文件夹的详细信息
+ */
+
+import React from 'react';
+import { Icon } from '@iconify/react';
+import { FileItem, FileType } from '../types';
+import { getFileTypeIcon } from '../utils/fileTypeIcon';
+import './FileInfoDialog.css';
+
+export interface FileInfoDialogProps {
+  /** 是否显示 */
+  visible: boolean;
+  /** 文件项 */
+  item: FileItem | null;
+  /** 关闭回调 */
+  onClose: () => void;
+}
+
+/** 获取文件类型图标 */
+function getFileIcon(type: FileType, name?: string) {
+  // 文件夹使用 material-icon-theme:folder
+  if (type === FileType.FOLDER) {
+    return <Icon icon="flat-color-icons:folder" width={48} height={48} className="file-info-icon" />;
+  }
+  
+  // 如果有文件名，使用 material-icon-theme 图标映射（传递 type 作为兜底）
+  if (name) {
+    const iconName = getFileTypeIcon(name, type);
+    return <Icon icon={iconName} width={48} height={48} className="file-info-icon" />;
+  }
+  
+  // 回退逻辑（没有文件名时）
+  const iconMap: Partial<Record<FileType, string>> = {
+    [FileType.IMAGE]: 'material-icon-theme:image',
+    [FileType.VIDEO]: 'material-icon-theme:video',
+    [FileType.MUSIC]: 'material-icon-theme:audio',
+    [FileType.DOCUMENT]: 'material-icon-theme:word',
+    [FileType.CODE]: 'material-icon-theme:javascript',
+    [FileType.ARCHIVE]: 'material-icon-theme:zip',
+    [FileType.PDF]: 'material-icon-theme:pdf',
+    [FileType.TEXT]: 'material-icon-theme:document',
+    [FileType.APPLICATION]: 'material-icon-theme:exe',
+  };
+  
+  const iconName = iconMap[type] || 'material-icon-theme:document';
+  return <Icon icon={iconName} width={48} height={48} className="file-info-icon" />;
+}
+
+/** 获取文件类型名称 */
+function getFileTypeName(type: FileType, extension?: string): string {
+  switch (type) {
+    case FileType.FOLDER:
+      return '文件夹';
+    case FileType.IMAGE:
+      return `图片${extension ? ` (${extension.toUpperCase()})` : ''}`;
+    case FileType.VIDEO:
+      return `视频${extension ? ` (${extension.toUpperCase()})` : ''}`;
+    case FileType.MUSIC:
+      return `音频${extension ? ` (${extension.toUpperCase()})` : ''}`;
+    case FileType.DOCUMENT:
+      return `文档${extension ? ` (${extension.toUpperCase()})` : ''}`;
+    case FileType.CODE:
+      return `代码文件${extension ? ` (${extension.toUpperCase()})` : ''}`;
+    case FileType.ARCHIVE:
+      return `压缩包${extension ? ` (${extension.toUpperCase()})` : ''}`;
+    default:
+      return extension ? `${extension.toUpperCase()} 文件` : '文件';
+  }
+}
+
+/** 获取文件扩展名 */
+function getExtension(filename: string): string | undefined {
+  const lastDot = filename.lastIndexOf('.');
+  if (lastDot === -1 || lastDot === 0) return undefined;
+  return filename.substring(lastDot + 1).toLowerCase();
+}
+
+/** 获取文件所在目录 */
+function getDirectory(path: string): string {
+  const lastSlash = path.lastIndexOf('/');
+  if (lastSlash === -1) return path;
+  return path.substring(0, lastSlash) || '/';
+}
+
+export function FileInfoDialog({ visible, item, onClose }: FileInfoDialogProps) {
+  if (!visible || !item) return null;
+
+  const extension = getExtension(item.name);
+  const directory = getDirectory(item.id);
+
+  // 点击背景关闭
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // ESC 关闭
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    if (visible) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [visible, onClose]);
+
+  return (
+    <div className="file-info-dialog-overlay" onClick={handleBackdropClick}>
+      <div className="file-info-dialog">
+        {/* 头部 */}
+        <div className="file-info-dialog-header">
+          <div className="file-info-dialog-title">
+            {getFileIcon(item.type, item.name)}
+            <span className="file-info-dialog-name" title={item.name}>
+              {item.name}
+            </span>
+          </div>
+          <button className="file-info-dialog-close" onClick={onClose}>
+            <Icon icon="lucide:x" width={18} height={18} />
+          </button>
+        </div>
+
+        {/* 内容 */}
+        <div className="file-info-dialog-content">
+          {/* 类型 */}
+          <div className="file-info-row">
+            <div className="file-info-label">
+              <Icon icon="lucide:file" width={14} height={14} />
+              <span>类型</span>
+            </div>
+            <div className="file-info-value">
+              {getFileTypeName(item.type, extension)}
+            </div>
+          </div>
+
+          {/* 大小 */}
+          {item.type !== FileType.FOLDER && item.size && (
+            <div className="file-info-row">
+              <div className="file-info-label">
+                <Icon icon="lucide:hard-drive" width={14} height={14} />
+                <span>大小</span>
+              </div>
+              <div className="file-info-value">
+                {item.size}
+              </div>
+            </div>
+          )}
+
+          {/* 位置 */}
+          <div className="file-info-row">
+            <div className="file-info-label">
+              <Icon icon="lucide:map-pin" width={14} height={14} />
+              <span>位置</span>
+            </div>
+            <div className="file-info-value file-info-value--path" title={directory}>
+              {directory}
+            </div>
+          </div>
+
+          {/* 完整路径 */}
+          <div className="file-info-row">
+            <div className="file-info-label">
+              <Icon icon="lucide:map-pin" width={14} height={14} />
+              <span>完整路径</span>
+            </div>
+            <div className="file-info-value file-info-value--path" title={item.id}>
+              {item.id}
+            </div>
+          </div>
+
+          {/* 修改时间 */}
+          {item.dateModified && (
+            <div className="file-info-row">
+              <div className="file-info-label">
+                <Icon icon="lucide:clock" width={14} height={14} />
+                <span>修改时间</span>
+              </div>
+              <div className="file-info-value">
+                {item.dateModified}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 底部按钮 */}
+        <div className="file-info-dialog-footer">
+          <button className="file-info-dialog-btn" onClick={onClose}>
+            关闭
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/FileList.css

@@ -0,0 +1,226 @@
+/**
+ * FileList - 列表视图样式
+ * 参考 macOS Finder 和 Windows Explorer 的设计
+ */
+
+.file-list {
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.file-list-table {
+  width: 100%;
+  font-size: 13px;
+  text-align: left;
+  border-collapse: collapse;
+}
+
+/* 表头 - 更紧凑 */
+.file-list-header {
+  font-size: 11px;
+  color: #86868b;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  position: sticky;
+  top: 0;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  z-index: 10;
+  user-select: none;
+}
+
+.file-list-header-cell {
+  padding: 6px 12px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  text-align: left;
+  font-weight: 500;
+  transition: background-color 100ms;
+}
+
+.file-list-header-cell:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.file-list-header-cell--name {
+  padding-left: 12px;
+  padding-right: 12px;
+  width: 45%;
+}
+
+.file-list-body {
+  /* 无需额外边框 */
+}
+
+/* 行样式 - 更紧凑 */
+.file-list-row {
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 80ms ease;
+  border-bottom: 1px solid transparent;
+}
+
+/* 可拖拽时的鼠标样式 */
+.file-list-row[draggable="true"] {
+  cursor: grab;
+}
+
+.file-list-row:active {
+  cursor: grabbing;
+}
+
+/* 偶数行 */
+.file-list-row--even {
+  background: transparent;
+}
+
+/* 奇数行 - 轻微斑马纹 */
+.file-list-row--odd {
+  background: rgba(0, 0, 0, 0.015);
+}
+
+/* 悬停效果 */
+.file-list-row--even:hover,
+.file-list-row--odd:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* 选中状态 - macOS 风格整行高亮 */
+.file-list-row--selected {
+  background: #007aff;
+  color: white;
+}
+
+.file-list-row--selected:hover {
+  background: #0066d6;
+}
+
+/* 拖拽悬停 */
+.file-list-row--drag-over {
+  background: rgba(0, 122, 255, 0.15);
+  border-bottom-color: rgba(0, 122, 255, 0.3);
+}
+
+/* 单元格 - 更紧凑的行高 */
+.file-list-cell {
+  padding: 4px 12px;
+  white-space: nowrap;
+  color: #6e6e73;
+  vertical-align: middle;
+  height: 28px;
+}
+
+/* 名称列 - 图标和文字对齐 */
+.file-list-cell--name {
+  padding-left: 12px;
+  padding-right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 选中时单元格颜色 */
+.file-list-cell--selected {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+/* 大小列 - 等宽字体 */
+.file-list-cell--size {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 11px;
+  color: #8e8e93;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 文件名 */
+.file-list-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  color: #1d1d1f;
+  cursor: default;
+  font-weight: 400;
+}
+
+/* 选中后点击文件名可编辑 */
+.file-list-name--selected {
+  color: white;
+  font-weight: 500;
+  cursor: text;
+}
+
+/* 重命名输入框 */
+.file-list-rename-input {
+  flex: 1;
+  font-size: 13px;
+  padding: 2px 6px;
+  border: 1px solid #007aff;
+  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+  background: white;
+  cursor: text;
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .file-list-header {
+    background: rgba(28, 28, 30, 0.92);
+    color: #98989d;
+  }
+
+  .file-list-header-cell {
+    border-bottom-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .file-list-header-cell:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .file-list-row--odd {
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .file-list-row--even:hover,
+  .file-list-row--odd:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  .file-list-row--selected {
+    background: #0a84ff;
+  }
+
+  .file-list-row--selected:hover {
+    background: #0077ed;
+  }
+
+  .file-list-row--drag-over {
+    background: rgba(10, 132, 255, 0.2);
+    border-bottom-color: rgba(10, 132, 255, 0.4);
+  }
+
+  .file-list-cell {
+    color: #98989d;
+  }
+
+  .file-list-cell--size {
+    color: #6e6e73;
+  }
+
+  .file-list-name {
+    color: #f5f5f7;
+  }
+
+  .file-list-name--selected {
+    color: white;
+  }
+
+  .file-list-rename-input {
+    background: #1c1c1e;
+    border-color: #0a84ff;
+    color: #f5f5f7;
+  }
+}