@mxmweb/zui 1.0.3 → 1.1.0

package/src/elements/Uploader/styles.tsx

@@ -0,0 +1,291 @@
+import styled from 'styled-components';
+import { type AppTheme } from '../../theme/styledTheme';
+import { type UploadStatus } from './types';
+
+// 样式组件
+export const UploaderContainer = styled.div<{ $theme: AppTheme; $isDragOver: boolean }>`
+  border: 2px dashed ${props => props.$isDragOver ? (props.$theme?.colors?.primary || '#007bff') : (props.$theme?.colors?.border || '#dee2e6')};
+  border-radius: 4px;
+  background: ${props => props.$isDragOver ? `${props.$theme?.colors?.primary || '#007bff'}10` : (props.$theme?.colors?.background || '#f8f9fa')};
+  padding: 24px;
+  text-align: center;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+
+  &:hover {
+    border-color: ${props => props.$theme?.colors?.primary || '#007bff'};
+    background: ${props => props.$theme?.colors?.background || '#f8f9fa'};
+  }
+`;
+
+export const UploadIcon = styled.div<{ $theme: AppTheme }>`
+  color: ${props => props.$theme?.colors?.primary || '#007bff'};
+  font-size: 48px;
+  margin-bottom: 8px;
+`;
+
+export const UploadText = styled.div<{ $theme: AppTheme }>`
+  color: ${props => props.$theme?.colors?.text || '#343a40'};
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 4px;
+`;
+
+export const UploadHint = styled.div<{ $theme: AppTheme }>`
+  color: ${props => props.$theme?.colors?.textSecondary || props.$theme?.colors?.disabledText || '#6b7280'};
+  font-size: 14px;
+`;
+
+export const FileInput = styled.input`
+  display: none;
+`;
+
+export const UploadList = styled.div<{ $theme: AppTheme }>`
+
+  width: 100%;
+  max-width: 600px;
+`;
+
+export const UploadItem = styled.div.attrs({
+  className: 'upload-item'
+})<{ $theme: AppTheme; $status: UploadStatus; $hasForm?: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+   border-bottom: 1px solid ${props => props.$theme?.colors?.border || '#dee2e6'};
+  border: ${props => {
+    // 当有表单时，不显示边框，避免与外层容器边框重复
+    if (props.$hasForm) {
+      return 'none';
+    }
+    // 失败状态使用红色边框突出效果
+    if (props.$status === 'error') {
+      return `1px solid ${props.$theme?.colors?.error || '#FF0000'}`;
+    }
+    return `1px solid ${props.$theme?.colors?.border || '#dee2e6'}`;
+  }};
+  border-radius: 4px;
+  background: ${props => {
+    // 失败状态使用淡红色背景
+    // if (props.$status === 'error') {
+    //   return `${props.$theme?.colors?.error || '#FF0000'}10`;
+    // }
+    return props.$theme?.colors?.background || '#ffffff';
+  }};
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${props => {
+      // 当有表单时，hover 不改变边框
+      if (props.$hasForm) {
+        return 'transparent';
+      }
+      // 失败状态hover时保持红色边框
+      if (props.$status === 'error') {
+        return props.$theme?.colors?.error || '#FF0000';
+      }
+      return props.$theme?.colors?.primary || '#007bff';
+    }};
+  }
+`;
+
+export const FileIcon = styled.div<{ $theme: AppTheme }>`
+  color: ${props => props.$theme?.colors?.primary || '#007bff'};
+  margin-right: 12px;
+  flex-shrink: 0;
+`;
+
+export const FileInfo = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+
+export const FileName = styled.div<{ $theme: AppTheme }>`
+  color: ${props => props.$theme?.colors?.text || '#343a40'};
+  font-size: 12px;
+  font-weight: 400;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const FileSize = styled.div<{ $theme: AppTheme }>`
+  color: ${props => props.$theme?.colors?.textSecondary || props.$theme?.colors?.disabledText || '#6b7280'};
+  font-size: 10px;
+`;
+
+export const ProgressBar = styled.div<{ $theme: AppTheme; $progress: number }>`
+  width: 100%;
+  height: 4px;
+  background: ${props => props.$theme?.colors?.border || '#dee2e6'};
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 8px;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: ${props => props.$progress}%;
+    background: ${props => props.$theme?.colors?.primary || '#007bff'};
+    transition: width 0.3s ease;
+  }
+`;
+
+export const StatusIcon = styled.div<{ $theme: AppTheme; $status: UploadStatus }>`
+  margin-left: 12px;
+  flex-shrink: 0;
+  color: ${props => {
+    switch (props.$status) {
+      case 'success': return props.$theme?.colors?.success || '#008000';
+      case 'error': return props.$theme?.colors?.error || '#FF0000';
+      case 'uploading': return props.$theme?.colors?.primary || '#007bff';
+      case 'pending': return props.$theme?.colors?.warning || '#FFA500';
+      default: return props.$theme?.colors?.disabledText || '#808080';
+    }
+  }};
+`;
+
+export const RemoveButton = styled.button<{ $theme: AppTheme }>`
+  background: none;
+  border: none;
+  color: ${props => props.$theme?.colors?.error || '#FF0000'};
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: ${props => (props.$theme?.colors?.error || '#FF0000')}20;
+  }
+`;
+
+export const AddButton = styled.button<{ $theme: AppTheme }>`
+  background: ${props => props.$theme?.colors?.background || '#f8f9fa'};
+  border: 1px solid ${props => props.$theme?.colors?.border || '#dee2e6'};
+  color: ${props => props.$theme?.colors?.primary || '#007bff'};
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${props => props.$theme?.colors?.primary || '#007bff'};
+    background: ${props => (props.$theme?.colors?.primary || '#007bff')}10;
+  }
+`;
+
+export const ExpandButton = styled.button<{ $theme: AppTheme }>`
+  background: none;
+  border: none;
+  color: ${props => props.$theme?.colors?.primary || '#007bff'};
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background: ${props => (props.$theme?.colors?.primary || '#007bff')}20;
+  }
+`;
+
+export const FormContainer = styled.div<{ $theme: AppTheme; $hasError?: boolean }>`
+  padding: 0px;
+  background: ${props => props.$theme?.colors?.background || '#f8f9fa'};
+
+  /* 移除边框，避免与外层容器边框重叠 */
+  border: none;
+  border-radius: 0;
+
+  /* 添加上方隔离线 */
+  border-top: 1px solid ${props => props.$theme?.colors?.border || '#dee2e6'};
+
+  /* 当有错误时，使用错误状态的隔离线颜色 */
+  ${props => props.$hasError && `
+    border-top-color: ${props.$theme?.colors?.error || '#FF0000'};
+  `}
+
+  /* 添加左右内边距，与外层容器对齐 */
+  margin: 0 1px;
+
+  /* 添加背景色区分 */
+  background: ${props => props.$theme?.colors?.listBackground || '#f9f9f9'};
+`;
+
+export const MetadataInput = styled.input<{ $theme: AppTheme }>`
+  border: 1px solid ${props => props.$theme?.colors?.border || '#dee2e6'};
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 14px;
+  width: 100%;
+  margin-top: 8px;
+  background: ${props => props.$theme?.colors?.background || '#f8f9fa'};
+  color: ${props => props.$theme?.colors?.text || '#343a40'};
+
+  &:focus {
+    outline: none;
+    border-color: ${props => props.$theme?.colors?.primary || '#007bff'};
+  }
+`;
+
+export const UploadItemContainer = styled.div<{
+  $theme: AppTheme;
+  $status: UploadStatus;
+  $hasForm: boolean;
+}>`
+  /* 基础样式 */
+  margin-top: 5px;
+  background: ${props => props.$theme?.colors?.background || '#f8f9fa'};
+  transition: all 0.2s ease;
+
+  /* 边框逻辑：有表单时显示边框，无表单时不显示 */
+  border: ${props => props.$hasForm
+    ? (props.$status === 'error'
+        ? `1px solid ${props.$theme?.colors?.error || '#FF0000'}`
+        : `1px solid ${props.$theme?.colors?.border || '#dee2e6'}`)
+    : 'none'};
+
+  /* 圆角设置：有表单时设置圆角，无表单时不设置 */
+  border-radius: ${props => props.$hasForm ? '4px' : '0'};
+
+  /* 当有表单时的特殊样式 */
+  ${props => props.$hasForm && `
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    /* 确保边框完整包裹整个容器 */
+    overflow: hidden;
+  `}
+
+  /* 错误状态的特殊样式 */
+  ${props => props.$status === 'error' && `
+    background: ${props.$theme?.colors?.error || '#FF0000'}05;
+  `}
+
+  /* 样式覆盖 */
+  .list-my div{
+    padding: 2px 2px !important;
+  }
+
+  :where(.css-dev-only-do-not-override-1v28nim).ant-input-textarea-affix-wrapper.ant-input-affix-wrapper >textarea.ant-input{
+    min-height: 32px !important;
+  }
+`;
+

