@huyooo/file-explorer-frontend-react 0.4.2

package/src/components/Toolbar.tsx

@@ -0,0 +1,127 @@
+import { Icon } from '@iconify/react';
+import { Breadcrumb } from './Breadcrumb';
+import type { BreadcrumbItem } from '../types';
+import './Toolbar.css';
+
+interface ToolbarProps {
+  canGoBack?: boolean;
+  canGoForward?: boolean;
+  breadcrumbs?: BreadcrumbItem[];
+  viewMode?: 'grid' | 'list';
+  searchQuery?: string;
+  showSearch?: boolean;
+  showViewToggle?: boolean;
+  draggable?: boolean;
+  onBack?: () => void;
+  onForward?: () => void;
+  onBreadcrumbNavigate?: (item: BreadcrumbItem) => void;
+  onViewModeChange?: (mode: 'grid' | 'list') => void;
+  onSearchQueryChange?: (query: string) => void;
+  children?: React.ReactNode;
+  breadcrumbSlot?: React.ReactNode;
+  actionsSlot?: React.ReactNode;
+}
+
+export function Toolbar({
+  canGoBack = false,
+  canGoForward = false,
+  breadcrumbs = [],
+  viewMode = 'grid',
+  searchQuery = '',
+  showSearch = false,
+  showViewToggle = true,
+  draggable = false,
+  onBack,
+  onForward,
+  onBreadcrumbNavigate,
+  onViewModeChange,
+  onSearchQueryChange,
+  children,
+  breadcrumbSlot,
+  actionsSlot,
+}: ToolbarProps) {
+  return (
+    <div
+      className={`file-toolbar ${draggable ? 'file-toolbar--draggable' : ''}`}
+    >
+      {/* 导航按钮 */}
+      <div className="file-toolbar-nav">
+        <button
+          className="file-toolbar-button"
+          onClick={onBack}
+          disabled={!canGoBack}
+          title="后退"
+        >
+          <Icon icon="lucide:chevron-left" width={18} height={18} />
+        </button>
+        <button
+          className="file-toolbar-button"
+          onClick={onForward}
+          disabled={!canGoForward}
+          title="前进"
+        >
+          <Icon icon="lucide:chevron-right" width={18} height={18} />
+        </button>
+      </div>
+
+      {/* 面包屑插槽 */}
+      <div className="file-toolbar-breadcrumb">
+        {breadcrumbSlot || (
+          breadcrumbs.length > 0 && (
+            <Breadcrumb
+              items={breadcrumbs}
+              onNavigate={onBreadcrumbNavigate}
+            />
+          )
+        )}
+      </div>
+
+      {/* 自定义内容插槽 */}
+      {children && <div className="file-toolbar-custom">{children}</div>}
+
+      {/* 操作区 */}
+      <div className="file-toolbar-actions">
+        {/* 搜索框 */}
+        {showSearch && (
+          <div className="file-toolbar-search">
+            <Icon icon="lucide:search" width={16} height={16} className="file-toolbar-search-icon" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => onSearchQueryChange?.(e.target.value)}
+              placeholder="搜索"
+              className="file-toolbar-search-input"
+            />
+          </div>
+        )}
+
+        {/* 视图切换 */}
+        {showViewToggle && (
+          <div className="file-toolbar-view-toggle">
+            <button
+              onClick={() => onViewModeChange?.('grid')}
+              className={`file-toolbar-button ${
+                viewMode === 'grid' ? 'file-toolbar-button--active' : ''
+              }`}
+              title="网格视图"
+            >
+              <Icon icon="lucide:layout-grid" width={18} height={18} />
+            </button>
+            <button
+              onClick={() => onViewModeChange?.('list')}
+              className={`file-toolbar-button ${
+                viewMode === 'list' ? 'file-toolbar-button--active' : ''
+              }`}
+              title="列表视图"
+            >
+              <Icon icon="lucide:list" width={18} height={18} />
+            </button>
+          </div>
+        )}
+
+        {/* 额外操作插槽 */}
+        {actionsSlot}
+      </div>
+    </div>
+  );
+}

package/src/components/Window.css

@@ -0,0 +1,246 @@
+.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);
+  }
+}
+

package/src/components/Window.tsx

@@ -0,0 +1,335 @@
+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
+  );
+}