@huyooo/file-explorer-frontend-vue 0.4.2

package/src/components/Window.vue

@@ -0,0 +1,561 @@
+<template>
+  <Teleport to="body">
+    <div 
+      class="window-overlay"
+      @click="handleBackdropClick"
+    >
+      <div 
+        ref="windowContainerRef"
+        class="window-container"
+        :style="windowStyle"
+        @click.stop
+      >
+        <!-- Title Bar -->
+        <div 
+          v-if="showTitleBar"
+          class="window-title-bar draggable-area"
+          @mousedown="handleDragStart"
+        >
+          <div class="window-controls">
+            <button 
+              @click.stop="handleClose" 
+              class="window-control-button window-control-button--close"
+            >
+              <X :size="7" class="window-control-icon" />
+            </button>
+            <button 
+              v-if="showMinimize"
+              @click.stop="handleMinimize" 
+              class="window-control-button window-control-button--minimize"
+            >
+              <Minus :size="7" class="window-control-icon" />
+            </button>
+            <button 
+              v-if="showMaximize"
+              @click.stop="handleMaximize" 
+              class="window-control-button window-control-button--maximize"
+            >
+              <Maximize2 :size="7" class="window-control-icon" />
+            </button>
+          </div>
+          
+          <div class="window-title-info">
+            <slot name="title">
+              <span class="window-title-text">{{ title }}</span>
+            </slot>
+          </div>
+
+          <div class="window-title-actions">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="window-content">
+          <slot></slot>
+        </div>
+
+        <!-- Resize Handles -->
+        <template v-if="resizable">
+          <div 
+            class="window-resize-handle window-resize-handle--n"
+            @mousedown="(e) => handleResizeStart(e, 'n')"
+          ></div>
+          <div 
+            class="window-resize-handle window-resize-handle--s"
+            @mousedown="(e) => handleResizeStart(e, 's')"
+          ></div>
+          <div 
+            class="window-resize-handle window-resize-handle--e"
+            @mousedown="(e) => handleResizeStart(e, 'e')"
+          ></div>
+          <div 
+            class="window-resize-handle window-resize-handle--w"
+            @mousedown="(e) => handleResizeStart(e, 'w')"
+          ></div>
+          <div 
+            class="window-resize-handle window-resize-handle--ne"
+            @mousedown="(e) => handleResizeStart(e, 'ne')"
+          ></div>
+          <div 
+            class="window-resize-handle window-resize-handle--nw"
+            @mousedown="(e) => handleResizeStart(e, 'nw')"
+          ></div>
+          <div 
+            class="window-resize-handle window-resize-handle--se"
+            @mousedown="(e) => handleResizeStart(e, 'se')"
+          ></div>
+          <div 
+            class="window-resize-handle window-resize-handle--sw"
+            @mousedown="(e) => handleResizeStart(e, 'sw')"
+          ></div>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { X, Minus, Maximize2 } from 'lucide-vue-next';
+import { useWindowDrag } from '../composables/useWindowDrag';
+import { useWindowResize } from '../composables/useWindowResize';
+
+interface Props {
+  title?: string;
+  showTitleBar?: boolean;
+  showMinimize?: boolean;
+  showMaximize?: boolean;
+  draggable?: boolean;
+  resizable?: boolean;
+  /** 窗口宽度，'auto' 表示自适应内容，'fit-content' 也表示自适应 */
+  width?: string | number;
+  /** 窗口高度，'auto' 表示自适应内容，'fit-content' 也表示自适应 */
+  height?: string | number;
+  minWidth?: string | number;
+  minHeight?: string | number;
+  maxWidth?: string | number;
+  maxHeight?: string | number;
+  closeOnBackdrop?: boolean;
+  /** 是否自适应内容大小（不使用固定初始尺寸） */
+  fitContent?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showTitleBar: true,
+  showMinimize: false,
+  showMaximize: false,
+  draggable: true,
+  resizable: true,
+  closeOnBackdrop: true,
+  width: 'auto',
+  height: 'auto',
+  minWidth: 300,
+  minHeight: 200,
+  maxWidth: '80vw',
+  maxHeight: '80vh',
+  fitContent: false
+});
+
+const emit = defineEmits<{
+  close: [];
+  minimize: [];
+  maximize: [];
+}>();
+
+const windowContainerRef = ref<HTMLElement | null>(null);
+const windowDrag = props.draggable ? useWindowDrag() : null;
+
+/**
+ * 是否使用自适应内容模式
+ */
+const isAutoSize = computed(() => {
+  return props.fitContent || 
+         props.width === 'auto' || 
+         props.width === 'fit-content' ||
+         props.height === 'auto' ||
+         props.height === 'fit-content';
+});
+
+/**
+ * 计算初始尺寸
+ */
+const getInitialSize = () => {
+  // 自适应模式不设置固定初始尺寸
+  if (isAutoSize.value) {
+    return { initialWidth: 0, initialHeight: 0 };
+  }
+  
+  const defaultWidth = 600;
+  const defaultHeight = 500;
+  
+  let initialWidth = defaultWidth;
+  let initialHeight = defaultHeight;
+  
+  if (props.width !== 'auto' && props.width !== 'fit-content') {
+    initialWidth = typeof props.width === 'number' ? props.width : parseInt(props.width);
+  }
+  if (props.height !== 'auto' && props.height !== 'fit-content') {
+    initialHeight = typeof props.height === 'number' ? props.height : parseInt(props.height);
+  }
+  
+  return { initialWidth, initialHeight };
+};
+
+/**
+ * 解析尺寸限制
+ */
+const parseSize = (size: string | number, defaultPx: number): number => {
+  if (typeof size === 'number') return size;
+  if (size.endsWith('px')) return parseInt(size);
+  if (size.endsWith('vw')) return (parseInt(size) / 100) * window.innerWidth;
+  if (size.endsWith('vh')) return (parseInt(size) / 100) * window.innerHeight;
+  return defaultPx;
+};
+
+const { initialWidth, initialHeight } = getInitialSize();
+const minW = parseSize(props.minWidth, 500);
+const minH = parseSize(props.minHeight, 350);
+const maxW = parseSize(props.maxWidth, window.innerWidth * 0.8);
+const maxH = parseSize(props.maxHeight, window.innerHeight * 0.8);
+
+const windowResize = props.resizable 
+  ? useWindowResize(initialWidth, initialHeight, minW, minH, maxW, maxH)
+  : null;
+
+const windowStyle = computed(() => {
+  const baseStyle: Record<string, string> = {
+    left: '50%',
+    top: '50%',
+  };
+
+  // 计算位置和缩放（组合 transform）
+  let translateX = '-50%';
+  let translateY = '-50%';
+  
+  if (props.draggable && windowDrag) {
+    translateX = `calc(-50% + ${windowDrag.position.value.x}px)`;
+    translateY = `calc(-50% + ${windowDrag.position.value.y}px)`;
+  }
+  
+  baseStyle.transform = `translate(${translateX}, ${translateY})`;
+  baseStyle.transformOrigin = 'center center';
+
+  // 自适应模式：不设置固定宽高，让内容决定
+  if (isAutoSize.value) {
+    // 只有在用户手动调整过大小时才应用
+    if (props.resizable && windowResize && windowResize.width.value > 0) {
+      baseStyle.width = `${windowResize.width.value}px`;
+      baseStyle.height = `${windowResize.height.value}px`;
+    }
+    // 否则不设置 width/height，让 CSS fit-content 生效
+  } else {
+    // 固定尺寸模式
+    if (props.resizable && windowResize) {
+      baseStyle.width = `${windowResize.width.value}px`;
+      baseStyle.height = `${windowResize.height.value}px`;
+    } else {
+      if (props.width !== 'auto' && props.width !== 'fit-content') {
+        baseStyle.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
+      }
+      if (props.height !== 'auto' && props.height !== 'fit-content') {
+        baseStyle.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
+      }
+    }
+  }
+  
+  if (props.minWidth) {
+    baseStyle.minWidth = typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth;
+  }
+  if (props.minHeight) {
+    baseStyle.minHeight = typeof props.minHeight === 'number' ? `${props.minHeight}px` : props.minHeight;
+  }
+  if (props.maxWidth) {
+    baseStyle.maxWidth = typeof props.maxWidth === 'number' ? `${props.maxWidth}px` : props.maxWidth;
+  }
+  if (props.maxHeight) {
+    baseStyle.maxHeight = typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight;
+  }
+
+  return baseStyle;
+});
+
+const handleBackdropClick = (e: MouseEvent) => {
+  if (props.closeOnBackdrop && e.target === e.currentTarget) {
+    emit('close');
+  }
+};
+
+const handleDragStart = (e: MouseEvent) => {
+  if (props.draggable && windowDrag) {
+    windowDrag.startDrag(e);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleMinimize = () => {
+  emit('minimize');
+};
+
+const handleMaximize = () => {
+  emit('maximize');
+};
+
+const handleResizeStart = (e: MouseEvent, direction: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw') => {
+  if (!props.resizable || !windowResize || !windowContainerRef.value) return;
+  
+  const rect = windowContainerRef.value.getBoundingClientRect();
+  const currentWidth = rect.width;
+  const currentHeight = rect.height;
+  
+  windowResize.startResize(e, direction, currentWidth, currentHeight);
+};
+
+/**
+ * ESC 键关闭
+ */
+onMounted(() => {
+  const handleEsc = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      emit('close');
+    }
+  };
+  window.addEventListener('keydown', handleEsc);
+  
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleEsc);
+  });
+});
+</script>
+
+<style scoped>
+.window-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.3);
+  animation: fade-in 200ms ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.window-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(24px);
+  border: 1px solid rgb(229, 231, 233);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  animation: window-fade-in 200ms ease-out;
+}
+
+.window-title-bar {
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  border-bottom: 1px solid rgb(229, 231, 233);
+  flex-shrink: 0;
+  user-select: none;
+  background: rgba(249, 250, 251, 0.8);
+  z-index: 20;
+  cursor: grab;
+}
+
+.window-title-bar:active {
+  cursor: grabbing;
+}
+
+.window-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.window-control-button {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  background: transparent;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.window-control-button svg {
+  width: 7px !important;
+  height: 7px !important;
+  display: block;
+  flex-shrink: 0;
+}
+
+.window-control-button .window-control-icon {
+  width: 7px !important;
+  height: 7px !important;
+  min-width: 7px;
+  min-height: 7px;
+}
+
+.window-control-button--close {
+  background-color: rgb(255, 95, 87);
+  border-color: rgb(224, 68, 62);
+}
+
+.window-control-button--minimize {
+  background-color: rgb(254, 188, 46);
+  border-color: rgb(216, 158, 36);
+}
+
+.window-control-button--maximize {
+  background-color: rgb(40, 200, 64);
+  border-color: rgb(26, 171, 41);
+}
+
+.window-control-icon {
+  color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 200ms;
+  width: 7px;
+  height: 7px;
+  flex-shrink: 0;
+}
+
+.window-controls:hover .window-control-icon {
+  opacity: 1;
+}
+
+.window-control-button--close:hover {
+  background-color: rgba(255, 95, 87, 0.8);
+}
+
+.window-control-button--minimize:hover {
+  background-color: rgba(254, 188, 46, 0.8);
+}
+
+.window-control-button--maximize:hover {
+  background-color: rgba(40, 200, 64, 0.8);
+}
+
+.window-title-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  margin: 0 1rem;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.window-title-text {
+  font-weight: 500;
+  font-size: 0.75rem;
+  color: rgb(75, 85, 99);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  text-align: center;
+}
+
+.window-title-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 4rem;
+  flex-shrink: 0;
+}
+
+.window-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Resize Handles */
+.window-resize-handle {
+  position: absolute;
+  background: transparent;
+  z-index: 30;
+}
+
+.window-resize-handle--n {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  cursor: n-resize;
+}
+
+.window-resize-handle--s {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  cursor: s-resize;
+}
+
+.window-resize-handle--e {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: e-resize;
+}
+
+.window-resize-handle--w {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: w-resize;
+}
+
+.window-resize-handle--ne {
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  cursor: ne-resize;
+}
+
+.window-resize-handle--nw {
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  cursor: nw-resize;
+}
+
+.window-resize-handle--se {
+  bottom: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  cursor: se-resize;
+}
+
+.window-resize-handle--sw {
+  bottom: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  cursor: sw-resize;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes window-fade-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+</style>

package/src/composables/useApplicationIcon.ts

@@ -0,0 +1,79 @@
+import { ref, watch } from 'vue';
+import type { FileItem } from '../types';
+import { FileType } from '../types';
+
+// 扩展 Window 类型
+declare global {
+  interface Window {
+    fileExplorerAPI?: {
+      getApplicationIcon?: (appPath: string) => Promise<string | null>;
+    };
+  }
+}
+
+/**
+ * 应用程序图标管理 composable
+ */
+export function useApplicationIcon(items: () => FileItem[]) {
+  // 应用程序图标缓存（避免重复请求）
+  const appIconCache = new Map<string, string>();
+
+  // 使用响应式的图标 URL 映射
+  const appIconUrls = ref<Map<string, string>>(new Map());
+
+  /**
+   * 为应用程序获取图标
+   */
+  const loadApplicationIcon = async (item: FileItem) => {
+    if (item.type !== FileType.APPLICATION || !item.id) return;
+    
+    // 检查缓存
+    if (appIconCache.has(item.id)) {
+      const cachedUrl = appIconCache.get(item.id);
+      if (cachedUrl) {
+        appIconUrls.value.set(item.id, cachedUrl);
+      }
+      return;
+    }
+    
+    // 检查响应式映射
+    if (appIconUrls.value.has(item.id)) {
+      return;
+    }
+    
+    if (typeof window.fileExplorerAPI !== 'undefined' && window.fileExplorerAPI.getApplicationIcon) {
+      try {
+        const iconUrl = await window.fileExplorerAPI.getApplicationIcon(item.id);
+        if (iconUrl) {
+          appIconCache.set(item.id, iconUrl);
+          appIconUrls.value.set(item.id, iconUrl);
+        }
+      } catch (error) {
+        console.error(`Failed to load application icon for ${item.name}:`, error);
+      }
+    }
+  };
+
+  /**
+   * 监听 items 变化，为应用程序加载图标
+   */
+  watch(items, (newItems) => {
+    newItems.forEach(item => {
+      if (item.type === FileType.APPLICATION && !appIconUrls.value.has(item.id)) {
+        loadApplicationIcon(item);
+      }
+    });
+  }, { immediate: true, deep: true });
+
+  /**
+   * 获取应用程序图标的响应式 URL
+   */
+  const getAppIconUrl = (item: FileItem): string | undefined => {
+    return appIconUrls.value.get(item.id);
+  };
+
+  return {
+    getAppIconUrl,
+    loadApplicationIcon
+  };
+}