package/src/elements/Uploader/types.ts

@@ -0,0 +1,119 @@
+import { type AppTheme, type Styles } from '../../theme/styledTheme';
+
+// 上传状态类型
+export type UploadStatus = 'pending' | 'uploading' | 'success' | 'error' | 'cancelled';
+
+// 上传项接口
+export interface UploadItem {
+  id: string;
+  file: File;
+  name: string;
+  size: number;
+  type: string;
+  status: UploadStatus;
+  progress: number;
+  error?: string;
+  uploadApiRes?: any; //接口返回
+  headers?: Record<string, any>;
+  metadata?: Record<string, any>;
+  formData?: Record<string, any>; // 动态表单数据
+  isExpanded?: boolean; // 是否展开表单
+}
+
+// 上传器事件类型
+export type UploaderEventName =
+  | 'uploader:start'
+  | 'uploader:progress'
+  | 'uploader:success'
+  | 'uploader:error'
+  | 'uploader:complete'
+  | 'uploader:formDataChange'
+  | 'uploader:toggleExpand'
+  | 'uploader:remove'
+  | 'uploader:dataChange'
+  | 'uploader:clear'
+  | 'uploader:errorSet'
+  | 'uploader:errorCleared';
+
+// 上传器方法接口
+export interface UploaderMethods {
+  getUploadItems: () => UploadItem[];
+  getUploadItemsData: (options?: {
+    includeStatus?: UploadStatus[]; // 指定要包含的状态，默认包含所有状态
+    excludeStatus?: UploadStatus[]; // 指定要排除的状态
+  }) => Array<{
+    id: string;
+    name: string;
+    status: UploadStatus;
+    error?: string; // 新增：错误信息
+    uploadApiRes: any;
+    formData: Record<string, any>;
+    file: File;
+    size: number;
+    type: string;
+  }>;
+  validateFormData: () => Promise<boolean>;
+  clearUploadItems: () => void;
+  // 新增：设置某个 item 的错误信息
+  setItemError: (itemId: string, error: string) => void;
+  // 新增：清除某个 item 的错误信息
+  clearItemError: (itemId: string) => void;
+}
+
+// 上传器按钮接口
+export interface UploaderButton {
+  label: string;
+  mode?: 'primary' | 'default' | 'error' | 'text';
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+// 上传器属性接口
+export interface UploaderProps {
+  multiple?: boolean;
+  accept?: string;
+  maxSize?: number; // 单位：MB
+  maxFiles?: number;
+  autoUpload?: boolean;
+  url?: string; // 上传接口地址
+  headers?: Record<string, string>; // 自定义请求头
+  queryParams?: Record<string, string>; // 查询参数
+  itemForm?: any[]; // 每个上传项的动态表单配置
+  styles?: Styles;
+  buttons?: UploaderButton[]; // 新增：自定义按钮数组
+  // 新增：文案定制
+  placeholder?: React.ReactNode; // 顶部区域整段说明文案（传则完全替换默认两段，支持 React 组件）
+  listName?: string; // 上传列表标题（传则替换"上传文件列表"）
+  // 新增：错误提示配置
+  errorMessages?: {
+    noUrl?: string; // 未提供上传地址时的提示
+    uploadFailed?: string; // 上传失败时的通用提示
+    fileTooLarge?: string; // 文件过大的提示
+    invalidFileType?: string; // 文件类型无效的提示
+  };
+  eventsEmit?: (eventName: UploaderEventName, data: any, innerFn?: () => void) => void;
+  onRef?: (methods: UploaderMethods) => void; // 新增：暴露方法给父组件
+  // 新增：图标配置
+  icons?: {
+    // 拖拽上传区域图标
+    dragUpload?: React.ReactNode;
+    // 文件项状态图标配置
+    itemStatus?: {
+      pending?: React.ReactNode;    // 上传前/待上传
+      uploading?: React.ReactNode;  // 上传中
+      success?: React.ReactNode;    // 上传成功
+      error?: React.ReactNode;      // 上传失败
+    };
+    // 文件类型图标配置
+    fileType?: {
+      default?: React.ReactNode;    // 默认文件图标
+      image?: React.ReactNode;      // 图片文件
+      document?: React.ReactNode;   // 文档文件
+      spreadsheet?: React.ReactNode; // 表格文件
+      archive?: React.ReactNode;    // 压缩文件
+      video?: React.ReactNode;      // 视频文件
+      audio?: React.ReactNode;      // 音频文件
+    };
+  };
+}

package/src/elements/Uploader/utils.ts

@@ -0,0 +1,200 @@
+import { type UploadItem } from './types';
+
+/**
+ * 格式化文件大小显示
+ * @param bytes - 文件字节数
+ * @returns 格式化后的文件大小字符串
+ */
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+/**
+ * 生成唯一ID
+ * @returns 唯一ID字符串
+ */
+export const generateId = (): string => {
+  return Math.random().toString(36).substr(2, 9);
+};
+
+/**
+ * 根据表单配置自动填充文件信息到表单数据中
+ * @param item - 上传项
+ * @param itemForm - 表单配置
+ * @returns 填充后的表单数据
+ */
+export const autoFillFormData = (item: UploadItem, itemForm: any[]): Record<string, any> => {
+  const formData = { ...item.formData };
+
+  // 常见的文件名相关字段名
+  const fileNameFields = ['name', 'filename', 'title', 'displayName', 'fileName'];
+  const fileSizeFields = ['size', 'fileSize', 'file_size'];
+  const fileTypeFields = ['type', 'fileType', 'mimeType', 'contentType'];
+
+  itemForm.forEach(formItem => {
+    const fieldName = formItem.name || formItem.field;
+    if (!fieldName) return;
+
+    // 自动填充文件名
+    if (fileNameFields.includes(fieldName.toLowerCase()) && !formData[fieldName]) {
+      formData[fieldName] = item.name;
+    }
+
+    // 自动填充文件大小
+    if (fileSizeFields.includes(fieldName.toLowerCase()) && !formData[fieldName]) {
+      formData[fieldName] = formatFileSize(item.size);
+    }
+
+    // 自动填充文件类型
+    if (fileTypeFields.includes(fieldName.toLowerCase()) && !formData[fieldName]) {
+      formData[fieldName] = item.type;
+    }
+  });
+
+  return formData;
+};
+
+/**
+ * 标准文件上传函数
+ * 使用 XMLHttpRequest 实现文件上传，支持进度回调和自定义请求头
+ * 支持 FormData 和 JSON 两种格式
+ * @param file - 要上传的文件
+ * @param uploadUrl - 上传接口地址
+ * @param headers - 自定义请求头
+ * @param queryParams - 查询参数
+ * @param onProgress - 上传进度回调函数
+ * @returns Promise<string> - 返回上传成功后的文件URL或响应数据
+ */
+export const uploadFile = async (
+  file: File,
+  uploadUrl: string,
+  headers: Record<string, string> = {},
+  queryParams: Record<string, string> = {},
+  onProgress?: (progress: number) => void
+): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    // 构建带查询参数的URL
+    const urlWithParams = new URL(uploadUrl);
+    Object.entries(queryParams).forEach(([key, value]) => {
+      urlWithParams.searchParams.append(key, value);
+    });
+
+    // 检查是否为 JSON 格式上传
+    const isJsonUpload = headers['Content-Type']?.includes('application/json');
+
+    let requestData: FormData | string; // 用于存储请求数据
+
+    if (isJsonUpload) {
+      // JSON 格式上传 - 将文件转换为 base64 字符串
+      const reader = new FileReader();
+      reader.onload = () => {
+        const base64String = reader.result as string;
+        const jsonData = JSON.stringify({
+          file: base64String.split(',')[1], // 移除 data:application/octet-stream;base64, 前缀
+        });
+
+        // 发送 JSON 请求
+        sendRequest(jsonData);
+      };
+      reader.onerror = () => reject(new Error('文件读取失败'));
+      reader.readAsDataURL(file);
+    } else {
+      // FormData 格式上传
+      const formData = new FormData();
+      formData.append('tableFile', file); // 使用 tableFile 作为文件字段名
+      sendRequest(formData);
+    }
+
+    function sendRequest(data: FormData | string) {
+      // 监听上传进度
+      xhr.upload.addEventListener('progress', event => {
+        if (event.lengthComputable) {
+          const progress = Math.round((event.loaded / event.total) * 100);
+          onProgress?.(progress);
+        }
+      });
+
+      // 监听请求完成
+      xhr.addEventListener('load', () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          try {
+            const response = JSON.parse(xhr.responseText);
+            if (response.data) {
+              resolve(response.data);
+            } else {
+              resolve(xhr.responseText);
+            }
+          } catch (error) {
+            // 如果响应不是JSON格式，直接返回响应文本
+            resolve(xhr.responseText);
+          }
+        } else {
+          // console.log('====xhr', xhr);
+          console.log('====xhr.responseText', xhr.responseText);
+
+          // 尝试从响应中提取错误信息
+          let errorMessage = '';
+          try {
+            const errorResponse = JSON.parse(xhr.responseText);
+            if (errorResponse.errorMsg) {
+              errorMessage = errorResponse.errorMsg;
+            } else if (errorResponse.message) {
+              errorMessage = errorResponse.message;
+            } else if (errorResponse.error) {
+              errorMessage = errorResponse.error;
+            } else {
+              errorMessage = `上传失败: ${xhr.status} ${xhr.statusText}`;
+            }
+          } catch (parseError) {
+            // 如果响应不是JSON格式，使用状态码
+            errorMessage = `上传失败: ${xhr.status} ${xhr.statusText}`;
+          }
+
+          // 构造一个包含完整错误信息的错误对象
+          const error = new Error(errorMessage);
+          (error as any).response = {
+            status: xhr.status,
+            statusText: xhr.statusText,
+            data: xhr.responseText ? JSON.parse(xhr.responseText) : null,
+            headers: xhr.getAllResponseHeaders()
+          };
+
+          reject(error);
+        }
+      });
+
+      // 监听请求错误
+      xhr.addEventListener('error', () => {
+        const error = new Error('网络错误，上传失败');
+        (error as any).request = xhr;
+        (error as any).type = 'network';
+        reject(error);
+      });
+
+      // 监听请求超时
+      xhr.addEventListener('timeout', () => {
+        const error = new Error('请求超时，上传失败');
+        (error as any).request = xhr;
+        (error as any).type = 'timeout';
+        reject(error);
+      });
+
+      // 打开请求
+      xhr.open('POST', urlWithParams.toString());
+
+      // 设置请求头
+      Object.entries(headers).forEach(([key, value]) => {
+        xhr.setRequestHeader(key, value);
+      });
+
+      // 发送请求
+      xhr.send(data);
+    }
+  });
+};

package/src/elements/Uploader.tsx

@@ -0,0 +1,3 @@
+// 导出新的Uploader组件
+export { default } from './Uploader/index';
+export * from './Uploader/types';