@huyooo/file-explorer-frontend-vue 0.4.2

package/src/components/FileListView.vue

@@ -0,0 +1,321 @@
+<template>
+  <div 
+    class="file-list-view"
+    @click="handleEmptyClick"
+    @contextmenu.prevent="handleEmptyContextMenu"
+  >
+    <!-- 加载中 -->
+    <div v-if="loading" class="file-list-view-loading">
+      <div class="file-list-view-spinner"></div>
+      <p>加载中...</p>
+    </div>
+
+    <!-- 空文件夹 -->
+    <div v-else-if="items.length === 0" class="file-list-view-empty">
+      <FolderOpen :size="64" class="file-list-view-empty-icon" />
+      <p>文件夹为空</p>
+    </div>
+
+    <!-- 网格视图 -->
+    <FileGrid
+      v-else-if="viewMode === 'grid'"
+      :items="items"
+      :selected-ids="selectedIds"
+      :editing-id="editingId"
+      :drag-over-id="dragOverId"
+      :get-app-icon-url="getAppIconUrl"
+      @select="handleSelect"
+      @open="handleOpen"
+      @context-menu="handleContextMenu"
+      @context-menu-empty="handleEmptyContextMenuFromChild"
+      @name-click="handleNameClick"
+      @rename="handleRename"
+      @rename-cancel="handleRenameCancel"
+      @drag-start="handleDragStart"
+      @drag-over="handleDragOver"
+      @drag-leave="handleDragLeave"
+      @drop="handleDrop"
+    />
+
+    <!-- 列表视图 -->
+    <FileList
+      v-else
+      :items="items"
+      :selected-ids="selectedIds"
+      :editing-id="editingId"
+      :drag-over-id="dragOverId"
+      :sort-config="sortConfig"
+      @select="handleSelect"
+      @open="handleOpen"
+      @context-menu="handleContextMenu"
+      @context-menu-empty="handleEmptyContextMenuFromChild"
+      @name-click="handleNameClick"
+      @rename="handleRename"
+      @rename-cancel="handleRenameCancel"
+      @sort="handleSort"
+      @drag-start="handleDragStart"
+      @drag-over="handleDragOver"
+      @drag-leave="handleDragLeave"
+      @drop="handleDrop"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { FolderOpen } from 'lucide-vue-next';
+import FileGrid from './FileGrid.vue';
+import FileList from './FileList.vue';
+import { FileType, type FileItem, type SortConfig, type FileExplorerAdapter } from '../types';
+
+// Props
+const props = withDefaults(defineProps<{
+  /** 文件列表 */
+  items: FileItem[];
+  /** 视图模式 */
+  viewMode?: 'grid' | 'list';
+  /** 是否加载中 */
+  loading?: boolean;
+  /** 文件操作适配器（可选，用于内置操作） */
+  adapter?: FileExplorerAdapter;
+  /** 当前路径（用于内置操作） */
+  currentPath?: string;
+  /** 获取应用程序图标 URL 的函数 */
+  getAppIconUrl?: (item: FileItem) => string | undefined;
+}>(), {
+  viewMode: 'grid',
+  loading: false,
+});
+
+// Events
+const emit = defineEmits<{
+  /** 打开文件/文件夹 */
+  (e: 'open', item: FileItem): void;
+  /** 选中项变化 */
+  (e: 'selection-change', ids: Set<string>, items: FileItem[]): void;
+  /** 右键菜单（文件项） */
+  (e: 'context-menu', event: MouseEvent, item: FileItem): void;
+  /** 右键菜单（空白处） */
+  (e: 'context-menu-empty', event: MouseEvent): void;
+  /** 重命名 */
+  (e: 'rename', item: FileItem, newName: string): void;
+  /** 排序变化 */
+  (e: 'sort-change', config: SortConfig): void;
+  /** 拖拽移动文件 */
+  (e: 'move', sourceIds: string[], targetId: string): void;
+}>();
+
+// 内部状态
+const selectedIds = ref<Set<string>>(new Set());
+const editingId = ref<string | null>(null);
+const dragOverId = ref<string | null>(null);
+const sortConfig = ref<SortConfig>({ field: 'name', direction: 'asc' });
+
+// 获取选中的文件项
+const selectedItems = computed(() => 
+  props.items.filter(item => selectedIds.value.has(item.id))
+);
+
+// 选择处理
+const handleSelect = (item: FileItem, e: MouseEvent) => {
+  if (e.metaKey || e.ctrlKey) {
+    // 多选
+    const newSet = new Set(selectedIds.value);
+    if (newSet.has(item.id)) {
+      newSet.delete(item.id);
+    } else {
+      newSet.add(item.id);
+    }
+    selectedIds.value = newSet;
+  } else if (e.shiftKey && selectedIds.value.size > 0) {
+    // 范围选择
+    const lastId = Array.from(selectedIds.value).pop();
+    const lastIndex = props.items.findIndex(i => i.id === lastId);
+    const currentIndex = props.items.findIndex(i => i.id === item.id);
+    const start = Math.min(lastIndex, currentIndex);
+    const end = Math.max(lastIndex, currentIndex);
+    const newSet = new Set<string>();
+    for (let i = start; i <= end; i++) {
+      newSet.add(props.items[i]!.id);
+    }
+    selectedIds.value = newSet;
+  } else {
+    // 单选
+    selectedIds.value = new Set([item.id]);
+  }
+  
+  emit('selection-change', selectedIds.value, selectedItems.value);
+};
+
+const handleEmptyClick = (e: MouseEvent) => {
+  // 只有点击空白处才清除选择
+  if (e.target === e.currentTarget) {
+    clearSelection();
+  }
+};
+
+// 清除选择
+const clearSelection = () => {
+  selectedIds.value = new Set();
+  emit('selection-change', selectedIds.value, []);
+};
+
+// 打开文件/文件夹
+const handleOpen = (item: FileItem) => {
+  emit('open', item);
+};
+
+// 右键菜单
+const handleContextMenu = (item: FileItem, e: MouseEvent) => {
+  if (!selectedIds.value.has(item.id)) {
+    selectedIds.value = new Set([item.id]);
+    emit('selection-change', selectedIds.value, [item]);
+  }
+  emit('context-menu', e, item);
+};
+
+const handleEmptyContextMenu = (e: MouseEvent) => {
+  // 检查是否点击了文件项
+  const target = e.target as HTMLElement;
+  if (!target.closest('.file-grid-item') && !target.closest('.file-list-row')) {
+    clearSelection();
+    emit('context-menu-empty', e);
+  }
+};
+
+// 从子组件触发的空白处右键菜单
+const handleEmptyContextMenuFromChild = (e: MouseEvent) => {
+  clearSelection();
+  emit('context-menu-empty', e);
+};
+
+// 名称点击（用于重命名）
+const handleNameClick = (item: FileItem, e: MouseEvent) => {
+  if (selectedIds.value.has(item.id) && selectedIds.value.size === 1) {
+    setTimeout(() => {
+      if (selectedIds.value.has(item.id)) {
+        editingId.value = item.id;
+      }
+    }, 500);
+  }
+};
+
+// 重命名
+const handleRename = (item: FileItem, newName: string) => {
+  if (newName && newName !== item.name) {
+    emit('rename', item, newName);
+  }
+  editingId.value = null;
+};
+
+const handleRenameCancel = () => {
+  editingId.value = null;
+};
+
+// 排序
+const handleSort = (field: string) => {
+  if (sortConfig.value.field === field) {
+    sortConfig.value.direction = sortConfig.value.direction === 'asc' ? 'desc' : 'asc';
+  } else {
+    sortConfig.value.field = field as SortConfig['field'];
+    sortConfig.value.direction = 'asc';
+  }
+  emit('sort-change', { ...sortConfig.value });
+};
+
+// 拖拽
+const handleDragStart = (e: DragEvent, item: FileItem) => {
+  if (!selectedIds.value.has(item.id)) {
+    selectedIds.value = new Set([item.id]);
+    emit('selection-change', selectedIds.value, [item]);
+  }
+  e.dataTransfer?.setData('text/plain', JSON.stringify([...selectedIds.value]));
+};
+
+const handleDragOver = (e: DragEvent, item: FileItem) => {
+  if (item.type === FileType.FOLDER && !selectedIds.value.has(item.id)) {
+    dragOverId.value = item.id;
+  }
+};
+
+const handleDragLeave = () => {
+  dragOverId.value = null;
+};
+
+const handleDrop = (e: DragEvent, targetItem: FileItem) => {
+  dragOverId.value = null;
+  
+  if (targetItem.type !== FileType.FOLDER) return;
+  
+  const data = e.dataTransfer?.getData('text/plain');
+  if (!data) return;
+  
+  try {
+    const draggedIds: string[] = JSON.parse(data);
+    if (draggedIds.includes(targetItem.id)) return;
+    
+    emit('move', draggedIds, targetItem.id);
+    clearSelection();
+  } catch (error) {
+    console.error('拖拽解析失败:', error);
+  }
+};
+
+// 开始重命名（供外部调用）
+const startRename = (id: string) => {
+  editingId.value = id;
+};
+
+// 全选
+const selectAll = () => {
+  selectedIds.value = new Set(props.items.map(i => i.id));
+  emit('selection-change', selectedIds.value, props.items);
+};
+
+// 暴露方法
+defineExpose({
+  clearSelection,
+  startRename,
+  selectAll,
+  selectedIds,
+  selectedItems,
+});
+</script>
+
+<style scoped>
+.file-list-view {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+  user-select: none;
+  min-height: 0;
+}
+
+.file-list-view-loading,
+.file-list-view-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: rgb(156, 163, 175);
+  gap: 16px;
+}
+
+.file-list-view-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(156, 163, 175, 0.2);
+  border-top-color: rgb(59, 130, 246);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.file-list-view-empty-icon {
+  opacity: 0.3;
+}
+</style>

