@huyooo/file-explorer-frontend-react 0.4.18 → 0.4.21

package/src/components/Window.css

@@ -1,246 +0,0 @@
-.window-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  background: var(--huyooo-overlay);
-  animation: fade-in 200ms ease-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.window-container {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  background: var(--huyooo-panel-bg);
-  backdrop-filter: blur(24px);
-  border: 1px solid var(--huyooo-border);
-  box-shadow: var(--huyooo-shadow-lg);
-  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 var(--huyooo-border);
-  flex-shrink: 0;
-  user-select: none;
-  background: var(--huyooo-surface);
-  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: var(--huyooo-shadow-sm);
-  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: var(--huyooo-window-close-bg);
-  border-color: var(--huyooo-window-close-border);
-}
-
-.window-control-button--minimize {
-  background-color: var(--huyooo-window-minimize-bg);
-  border-color: var(--huyooo-window-minimize-border);
-}
-
-.window-control-button--maximize {
-  background-color: var(--huyooo-window-maximize-bg);
-  border-color: var(--huyooo-window-maximize-border);
-}
-
-.window-control-icon {
-  color: var(--huyooo-window-control-icon);
-  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: color-mix(in srgb, var(--huyooo-window-close-bg) 80%, transparent);
-}
-
-.window-control-button--minimize:hover {
-  background-color: color-mix(in srgb, var(--huyooo-window-minimize-bg) 80%, transparent);
-}
-
-.window-control-button--maximize:hover {
-  background-color: color-mix(in srgb, var(--huyooo-window-maximize-bg) 80%, transparent);
-}
-
-.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: var(--huyooo-text-muted);
-  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);
-  }
-}
-

package/src/components/Window.tsx

