@mxmweb/zui 1.1.13 → 1.3.0

package/src/elements/Uploader/index.tsx

@@ -1,702 +0,0 @@
-import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import { Upload } from 'lucide-react';
-import { defaultTheme, defaultStyles, deepMergeTheme } from '../../theme/styledTheme';
-import {
-  type UploaderProps,
-  type UploadItem as UploadItemType,
-  type UploaderMethods,
-  type UploadStatus, // Added type for UploadStatus
-} from './types';
-import { generateId, uploadFile, autoFillFormData } from './utils';
-import {
-  UploaderContainer,
-  UploadIcon,
-  UploadText,
-  UploadHint,
-  FileInput,
-  UploadList,
-} from './styles';
-import UploadItem from './UploadItem';
-import Button from '../Button'; // Added import for Button
-
-/**
- * 文件上传器组件
- * 支持拖拽上传、多文件上传、独立表单数据管理
- * 每个上传项都有独立的表单，上传完成后自动填充文件名
- */
-const Uploader: React.FC<UploaderProps> = ({
-  multiple = true,
-  accept = '*/*',
-  maxSize = 100, // 100MB
-  maxFiles = 10, // 预留接口，后续可扩展文件数量限制功能
-  autoUpload = true,
-  url = 'http://localhost:3000/upload', // 默认上传地址
-  headers = {}, // 默认请求头
-  queryParams = {}, // 默认查询参数
-  itemForm = [],
-  styles,
-  buttons = [], // 新增：自定义按钮数组
-  errorMessages = {}, // 新增：错误提示配置
-  icons, // 新增：图标配置
-  eventsEmit,
-  onRef,
-  placeholder,
-  listName,
-}) => {
-  // 使用统一的主题合并函数，确保 theme 有完整的结构
-  const theme = deepMergeTheme(defaultStyles, styles);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [uploadItems, setUploadItems] = useState<UploadItemType[]>([]);
-
-  // 统一对外数据快照（与 getUploadItemsData 结构一致）
-  const snapshotItems = useCallback((items?: UploadItemType[]) => {
-    const source = items ?? uploadItems;
-    return source.map(item => ({
-      id: item.id,
-      name: item.name,
-      status: item.status,
-      error: item.error,
-      uploadApiRes: item.uploadApiRes || {},
-      formData: item.formData || {},
-      file: item.file,
-      size: item.size,
-      type: item.type,
-    }));
-  }, [uploadItems]);
-
-  // 处理 placeholder 文本，支持 React 组件
-  const placeholderContent = useMemo(() => {
-    if (!placeholder) return null;
-
-    // 如果传入的是字符串，进行换行符转译
-    if (typeof placeholder === 'string') {
-      let text = placeholder;
-      text = text.replace(/<br\s*\/?>(?=\s*)/gi, '\n'); // <br>, <br/>, <br />
-      text = text.replace(/\s*\/n\s*/gi, '\n'); // /n
-      text = text.replace(/\\n/g, '\n'); // \\
-      return (
-        <UploadHint
-          $theme={theme.theme || defaultTheme}
-          style={{
-            textAlign: 'center',
-            whiteSpace: 'pre-line',
-          }}
-        >
-          {text}
-        </UploadHint>
-      );
-    }
-
-    // 如果传入的是 React 组件，直接渲染
-    return placeholder;
-  }, [placeholder, theme.theme]);
-
-  // 默认错误提示
-  const defaultErrorMessages = {
-    noUrl: '请提供上传接口地址 (url)',
-    uploadFailed: '上传失败，请重试',
-    fileTooLarge: `文件大小不能超过 ${maxSize}MB`,
-    invalidFileType: '不支持的文件类型',
-  };
-
-  // 合并用户自定义错误提示和默认提示
-  const finalErrorMessages = { ...defaultErrorMessages, ...errorMessages };
-
-  // 获取错误提示信息的函数
-  const getErrorMessage = (type: keyof typeof defaultErrorMessages, fallback?: string) => {
-    // 如果用户设置了自定义错误提示，优先使用
-    if (finalErrorMessages[type]) {
-      return finalErrorMessages[type];
-    }
-    // 否则使用 fallback 或默认提示
-    return fallback || defaultErrorMessages[type];
-  };
-
-  const formatSizeMB = (bytes: number) => {
-    const mb = bytes / (1024 * 1024);
-    // 保留两位小数，但去掉多余的0
-    return `${Number(mb.toFixed(2))}MB`;
-  };
-
-  // 统一文件校验与限流逻辑
-  const normalizeIncomingFiles = useCallback(
-    (files: File[], currentCount: number) => {
-      const MAX_BYTES = maxSize * 1024 * 1024;
-      const oversize: File[] = [];
-      const withinSize: File[] = [];
-      files.forEach(f => {
-        if (f.size > MAX_BYTES) oversize.push(f); else withinSize.push(f);
-      });
-
-      if (oversize.length > 0) {
-        const details = oversize.map(f => `${f.name}（${formatSizeMB(f.size)}）`).join('、');
-        const message = `${getErrorMessage('fileTooLarge')}：${details}`;
-        eventsEmit?.('uploader:error', {
-          type: 'fileTooLarge',
-          message,
-          files: oversize.map(f => ({ name: f.name, size: f.size })),
-          limit: `${maxSize}MB`,
-          data: snapshotItems(),
-        });
-      }
-
-      const remainingSlots = Math.max(0, maxFiles - currentCount);
-      if (remainingSlots <= 0) {
-        const message = `最多只能上传 ${maxFiles} 个文件，已存在 ${currentCount} 个，无法继续添加。`;
-        eventsEmit?.('uploader:error', {
-          type: 'tooManyFiles',
-          message,
-          currentCount,
-          tryAdd: files.length,
-          limit: maxFiles,
-          data: snapshotItems(),
-        });
-        return [] as File[];
-      }
-
-      const clipped = withinSize.slice(0, remainingSlots);
-      if (withinSize.length > remainingSlots) {
-        const dropped = withinSize.length - clipped.length;
-        const message = `最多只能上传 ${maxFiles} 个文件，本次仅接受 ${clipped.length} 个，忽略 ${dropped} 个。`;
-        eventsEmit?.('uploader:error', {
-          type: 'tooManyFiles',
-          message,
-          currentCount,
-          accepted: clipped.length,
-          dropped,
-          limit: maxFiles,
-          data: snapshotItems(),
-        });
-      }
-
-      return clipped;
-    },
-    [maxSize, maxFiles, getErrorMessage, eventsEmit, snapshotItems]
-  );
-
-  // 暴露方法给父组件
-  const uploaderMethods: UploaderMethods = useMemo(
-    () => ({
-      // 获取所有上传项
-      getUploadItems: () => uploadItems,
-
-      // 获取所有上传项的数据（包含表单数据）
-      getUploadItemsData: (options?: {
-        includeStatus?: UploadStatus[];
-        excludeStatus?: UploadStatus[];
-      }) => {
-        let filteredItems = uploadItems;
-
-        // 根据状态过滤
-        if (options?.includeStatus) {
-          filteredItems = filteredItems.filter(item =>
-            options.includeStatus!.includes(item.status)
-          );
-        }
-        if (options?.excludeStatus) {
-          filteredItems = filteredItems.filter(item =>
-            !options.excludeStatus!.includes(item.status)
-          );
-        }
-
-        return filteredItems.map(item => ({
-          id: item.id,
-          name: item.name,
-          status: item.status,
-          error: item.error, // 新增：错误信息
-          uploadApiRes: item.uploadApiRes || {},
-          formData: item.formData || {},
-          file: item.file,
-          size: item.size,
-          type: item.type,
-        }));
-      },
-
-      // 清空所有上传项
-      clearUploadItems: () => {
-        setUploadItems([]);
-        eventsEmit?.('uploader:clear', {});
-      },
-
-      // 新增：设置某个 item 的错误信息
-      setItemError: (itemId: string, error: string) => {
-        setUploadItems(prev => prev.map(item =>
-          item.id === itemId
-            ? { ...item, status: 'error' as const, error }
-            : item
-        ));
-        eventsEmit?.('uploader:errorSet', { itemId, error, data: snapshotItems() });
-      },
-
-      // 新增：清除某个 item 的错误信息
-      clearItemError: (itemId: string) => {
-        setUploadItems(prev => prev.map(item =>
-          item.id === itemId
-            ? { ...item, status: 'pending' as const, error: undefined }
-            : item
-        ));
-        eventsEmit?.('uploader:errorCleared', { itemId, data: snapshotItems() });
-      },
-
-      // 添加新的上传项（对外方法也应用限流）
-      addUploadItems: (files: File[]) => {
-        const toAdd = normalizeIncomingFiles(files, uploadItems.length);
-        if (toAdd.length === 0) return;
-        const newItems: UploadItemType[] = toAdd.map(file => ({
-          id: generateId(),
-          file,
-          name: file.name,
-          size: file.size,
-          type: file.type,
-          status: 'pending' as const,
-          progress: 0,
-          formData: {},
-          isExpanded: false,
-        }));
-
-        setUploadItems(prev => [...prev, ...newItems]);
-
-        if (autoUpload) {
-          handleUpload(newItems);
-        }
-      },
-
-      // 移除指定上传项
-      removeUploadItem: (id: string) => {
-        setUploadItems(prev => {
-          const itemToRemove = prev.find(item => item.id === id);
-          if (itemToRemove) {
-            eventsEmit?.('uploader:remove', {
-              itemId: id,
-              item: itemToRemove,
-              data: snapshotItems(prev),
-            });
-          }
-          return prev.filter(item => item.id !== id);
-        });
-      },
-
-      // 验证表单数据
-      validateFormData: async () => {
-        // 检查是否有上传失败的项目
-        const hasError = uploadItems.some(item => item.status === 'error');
-        if (hasError) {
-          return false;
-        }
-
-        // 检查是否有正在上传的项目
-        const hasUploading = uploadItems.some(item => item.status === 'uploading');
-        if (hasUploading) {
-          return false;
-        }
-
-        // 检查是否有上传成功的项目
-        const hasSuccess = uploadItems.some(item => item.status === 'success');
-        if (!hasSuccess) {
-          return false;
-        }
-
-        return true;
-      },
-    }),
-    [uploadItems, autoUpload, eventsEmit, normalizeIncomingFiles, snapshotItems]
-  );
-
-  // 通过ref暴露方法给父组件
-  useEffect(() => {
-    if (onRef) {
-      onRef(uploaderMethods);
-    }
-  }, [uploaderMethods, onRef]);
-
-  /**
-   * 处理文件选择
-   * @param files - 选择的文件列表
-   */
-  const handleFileSelect = useCallback(
-    (files: FileList | null) => {
-      if (!files) return;
-
-      const toAddFiles = normalizeIncomingFiles(Array.from(files), uploadItems.length);
-      if (toAddFiles.length === 0) return;
-
-      const newItems: UploadItemType[] = toAddFiles.map(file => ({
-        id: generateId(),
-        file,
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        status: 'pending' as const,
-        progress: 0,
-        formData: {}, // 每个item独立的表单数据
-        isExpanded: false,
-      }));
-
-      setUploadItems(prev => [...prev, ...newItems]);
-
-      if (autoUpload) {
-        handleUpload(newItems);
-      }
-    },
-    [autoUpload, uploadItems.length, normalizeIncomingFiles]
-  );
-
-  /**
-   * 处理拖拽事件
-   */
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(false);
-  }, []);
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      setIsDragOver(false);
-      handleFileSelect(e.dataTransfer.files);
-    },
-    [handleFileSelect]
-  );
-
-  /**
-   * 处理文件上传
-   * @param items - 要上传的文件项列表
-   */
-  const handleUpload = useCallback(
-    async (items: UploadItemType[]) => {
-      // 检查是否提供了上传URL
-      if (!url) {
-        console.error(getErrorMessage('noUrl'));
-        return;
-      }
-
-      eventsEmit?.('uploader:start', { items, data: snapshotItems() });
-
-      for (const item of items) {
-        try {
-          setUploadItems(prev =>
-            prev.map(i => (i.id === item.id ? { ...i, status: 'uploading' as const } : i))
-          );
-
-          const res = await uploadFile(item.file, url, headers, queryParams, progress => {
-            setUploadItems(prev => prev.map(i => (i.id === item.id ? { ...i, progress } : i)));
-            eventsEmit?.('uploader:progress', { item: { ...item, progress }, data: snapshotItems() });
-          });
-
-          // 上传成功后，自动填充表单数据
-          const autoFilledFormData = autoFillFormData(item, itemForm);
-
-          const updatedItem: UploadItemType = {
-            ...item,
-            status: 'success' as const,
-            uploadApiRes: res,
-            progress: 100,
-            formData: autoFilledFormData, // 使用自动填充后的表单数据
-            isExpanded: itemForm.length > 0 ? true : false, // 上传成功后，如果有表单配置则默认展开
-          };
-
-          const nextItems = uploadItems.map(i => (i.id === item.id ? updatedItem : i));
-          setUploadItems(prev => prev.map(i => (i.id === item.id ? updatedItem : i)));
-          eventsEmit?.('uploader:success', { item: updatedItem, data: snapshotItems(nextItems) });
-        } catch (error) {
-          // 尝试从错误响应中提取 errorMsg
-          let errorMessage = '';
-          console.log('上传错误详情:', error);
-
-          if (error && typeof error === 'object') {
-            const errorObj = error as any;
-
-            // 优先检查是否有 response 对象（来自 utils.ts）
-            if (errorObj.response && errorObj.response.data) {
-              const responseData = errorObj.response.data;
-              console.log('错误响应数据:', responseData);
-
-              if (responseData.errorMsg) {
-                // 优先使用接口返回的 errorMsg
-                errorMessage = responseData.errorMsg;
-              } else if (responseData.message) {
-                // 其次使用 message
-                errorMessage = responseData.message;
-              } else if (responseData.error) {
-                // 再次使用 error
-                errorMessage = responseData.error;
-              } else if (responseData.errorCode) {
-                // 如果有错误码，生成友好提示
-                switch (responseData.errorCode) {
-                  case '30013':
-                    errorMessage = '登录失效已过期，请重新登录';
-                    break;
-                  case '30014':
-                    errorMessage = '没有权限执行此操作';
-                    break;
-                  case '30015':
-                    errorMessage = '文件格式不支持';
-                    break;
-                  case '30016':
-                    errorMessage = '文件大小超出限制';
-                    break;
-                  default:
-                    errorMessage = `操作失败 (${responseData.errorCode})`;
-                }
-              }
-            } else if (errorObj.message) {
-              // 如果没有 response 对象，尝试解析错误消息
-              try {
-                const errorData = JSON.parse(errorObj.message);
-                console.log('解析的错误数据:', errorData);
-
-                if (errorData.errorMsg) {
-                  errorMessage = errorData.errorMsg;
-                } else if (errorData.message) {
-                  errorMessage = errorData.message;
-                } else if (errorData.error) {
-                  errorMessage = errorData.error;
-                } else if (errorData.errorCode) {
-                  switch (errorData.errorCode) {
-                    case '30013':
-                      errorMessage = '登录失效已过期，请重新登录';
-                      break;
-                    case '30014':
-                      errorMessage = '没有权限执行此操作';
-                      break;
-                    case '30015':
-                      errorMessage = '文件格式不支持';
-                      break;
-                    case '30016':
-                      errorMessage = '文件大小超出限制';
-                      break;
-                    default:
-                      errorMessage = `操作失败 (${errorData.errorCode})`;
-                  }
-                }
-              } catch (parseError) {
-                // 如果解析失败，直接使用错误消息
-                console.log('错误消息解析失败:', parseError);
-                errorMessage = errorObj.message;
-              }
-            }
-          }
-
-          // 如果没有从接口获取到错误信息，使用自定义错误提示或默认提示
-          if (!errorMessage) {
-            errorMessage = getErrorMessage('uploadFailed');
-          }
-
-          console.log('最终使用的错误信息:', errorMessage);
-          const errorItem = { ...item, status: 'error' as const, error: errorMessage };
-          const nextItems = uploadItems.map(i => (i.id === item.id ? errorItem : i));
-          setUploadItems(prev => prev.map(i => (i.id === item.id ? errorItem : i)));
-          eventsEmit?.('uploader:error', { item: errorItem, error: errorMessage, data: snapshotItems(nextItems) });
-        }
-      }
-
-      eventsEmit?.('uploader:complete', { items: uploadItems, data: snapshotItems() });
-    },
-    [url, headers, queryParams, eventsEmit, uploadItems, itemForm, finalErrorMessages.uploadFailed, snapshotItems]
-  );
-
-  /**
-   * 移除文件
-   * @param id - 文件项ID
-   */
-  const handleRemoveFile = useCallback(
-    (id: string) => {
-      setUploadItems(prev => {
-        const itemToRemove = prev.find(item => item.id === id);
-        if (itemToRemove) {
-          eventsEmit?.('uploader:remove', {
-            itemId: id,
-            item: itemToRemove,
-            data: snapshotItems(prev),
-          });
-        }
-        return prev.filter(item => item.id !== id);
-      });
-    },
-    [eventsEmit, snapshotItems]
-  );
-
-  /**
-   * 切换表单展开状态
-   * @param id - 文件项ID
-   */
-  const handleToggleExpand = useCallback(
-    (id: string) => {
-      setUploadItems(prev =>
-        prev.map(item => {
-          if (item.id === id) {
-            const updatedItem = {
-              ...item,
-              isExpanded: !item.isExpanded,
-            };
-            console.log('Toggle Expand:', id, updatedItem.isExpanded, updatedItem.formData);
-            eventsEmit?.('uploader:toggleExpand', {
-              itemId: id,
-              isExpanded: updatedItem.isExpanded,
-              item: updatedItem,
-              data: snapshotItems(prev),
-            });
-            return updatedItem;
-          }
-          return item;
-        })
-      );
-    },
-    [eventsEmit, snapshotItems]
-  );
-
-  /**
-   * 更新表单数据
-   * @param id - 文件项ID
-   * @param formData - 表单数据
-   */
-  const handleFormDataChange = useCallback(
-    (id: string, formData: Record<string, any>) => {
-      console.log('FormData Change:', id, formData);
-
-      setUploadItems(prev => {
-        const updatedItems = prev.map(item => {
-          if (item.id === id) {
-            const updatedItem = {
-              ...item,
-              formData: { ...formData }, // 确保数据是深拷贝
-            };
-            eventsEmit?.('uploader:formDataChange', {
-              itemId: id,
-              formData: updatedItem.formData,
-              item: updatedItem,
-              data: snapshotItems(prev),
-            });
-            return updatedItem;
-          }
-          return item;
-        });
-
-        // 触发数据变化事件
-        eventsEmit?.('uploader:dataChange', {
-          items: updatedItems,
-          changedItemId: id,
-          changedFormData: formData,
-          data: snapshotItems(updatedItems),
-        });
-
-        return updatedItems;
-      });
-    },
-    [eventsEmit, snapshotItems]
-  );
-
-  return (
-    <div>
-      <UploaderContainer
-        $theme={theme.theme || defaultTheme}
-        $isDragOver={isDragOver}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        onClick={() => {
-          if (fileInputRef.current) {
-            // 关键：清空 input 值，允许选择相同文件再次触发 onChange
-            fileInputRef.current.value = '';
-          }
-          fileInputRef.current?.click();
-        }}
-      >
-        <UploadIcon $theme={theme.theme || defaultTheme}>
-          {icons?.dragUpload || <Upload size={48} />}
-        </UploadIcon>
-
-        {placeholderContent || (
-          <>
-            <UploadText $theme={theme.theme || defaultTheme}>
-              拖拽文件到此处或点击选择文件
-            </UploadText>
-            <UploadHint $theme={theme.theme || defaultTheme}>
-              支持 {accept} 格式，单个文件最大 {maxSize}MB
-              {!url && (
-                <div style={{ color: theme.theme?.colors?.error || '#FF0000', marginTop: '8px', fontSize: '12px' }}>
-                  {getErrorMessage('noUrl')}
-                </div>
-              )}
-            </UploadHint>
-          </>
-        )}
-      </UploaderContainer>
-
-      <FileInput
-        ref={fileInputRef}
-        type="file"
-        multiple={multiple}
-        accept={accept}
-        onChange={(e) => {
-          handleFileSelect(e.target.files);
-          // 关键：选择完成后重置值，避免再次选择相同文件不触发 onChange
-          e.target.value = '';
-        }}
-      />
-
-      {/* 上传列表 */}
-      {uploadItems.length > 0 && (
-        <div>
-          {/* 标题和按钮区域 - 使用 flex 布局 */}
-          <div style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            margin: '6px 0px'
-          }}>
-            <div className="text-[14px] font-bold opacity-60">{listName || '上传文件列表'}</div>
-
-            {/* 右侧按钮区域 */}
-            {buttons.length > 0 && (
-              <div style={{
-                display: 'flex',
-                gap: '8px',
-                alignItems: 'center'
-              }}>
-                {buttons.map((button, index) => (
-                  <Button
-                    key={index}
-                    mode={button.mode || 'default'}
-                    label={button.label}
-                    icon={button.icon}
-                    disabled={button.disabled}
-                    onClick={button.onClick}
-                    styles={styles}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* 文件列表 - 独立垂直排列 */}
-          <UploadList $theme={theme.theme || defaultTheme}>
-            {uploadItems.map((item, index) => (
-              <UploadItem
-                key={item.id}
-                item={item}
-                index={index}
-                itemForm={itemForm}
-                onRemove={handleRemoveFile}
-                onToggleExpand={handleToggleExpand}
-                onFormDataChange={handleFormDataChange}
-                theme={theme.theme || defaultTheme}
-                icons={icons} // 传递图标配置
-              />
-            ))}
-          </UploadList>
-        </div>
-      )}
-
-
-    </div>
-  );
-};
-
-export default Uploader;