package/src/components/FileSidebar.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="file-sidebar">
+    <div v-for="section in sections" :key="section.id" class="file-sidebar-section">
+      <div class="file-sidebar-section-title">{{ section.title }}</div>
+      <ul class="file-sidebar-list">
+        <li
+          v-for="item in section.items"
+          :key="item.id"
+          @click="handleNavigate(item)"
+          :class="[
+            'file-sidebar-item',
+            activeId === item.id ? 'file-sidebar-item--active' : ''
+          ]"
+        >
+          <Icon 
+            :icon="getIconName(item.icon)" 
+            :width="18" 
+            :height="18" 
+            :class="activeId === item.id ? 'file-sidebar-item-icon--active' : 'file-sidebar-item-icon'"
+          />
+          <span>{{ item.label }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import type { SidebarItem } from '../types';
+
+interface SidebarSection {
+  id: string;
+  title: string;
+  items: SidebarItem[];
+}
+
+interface Props {
+  sections: SidebarSection[];
+  activeId?: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  navigate: [item: SidebarItem];
+}>();
+
+// 将 Lucide 图标名称转换为 Iconify 格式
+const getIconName = (iconName?: string): string => {
+  if (!iconName) return 'mdi:folder';
+  // 如果已经是 Iconify 格式，直接返回
+  if (iconName.includes(':')) return iconName;
+  // 否则转换为 lucide: 格式
+  return `lucide:${iconName.toLowerCase()}`;
+};
+
+const handleNavigate = (item: SidebarItem) => {
+  emit('navigate', item);
+};
+</script>
+
+<style scoped>
+.file-sidebar {
+  width: 12rem;
+  background: rgba(243, 244, 246, 0.5);
+  backdrop-filter: blur(24px);
+  border-right: 1px solid rgba(229, 231, 233, 0.5);
+  display: flex;
+  flex-direction: column;
+  padding-top: 2rem;
+  padding-bottom: 1rem;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  user-select: none;
+  -webkit-app-region: drag; /* 整个侧边栏可拖拽 */
+}
+
+/* 自定义滚动条样式 */
+.file-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.file-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.file-sidebar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.file-sidebar::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.file-sidebar-section {
+  margin-bottom: 0;
+  -webkit-app-region: no-drag; /* section 内容区域不可拖拽 */
+}
+
+.file-sidebar-section-title {
+  padding: 0 1rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgb(107, 114, 128);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.file-sidebar-section + .file-sidebar-section .file-sidebar-section-title {
+  margin-top: 1.5rem;
+}
+
+.file-sidebar-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0 0.5rem;
+  margin: 0;
+}
+
+.file-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgb(75, 85, 99);
+  transition: all 200ms;
+  /* no-drag 已由 section 继承 */
+}
+
+.file-sidebar-item:hover {
+  background: rgba(229, 231, 233, 0.5);
+  color: black;
+}
+
+.file-sidebar-item--active {
+  background: rgba(209, 213, 219, 0.6);
+  color: black;
+}
+
+.file-sidebar-item-icon {
+  color: rgb(107, 114, 128);
+}
+
+.file-sidebar-item-icon--active {
+  color: rgb(37, 99, 235);
+}
+</style>