@@ -1,335 +0,0 @@
-import { createPortal } from 'react-dom';
-import { useMemo, useRef, useEffect, useState } from 'react';
-import { Icon } from '@iconify/react';
-import { useWindowDrag } from '../hooks/useWindowDrag';
-import { useWindowResize } from '../hooks/useWindowResize';
-import './Window.css';
-
-interface WindowProps {
-  title?: string;
-  showTitleBar?: boolean;
-  showMinimize?: boolean;
-  showMaximize?: boolean;
-  draggable?: boolean;
-  resizable?: boolean;
-  width?: string | number;
-  height?: string | number;
-  minWidth?: string | number;
-  minHeight?: string | number;
-  maxWidth?: string | number;
-  maxHeight?: string | number;
-  closeOnBackdrop?: boolean;
-  fitContent?: boolean;
-  onClose?: () => void;
-  onMinimize?: () => void;
-  onMaximize?: () => void;
-  children?: React.ReactNode;
-  titleSlot?: React.ReactNode;
-  actionsSlot?: React.ReactNode;
-}
-
-export function Window({
-  title,
-  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,
-  onClose,
-  onMinimize,
-  onMaximize,
-  children,
-  titleSlot,
-  actionsSlot,
-}: WindowProps) {
-  const windowContainerRef = useRef<HTMLDivElement>(null);
-  const windowDrag = draggable ? useWindowDrag() : null;
-
-  /**
-   * 是否使用自适应内容模式
-   */
-  const isAutoSize = useMemo(() => {
-    return (
-      fitContent ||
-      width === 'auto' ||
-      width === 'fit-content' ||
-      height === 'auto' ||
-      height === 'fit-content'
-    );
-  }, [fitContent, width, height]);
-
-  /**
-   * 计算初始尺寸
-   */
-  const getInitialSize = () => {
-    if (isAutoSize) {
-      return { initialWidth: 0, initialHeight: 0 };
-    }
-
-    const defaultWidth = 600;
-    const defaultHeight = 500;
-
-    let initialWidth = defaultWidth;
-    let initialHeight = defaultHeight;
-
-    if (width !== 'auto' && width !== 'fit-content') {
-      initialWidth =
-        typeof width === 'number' ? width : parseInt(width as string);
-    }
-    if (height !== 'auto' && height !== 'fit-content') {
-      initialHeight =
-        typeof height === 'number' ? height : parseInt(height as string);
-    }
-
-    return { initialWidth, initialHeight };
-  };
-
-  /**
-   * 解析尺寸限制
-   */
-  const parseSize = (size: string | number, defaultPx: number): number => {
-    if (typeof size === 'number') return size;
-    if (typeof size === 'string') {
-      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(minWidth, 500);
-  const minH = parseSize(minHeight, 350);
-  const maxW = parseSize(maxWidth, window.innerWidth * 0.8);
-  const maxH = parseSize(maxHeight, window.innerHeight * 0.8);
-
-  const windowResize = resizable
-    ? useWindowResize(initialWidth, initialHeight, minW, minH, maxW, maxH)
-    : null;
-
-  const windowStyle = useMemo(() => {
-    const baseStyle: React.CSSProperties = {
-      left: '50%',
-      top: '50%',
-    };
-
-    let translateX = '-50%';
-    let translateY = '-50%';
-
-    if (draggable && windowDrag) {
-      translateX = `calc(-50% + ${windowDrag.position.x}px)`;
-      translateY = `calc(-50% + ${windowDrag.position.y}px)`;
-    }
-
-    baseStyle.transform = `translate(${translateX}, ${translateY})`;
-    baseStyle.transformOrigin = 'center center';
-
-    if (isAutoSize) {
-      if (resizable && windowResize && windowResize.width > 0) {
-        baseStyle.width = `${windowResize.width}px`;
-        baseStyle.height = `${windowResize.height}px`;
-      }
-    } else {
-      if (resizable && windowResize) {
-        baseStyle.width = `${windowResize.width}px`;
-        baseStyle.height = `${windowResize.height}px`;
-      } else {
-        if (width !== 'auto' && width !== 'fit-content') {
-          baseStyle.width =
-            typeof width === 'number' ? `${width}px` : (width as string);
-        }
-        if (height !== 'auto' && height !== 'fit-content') {
-          baseStyle.height =
-            typeof height === 'number' ? `${height}px` : (height as string);
-        }
-      }
-    }
-
-    if (minWidth) {
-      baseStyle.minWidth =
-        typeof minWidth === 'number' ? `${minWidth}px` : (minWidth as string);
-    }
-    if (minHeight) {
-      baseStyle.minHeight =
-        typeof minHeight === 'number'
-          ? `${minHeight}px`
-          : (minHeight as string);
-    }
-    if (maxWidth) {
-      baseStyle.maxWidth =
-        typeof maxWidth === 'number' ? `${maxWidth}px` : (maxWidth as string);
-    }
-    if (maxHeight) {
-      baseStyle.maxHeight =
-        typeof maxHeight === 'number'
-          ? `${maxHeight}px`
-          : (maxHeight as string);
-    }
-
-    return baseStyle;
-  }, [
-    draggable,
-    windowDrag,
-    isAutoSize,
-    resizable,
-    windowResize,
-    width,
-    height,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight,
-  ]);
-
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (closeOnBackdrop && e.target === e.currentTarget) {
-      onClose?.();
-    }
-  };
-
-  const handleDragStart = (e: React.MouseEvent) => {
-    if (draggable && windowDrag) {
-      windowDrag.startDrag(e);
-    }
-  };
-
-  const handleResizeStart = (
-    e: React.MouseEvent,
-    direction: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'
-  ) => {
-    if (!resizable || !windowResize || !windowContainerRef.current) return;
-
-    const rect = windowContainerRef.current.getBoundingClientRect();
-    const currentWidth = rect.width;
-    const currentHeight = rect.height;
-
-    windowResize.startResize(e, direction, currentWidth, currentHeight);
-  };
-
-  /**
-   * ESC 键关闭
-   */
-  useEffect(() => {
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose?.();
-      }
-    };
-    window.addEventListener('keydown', handleEsc);
-    return () => {
-      window.removeEventListener('keydown', handleEsc);
-    };
-  }, [onClose]);
-
-  return createPortal(
-    <div className="window-overlay" onClick={handleBackdropClick}>
-      <div
-        ref={windowContainerRef}
-        className="window-container"
-        style={windowStyle}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Title Bar */}
-        {showTitleBar && (
-          <div
-            className="window-title-bar draggable-area"
-            onMouseDown={handleDragStart}
-          >
-            <div className="window-controls">
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onClose?.();
-                }}
-                className="window-control-button window-control-button--close"
-              >
-                <Icon icon="lucide:x" width={7} height={7} className="window-control-icon" />
-              </button>
-              {showMinimize && (
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onMinimize?.();
-                  }}
-                  className="window-control-button window-control-button--minimize"
-                >
-                  <Icon icon="lucide:minus" width={7} height={7} className="window-control-icon" />
-                </button>
-              )}
-              {showMaximize && (
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onMaximize?.();
-                  }}
-                  className="window-control-button window-control-button--maximize"
-                >
-                  <Icon icon="lucide:maximize-2" width={7} height={7} className="window-control-icon" />
-                </button>
-              )}
-            </div>
-
-            <div className="window-title-info">
-              {titleSlot || <span className="window-title-text">{title}</span>}
-            </div>
-
-            <div className="window-title-actions">{actionsSlot}</div>
-          </div>
-        )}
-
-        {/* Content */}
-        <div className="window-content">{children}</div>
-
-        {/* Resize Handles */}
-        {resizable && (
-          <>
-            <div
-              className="window-resize-handle window-resize-handle--n"
-              onMouseDown={(e) => handleResizeStart(e, 'n')}
-            ></div>
-            <div
-              className="window-resize-handle window-resize-handle--s"
-              onMouseDown={(e) => handleResizeStart(e, 's')}
-            ></div>
-            <div
-              className="window-resize-handle window-resize-handle--e"
-              onMouseDown={(e) => handleResizeStart(e, 'e')}
-            ></div>
-            <div
-              className="window-resize-handle window-resize-handle--w"
-              onMouseDown={(e) => handleResizeStart(e, 'w')}
-            ></div>
-            <div
-              className="window-resize-handle window-resize-handle--ne"
-              onMouseDown={(e) => handleResizeStart(e, 'ne')}
-            ></div>
-            <div
-              className="window-resize-handle window-resize-handle--nw"
-              onMouseDown={(e) => handleResizeStart(e, 'nw')}
-            ></div>
-            <div
-              className="window-resize-handle window-resize-handle--se"
-              onMouseDown={(e) => handleResizeStart(e, 'se')}
-            ></div>
-            <div
-              className="window-resize-handle window-resize-handle--sw"
-              onMouseDown={(e) => handleResizeStart(e, 'sw')}
-            ></div>
-          </>
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-}

package/src/hooks/useApplicationIcon.ts

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