@huyooo/file-explorer-frontend-vue 0.4.2

package/src/components/FileList.vue

@@ -0,0 +1,421 @@
+<template>
+  <div class="file-list" @contextmenu.prevent="handleEmptyContextMenu">
+    <table class="file-list-table">
+      <thead class="file-list-header">
+        <tr>
+          <th 
+            class="file-list-header-cell file-list-header-cell--name"
+            @click="$emit('sort', 'name')"
+          >
+            名称
+            <SortIndicator v-if="sortConfig?.field === 'name'" :direction="sortConfig.direction" />
+          </th>
+          <th 
+            class="file-list-header-cell"
+            @click="$emit('sort', 'dateModified')"
+          >
+            修改日期
+            <SortIndicator v-if="sortConfig?.field === 'dateModified'" :direction="sortConfig.direction" />
+          </th>
+          <th 
+            class="file-list-header-cell"
+            @click="$emit('sort', 'size')"
+          >
+            大小
+            <SortIndicator v-if="sortConfig?.field === 'size'" :direction="sortConfig.direction" />
+          </th>
+          <th 
+            class="file-list-header-cell"
+            @click="$emit('sort', 'type')"
+          >
+            类型
+            <SortIndicator v-if="sortConfig?.field === 'type'" :direction="sortConfig.direction" />
+          </th>
+        </tr>
+      </thead>
+      <tbody class="file-list-body">
+        <tr
+          v-for="(item, index) 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-list-row',
+            selectedIds.has(item.id) 
+              ? 'file-list-row--selected' 
+              : dragOverId === item.id 
+                ? 'file-list-row--drag-over'
+                : index % 2 === 0 
+                  ? 'file-list-row--even' 
+                  : 'file-list-row--odd'
+          ]"
+        >
+          <td class="file-list-cell file-list-cell--name">
+            <FileIcon :type="item.type" :name="item.name" :size="16" />
+            <input
+              v-if="editingId === item.id"
+              type="text"
+              class="file-list-rename-input"
+              :value="item.name"
+              @blur="handleRename(item, $event)"
+              @keydown.enter="handleEnterKey"
+              @keydown.escape="handleEscapeKey"
+              autofocus
+            />
+            <span 
+              v-else
+              @click.stop="$emit('nameClick', item, $event)"
+              :class="[
+                'file-list-name',
+                selectedIds.has(item.id) ? 'file-list-name--selected' : ''
+              ]"
+            >
+              {{ item.name }}
+            </span>
+          </td>
+          <td :class="['file-list-cell', selectedIds.has(item.id) ? 'file-list-cell--selected' : '']">
+            {{ item.dateModified || '--' }}
+          </td>
+          <td :class="['file-list-cell file-list-cell--size', selectedIds.has(item.id) ? 'file-list-cell--selected' : '']">
+            {{ item.size || '--' }}
+          </td>
+          <td :class="['file-list-cell', selectedIds.has(item.id) ? 'file-list-cell--selected' : '']">
+            {{ getTypeLabel(item.type) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FileItem, SortConfig } from '../types';
+import { FileType } from '../types';
+import FileIcon from './FileIcon.vue';
+import SortIndicator from './SortIndicator.vue';
+
+interface Props {
+  items: FileItem[];
+  selectedIds: Set<string>;
+  sortConfig?: SortConfig;
+  editingId?: string | null;
+  dragOverId?: string | null;
+}
+
+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];
+  sort: [field: string];
+  dragStart: [e: DragEvent, item: FileItem];
+  dragOver: [e: DragEvent, item: FileItem];
+  dragLeave: [e: DragEvent];
+  drop: [e: DragEvent, item: FileItem];
+}>();
+
+/**
+ * 空白处右键菜单
+ */
+const handleEmptyContextMenu = (e: MouseEvent) => {
+  // 只有点击容器本身（不是表格行）时才触发
+  const target = e.target as HTMLElement;
+  if (!target.closest('tr')) {
+    emit('contextMenuEmpty', e);
+  }
+};
+
+/**
+ * 获取类型标签
+ */
+const getTypeLabel = (type: FileType): string => {
+  const labels: Record<FileType, string> = {
+    [FileType.FOLDER]: '文件夹',
+    [FileType.FILE]: '文件',
+    [FileType.IMAGE]: '图片',
+    [FileType.VIDEO]: '视频',
+    [FileType.MUSIC]: '音频',
+    [FileType.DOCUMENT]: '文档',
+    [FileType.CODE]: '代码',
+    [FileType.TEXT]: '文本',
+    [FileType.PDF]: 'PDF',
+    [FileType.ARCHIVE]: '压缩包',
+    [FileType.APPLICATION]: '应用程序',
+    [FileType.UNKNOWN]: '未知'
+  };
+  return labels[type] || type;
+};
+
+/**
+ * 处理重命名（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>
+/**
+ * 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;
+  }
+}
+</style>