@huyooo/ai-chat-frontend-react 0.2.14 → 0.2.16

package/src/hooks/useImageUpload.ts

@@ -1,345 +0,0 @@
-/**
- * 图片上传 hook
- * 处理图片选择、粘贴、拖拽、预览等功能
- * 与 Vue 版本 useImageUpload.ts 保持一致
- */
-
-import { useState, useCallback, useMemo } from 'react';
-
-/** 内部图片数据结构（包含预览用的 dataUrl） */
-export interface ImageItem {
-  dataUrl: string;
-  base64: string;
-  mimeType: string;
-}
-
-/** 导出给外部使用的图片数据格式 */
-export interface ImageData {
-  base64: string;
-  mimeType: string;
-}
-
-/** useImageUpload 配置项 */
-interface UseImageUploadOptions {
-  /** 最大图片数量，默认 5 */
-  maxImages?: number;
-  /** 单张图片最大大小（字节），默认 10MB */
-  maxSize?: number;
-  /** 图片最大宽度，默认 4000px（避免超过 API 像素限制） */
-  maxWidth?: number;
-  /** 图片最大高度，默认 4000px（避免超过 API 像素限制） */
-  maxHeight?: number;
-  /** 压缩质量 0-1，默认 0.85 */
-  quality?: number;
-}
-
-/**
- * 图片上传 hook
- * @param options 配置项
- */
-export function useImageUpload(options: UseImageUploadOptions = {}) {
-  const { 
-    maxImages = 5, 
-    maxSize = 10 * 1024 * 1024,
-    maxWidth = 4000,
-    maxHeight = 4000,
-    quality = 0.85
-  } = options;
-
-  // 图片列表
-  const [images, setImages] = useState<ImageItem[]>([]);
-
-  // 拖拽状态
-  const [isDragOver, setIsDragOver] = useState(false);
-
-  // 预览状态
-  const [previewVisible, setPreviewVisible] = useState(false);
-  const [previewIndex, setPreviewIndex] = useState(0);
-
-  // 图片 URL 数组（用于预览组件）
-  const imageUrls = useMemo(() => images.map((img) => img.dataUrl), [images]);
-
-  // 导出格式的图片数据
-  const imageData = useMemo<ImageData[]>(
-    () =>
-      images.map((img) => ({
-        base64: img.base64,
-        mimeType: img.mimeType,
-      })),
-    [images]
-  );
-
-  // 是否有图片
-  const hasImages = images.length > 0;
-
-  /**
-   * 压缩图片到指定尺寸
-   * @param file 原始图片文件
-   * @returns 压缩后的 ImageItem
-   */
-  const compressImage = useCallback((file: File): Promise<ImageItem> => {
-    return new Promise((resolve, reject) => {
-      // 使用 FileReader 读取文件为 data URL（避免 CSP 对 blob URL 的限制）
-      const reader = new FileReader();
-      
-      reader.onload = () => {
-        const dataUrl = reader.result as string;
-        const img = new Image();
-        
-        img.onload = () => {
-          let { width, height } = img;
-          
-          // 计算缩放比例
-          if (width > maxWidth || height > maxHeight) {
-            const ratio = Math.min(maxWidth / width, maxHeight / height);
-            width = Math.round(width * ratio);
-            height = Math.round(height * ratio);
-          }
-          
-          // 创建 canvas 进行压缩
-          const canvas = document.createElement('canvas');
-          canvas.width = width;
-          canvas.height = height;
-          
-          const ctx = canvas.getContext('2d');
-          if (!ctx) {
-            reject(new Error('无法创建 canvas context'));
-            return;
-          }
-          
-          ctx.drawImage(img, 0, 0, width, height);
-          
-          // 转换为 dataUrl（JPEG 格式以减小体积）
-          const mimeType = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
-          const compressedDataUrl = canvas.toDataURL(mimeType, quality);
-          const base64 = compressedDataUrl.split(',')[1];
-          
-          resolve({
-            dataUrl: compressedDataUrl,
-            base64,
-            mimeType,
-          });
-        };
-        
-        img.onerror = () => {
-          reject(new Error('图片加载失败'));
-        };
-        
-        img.src = dataUrl;
-      };
-      
-      reader.onerror = () => {
-        reject(new Error('读取文件失败'));
-      };
-      
-      reader.readAsDataURL(file);
-    });
-  }, [maxWidth, maxHeight, quality]);
-
-  /**
-   * 读取图片文件为 base64（带压缩）
-   */
-  const readImageFile = useCallback((file: File): Promise<ImageItem> => {
-    return compressImage(file);
-  }, [compressImage]);
-
-  /**
-   * 处理文件列表
-   */
-  const processFiles = useCallback(
-    async (files: File[]) => {
-      const remaining = maxImages - images.length;
-      const toProcess = files.slice(0, remaining);
-
-      const newImages: ImageItem[] = [];
-      for (const file of toProcess) {
-        if (file.size > maxSize) {
-          console.warn(`图片 ${file.name} 超过大小限制 (${Math.round(maxSize / 1024 / 1024)}MB)`);
-          continue;
-        }
-        try {
-          const imageItem = await readImageFile(file);
-          newImages.push(imageItem);
-        } catch (err) {
-          console.error('读取图片失败:', err);
-        }
-      }
-
-      if (newImages.length > 0) {
-        setImages((prev) => [...prev, ...newImages]);
-      }
-    },
-    [images.length, maxImages, maxSize, readImageFile]
-  );
-
-  /**
-   * 处理文件选择事件
-   */
-  const handleImageSelect = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const files = event.target.files;
-      if (files) {
-        processFiles(Array.from(files));
-      }
-      // 清空 input 以便再次选择相同文件
-      event.target.value = '';
-    },
-    [processFiles]
-  );
-
-  /**
-   * 处理粘贴事件
-   */
-  const handlePaste = useCallback(
-    (event: React.ClipboardEvent) => {
-      const items = event.clipboardData?.items;
-      if (!items) return;
-
-      const imageFiles: File[] = [];
-      for (const item of Array.from(items)) {
-        if (item.type.startsWith('image/')) {
-          const file = item.getAsFile();
-          if (file) imageFiles.push(file);
-        }
-      }
-
-      if (imageFiles.length > 0) {
-        event.preventDefault();
-        processFiles(imageFiles);
-      }
-    },
-    [processFiles]
-  );
-
-  /**
-   * 处理拖拽悬停事件
-   */
-  const handleDragOver = useCallback((event: React.DragEvent) => {
-    event.preventDefault();
-    if (event.dataTransfer?.types.includes('Files')) {
-      setIsDragOver(true);
-    }
-  }, []);
-
-  /**
-   * 处理拖拽离开事件
-   */
-  const handleDragLeave = useCallback(() => {
-    setIsDragOver(false);
-  }, []);
-
-  /**
-   * 处理拖拽放下事件
-   */
-  const handleDrop = useCallback(
-    (event: React.DragEvent) => {
-      event.preventDefault();
-      setIsDragOver(false);
-      const files = event.dataTransfer?.files;
-      if (files) {
-        const imageFiles = Array.from(files).filter((f) => f.type.startsWith('image/'));
-        processFiles(imageFiles);
-      }
-    },
-    [processFiles]
-  );
-
-  /**
-   * 打开图片预览
-   */
-  const openPreview = useCallback((index: number) => {
-    setPreviewIndex(index);
-    setPreviewVisible(true);
-  }, []);
-
-  /**
-   * 关闭图片预览
-   */
-  const closePreview = useCallback(() => {
-    setPreviewVisible(false);
-  }, []);
-
-  /**
-   * 移除指定索引的图片
-   */
-  const removeImage = useCallback((index: number) => {
-    setImages((prev) => prev.filter((_, i) => i !== index));
-  }, []);
-
-  /**
-   * 清空所有图片
-   */
-  const clearImages = useCallback(() => {
-    setImages([]);
-  }, []);
-
-  /**
-   * 添加图片文件
-   */
-  const addImages = useCallback(
-    (files: File[]) => {
-      processFiles(files);
-    },
-    [processFiles]
-  );
-
-  /**
-   * 从 data URL 字符串数组初始化图片（用于历史消息编辑）
-   * @param data data URL 字符串数组
-   */
-  const initImages = useCallback((data: string[]) => {
-    const items: ImageItem[] = [];
-    for (const item of data) {
-      if (item.startsWith('data:')) {
-        // data URL 格式: data:image/png;base64,xxxxx
-        const matches = item.match(/^data:([^;]+);base64,(.+)$/);
-        if (matches) {
-          items.push({
-            dataUrl: item,
-            base64: matches[2],
-            mimeType: matches[1],
-          });
-        }
-      } else {
-        // 普通 URL，只能作为预览显示
-        items.push({
-          dataUrl: item,
-          base64: '',
-          mimeType: 'image/unknown',
-        });
-      }
-    }
-    setImages(items);
-  }, []);
-
-  return {
-    // 状态
-    images,
-    isDragOver,
-    previewVisible,
-    previewIndex,
-    setPreviewIndex,
-
-    // 计算属性
-    imageUrls,
-    imageData,
-    hasImages,
-
-    // 事件处理
-    handleImageSelect,
-    handlePaste,
-    handleDragOver,
-    handleDragLeave,
-    handleDrop,
-
-    // 预览控制
-    openPreview,
-    closePreview,
-
-    // 图片操作
-    removeImage,
-    clearImages,
-    addImages,
-    initImages,
-  };
-}