@huyooo/file-explorer-frontend-vue 0.4.2

package/src/components/FileGrid.vue

@@ -0,0 +1,504 @@
+<template>
+  <div class="file-grid" @contextmenu.prevent="handleEmptyContextMenu">
+    <div
+      v-for="item in items"
+      :key="item.id"
+      :draggable="editingId !== item.id"
+      @dragstart="$emit('dragStart', $event, item)"
+      @dragover.prevent="$emit('dragOver', $event, item)"
+      @dragleave="$emit('dragLeave', $event)"
+      @drop.prevent="$emit('drop', $event, item)"
+      @click.stop="$emit('select', item, $event)"
+      @dblclick.stop="$emit('open', item)"
+      @contextmenu.prevent.stop="$emit('contextMenu', item, $event)"
+      :class="[
+        'file-grid-item',
+        selectedIds.has(item.id) && editingId !== item.id
+          ? 'file-grid-item--selected' 
+          : dragOverId === item.id 
+            ? 'file-grid-item--drag-over' 
+            : 'file-grid-item--normal'
+      ]"
+    >
+      <div class="file-grid-item-icon">
+        <!-- 应用程序图标 -->
+        <img 
+          v-if="item.type === FileType.APPLICATION && getAppIconUrl?.(item)"
+          :src="getAppIconUrl(item)" 
+          :alt="item.name" 
+          :class="[
+            'file-grid-item-thumbnail file-grid-item-thumbnail--application',
+            selectedIds.has(item.id) && editingId !== item.id ? 'file-grid-item-thumbnail--selected' : ''
+          ]"
+        />
+        <!-- 图片/视频缩略图 -->
+        <template v-else-if="hasThumbnail(item)">
+          <!-- 视频类型必须有缩略图，如果没有缩略图说明不应该被识别为视频，按普通文件处理 -->
+          <div v-if="item.type === FileType.VIDEO && item.thumbnailUrl" class="file-grid-item-thumbnail file-grid-item-thumbnail--video">
+            <img 
+              :src="item.thumbnailUrl"
+              class="file-grid-item-thumbnail"
+              :alt="item.name"
+              @error="$emit('thumbnailError', item, $event)"
+            />
+            <div class="file-grid-item-video-play">
+              <div class="file-grid-item-video-play-icon" />
+            </div>
+          </div>
+          <!-- 图片：永远只显示缩略图，不显示原始 URL -->
+          <img 
+            v-else-if="item.thumbnailUrl"
+            :src="item.thumbnailUrl" 
+            :alt="item.name" 
+            class="file-grid-item-thumbnail"
+            @error="$emit('thumbnailError', item, $event)"
+          />
+        </template>
+        <FileIcon 
+          v-else
+          :type="item.type" 
+          :name="item.name"
+          :size="48" 
+        />
+      </div>
+      
+      <div class="file-grid-item-name-wrapper">
+        <input
+          v-if="editingId === item.id"
+          type="text"
+          class="file-grid-item-rename-input"
+          :value="item.name"
+          @blur="handleRename(item, $event)"
+          @keydown.enter="handleEnterKey"
+          @keydown.escape="handleEscapeKey"
+          ref="renameInput"
+          autofocus
+        />
+        <span 
+          v-else
+          @click.stop="$emit('nameClick', item, $event)"
+          :class="[
+            'file-grid-item-name',
+            selectedIds.has(item.id) ? 'file-grid-item-name--selected' : ''
+          ]"
+          :title="item.name"
+        >
+          <template v-if="getFileNameParts(item).ext">
+            <span class="file-grid-item-name-base">{{ getFileNameParts(item).baseName }}</span>
+            <span class="file-grid-item-name-ext">{{ getFileNameParts(item).ext }}</span>
+          </template>
+          <template v-else>{{ item.name }}</template>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { FileItem } from '../types';
+import { FileType } from '../types';
+import FileIcon from './FileIcon.vue';
+
+/**
+ * 分离文件名和扩展名
+ */
+function splitFileName(name: string, isFolder: boolean): { baseName: string; ext: string } {
+  if (isFolder) {
+    return { baseName: name, ext: '' };
+  }
+  const lastDot = name.lastIndexOf('.');
+  if (lastDot <= 0) {
+    return { baseName: name, ext: '' };
+  }
+  return {
+    baseName: name.substring(0, lastDot),
+    ext: name.substring(lastDot),
+  };
+}
+
+/**
+ * 获取文件名各部分（带缓存）
+ */
+const fileNameCache = new Map<string, { baseName: string; ext: string }>();
+function getFileNameParts(item: FileItem) {
+  const key = `${item.id}-${item.name}`;
+  if (!fileNameCache.has(key)) {
+    fileNameCache.set(key, splitFileName(item.name, item.type === FileType.FOLDER));
+  }
+  return fileNameCache.get(key)!;
+}
+
+interface Props {
+  items: FileItem[];
+  selectedIds: Set<string>;
+  editingId?: string | null;
+  dragOverId?: string | null;
+  /** 获取应用程序图标 URL 的函数 */
+  getAppIconUrl?: (item: FileItem) => string | undefined;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  select: [item: FileItem, e: MouseEvent];
+  open: [item: FileItem];
+  contextMenu: [item: FileItem, e: MouseEvent];
+  contextMenuEmpty: [e: MouseEvent];
+  nameClick: [item: FileItem, e: MouseEvent];
+  rename: [item: FileItem, newName: string];
+  renameCancel: [item: FileItem];
+  dragStart: [e: DragEvent, item: FileItem];
+  dragOver: [e: DragEvent, item: FileItem];
+  dragLeave: [e: DragEvent];
+  drop: [e: DragEvent, item: FileItem];
+  thumbnailError: [item: FileItem, e: Event];
+}>();
+
+/**
+ * 空白处右键菜单
+ */
+const handleEmptyContextMenu = (e: MouseEvent) => {
+  // 检查是否点击了文件项（文件项的 contextmenu 有 .stop，不会到这里）
+  const target = e.target as HTMLElement;
+  // 如果点击的不是文件项内部元素，则触发空白处菜单
+  if (!target.closest('.file-grid-item')) {
+    emit('contextMenuEmpty', e);
+  }
+};
+
+/**
+ * 判断是否有缩略图或应用程序图标
+ */
+const hasThumbnail = (item: FileItem): boolean => {
+  // 应用程序图标
+  if (item.type === FileType.APPLICATION && props.getAppIconUrl?.(item)) {
+    return true;
+  }
+  // 图片：必须有缩略图才显示，永远不显示原始 URL
+  if (item.type === FileType.IMAGE) {
+    return !!item.thumbnailUrl;
+  }
+  // 视频：必须有缩略图才显示，如果没有缩略图说明不应该被识别为视频
+  if (item.type === FileType.VIDEO) {
+    return !!item.thumbnailUrl;
+  }
+  return false;
+};
+
+/**
+ * 视频悬停播放
+ */
+const handleVideoHover = (e: Event, isHover: boolean) => {
+  const video = e.target as HTMLVideoElement;
+  if (isHover) {
+    video.play().catch(() => {});
+  } else {
+    video.pause();
+    video.currentTime = 0;
+  }
+};
+
+/**
+ * 处理重命名（blur 事件）
+ */
+const handleRename = (item: FileItem, e: Event) => {
+  const input = e.target as HTMLInputElement;
+  const newName = input.value.trim();
+  if (newName && newName !== item.name) {
+    emit('rename', item, newName);
+  } else {
+    emit('renameCancel', item);
+  }
+};
+
+/**
+ * Enter 键保存
+ */
+const handleEnterKey = (e: KeyboardEvent) => {
+  (e.target as HTMLInputElement).blur();
+};
+
+/**
+ * Escape 键取消
+ */
+const handleEscapeKey = (e: KeyboardEvent) => {
+  const input = e.target as HTMLInputElement;
+  // 恢复原始值，这样 blur 时会触发 renameCancel
+  const item = props.items.find(i => i.id === props.editingId);
+  if (item) {
+    input.value = item.name;
+  }
+  input.blur();
+};
+</script>
+
+<style scoped>
+/**
+ * FileGrid - 网格视图样式
+ * 参考 macOS Finder 和 Windows Explorer 的设计
+ */
+
+.file-grid {
+  display: grid;
+  /* macOS Finder 默认约 90-100px */
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 6px;
+  padding: 12px;
+  align-content: start;
+  grid-auto-rows: min-content;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 网格项 - 更紧凑的布局 */
+.file-grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 120ms ease, border-color 120ms ease;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  width: 100%;
+}
+
+/* 拖拽时的鼠标样式 */
+.file-grid-item[draggable="true"] {
+  cursor: grab;
+}
+
+.file-grid-item:active {
+  cursor: grabbing;
+}
+
+/* 悬停效果 - 类似 macOS */
+.file-grid-item--normal:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* 选中状态 - macOS 风格的蓝色高亮 */
+.file-grid-item--selected {
+  background: rgba(0, 122, 255, 0.12);
+  border-color: rgba(0, 122, 255, 0.2);
+}
+
+.file-grid-item--selected:hover {
+  background: rgba(0, 122, 255, 0.16);
+}
+
+/* 拖拽悬停 */
+.file-grid-item--drag-over {
+  background: rgba(0, 122, 255, 0.2);
+  border-color: rgba(0, 122, 255, 0.4);
+}
+
+/* 图标/缩略图容器 - 统一尺寸 */
+.file-grid-item-icon {
+  position: relative;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 统一 48x48 尺寸，更紧凑 */
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+}
+
+/* 缩略图样式 - 统一尺寸和圆角 */
+/* 缩略图保持原图比例，使用 object-fit: cover 填充固定尺寸容器 */
+.file-grid-item-thumbnail {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+  /* 轻微阴影增加层次感 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  background: #f5f5f5;
+  /* 确保图片能作为加载占位符，平滑过渡到原图 */
+  display: block;
+}
+
+/* 应用程序图标 - 无背景 */
+.file-grid-item-thumbnail--application {
+  object-fit: contain;
+  background: transparent;
+  box-shadow: none;
+  border-radius: 10px;
+}
+
+.file-grid-item-thumbnail--selected {
+  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2), 0 0 0 2px rgba(0, 122, 255, 0.3);
+}
+
+/* 视频缩略图容器 */
+.file-grid-item-thumbnail--video {
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #000;
+  width: 48px;
+  height: 48px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 视频缩略图内的图片 - 保持比例，填充容器 */
+.file-grid-item-thumbnail--video > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+}
+
+/* 视频播放图标 */
+.file-grid-item-video-play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0.9;
+  transition: opacity 150ms;
+}
+
+.file-grid-item-thumbnail--video:hover .file-grid-item-video-play {
+  opacity: 0;
+}
+
+.file-grid-item-video-play-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-grid-item-video-play-icon::before {
+  content: '';
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-left: 7px solid white;
+  border-bottom: 4px solid transparent;
+  margin-left: 2px;
+}
+
+/* 文件名容器 */
+.file-grid-item-name-wrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  min-height: 0;
+}
+
+/* 文件名 - macOS 风格，最多2行，保留扩展名 */
+.file-grid-item-name {
+  font-size: 12px;
+  line-height: 1.3;
+  text-align: center;
+  padding: 2px;
+  border-radius: 3px;
+  user-select: none;
+  cursor: default;
+  transition: color 100ms;
+  color: #1d1d1f;
+  width: 100%;
+  /* 使用 flexbox 布局，让扩展名始终显示 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 0;
+}
+
+/* 文件名主体部分 - 可换行，最多1行 */
+.file-grid-item-name-base {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+  text-overflow: ellipsis;
+  width: 100%;
+  text-align: center;
+}
+
+/* 扩展名部分 - 始终显示，不换行 */
+.file-grid-item-name-ext {
+  display: block;
+  white-space: nowrap;
+  flex-shrink: 0;
+  text-align: center;
+}
+
+/* 选中后点击文件名可编辑 */
+.file-grid-item-name--selected {
+  cursor: text;
+}
+
+/* 重命名输入框 */
+.file-grid-item-rename-input {
+  width: 100%;
+  font-size: 11px;
+  line-height: 1.3;
+  text-align: center;
+  padding: 2px 4px;
+  border: 1px solid #007aff;
+  border-radius: 3px;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+  background: white;
+  cursor: text;
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .file-grid-item--normal:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  .file-grid-item--selected {
+    background: rgba(10, 132, 255, 0.25);
+    border-color: rgba(10, 132, 255, 0.3);
+  }
+
+  .file-grid-item--selected:hover {
+    background: rgba(10, 132, 255, 0.3);
+  }
+
+  .file-grid-item--drag-over {
+    background: rgba(10, 132, 255, 0.35);
+    border-color: rgba(10, 132, 255, 0.5);
+  }
+
+  .file-grid-item-thumbnail {
+    background: #2c2c2e;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  .file-grid-item-name {
+    color: #f5f5f7;
+  }
+
+  .file-grid-item-rename-input {
+    background: #1c1c1e;
+    border-color: #0a84ff;
+    color: #f5f5f7;
+  }
+}
+</style>

package/src/components/FileIcon.vue

@@ -0,0 +1,132 @@
+<template>
+  <div :class="className">
+    <Icon :icon="iconName" :width="size" :height="size" :class="iconClass" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+import { FileType } from '../types';
+import { getFileTypeIcon } from '../utils/fileTypeIcon';
+import { getFolderTypeIcon } from '../utils/folderTypeIcon';
+
+interface Props {
+  type: FileType;
+  name?: string;
+  className?: string;
+  size?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  className: '',
+  size: 24
+});
+
+const iconName = computed(() => {
+  if (props.type === FileType.FOLDER) {
+    // 文件夹：先查特定类型图标，否则用默认 folder
+    const folderIcon = props.name ? getFolderTypeIcon(props.name) : undefined;
+    return folderIcon ?? 'flat-color-icons:folder';
+  }
+  
+  // 如果有文件名，使用 material-icon-theme 图标映射（传递 type 作为兜底）
+  if (props.name) {
+    return getFileTypeIcon(props.name, props.type);
+  }
+  
+  // 回退逻辑（没有文件名时）
+  switch (props.type) {
+    case FileType.IMAGE:
+      return 'material-icon-theme:image';
+    case FileType.TEXT:
+      return 'material-icon-theme:document';
+    case FileType.CODE:
+      return 'material-icon-theme:javascript';
+    case FileType.MUSIC:
+      return 'material-icon-theme:audio';
+    case FileType.VIDEO:
+      return 'material-icon-theme:video';
+    case FileType.PDF:
+      return 'material-icon-theme:pdf';
+    case FileType.DOCUMENT:
+      return 'material-icon-theme:word';
+    case FileType.APPLICATION:
+      return 'material-icon-theme:exe';
+    case FileType.ARCHIVE:
+      return 'material-icon-theme:zip';
+    default:
+      return 'material-icon-theme:document';
+  }
+});
+
+const iconClass = computed(() => {
+  const base = 'file-icon';
+  switch (props.type) {
+    case FileType.FOLDER:
+      return `${base} file-icon--folder`;
+    case FileType.IMAGE:
+      return `${base} file-icon--image`;
+    case FileType.TEXT:
+      return `${base} file-icon--text`;
+    case FileType.CODE:
+      return `${base} file-icon--code`;
+    case FileType.MUSIC:
+      return `${base} file-icon--music`;
+    case FileType.VIDEO:
+      return `${base} file-icon--video`;
+    case FileType.PDF:
+    case FileType.DOCUMENT:
+      return `${base} file-icon--pdf`;
+    case FileType.APPLICATION:
+      return `${base} file-icon--application`;
+    case FileType.ARCHIVE:
+      return `${base} file-icon--archive`;
+    default:
+      return `${base} file-icon--default`;
+  }
+});
+</script>
+
+<style scoped>
+.file-icon--folder {
+  color: rgb(96, 165, 250);
+  fill: rgb(96, 165, 250);
+}
+
+.file-icon--image {
+  color: rgb(168, 85, 247);
+}
+
+.file-icon--text {
+  color: rgb(107, 114, 128);
+}
+
+.file-icon--code {
+  color: rgb(34, 197, 94);
+}
+
+.file-icon--music {
+  color: rgb(248, 113, 113);
+}
+
+.file-icon--video {
+  color: rgb(37, 99, 235);
+}
+
+.file-icon--pdf {
+  color: rgb(220, 38, 38);
+}
+
+.file-icon--application {
+  color: rgb(139, 92, 246);
+}
+
+.file-icon--archive {
+  color: rgb(234, 179, 8);
+}
+
+.file-icon--default {
+  color: rgb(156, 163, 175);
+}
+</style>