@mxmweb/zui 1.1.13 → 1.3.0

package/src/elements/Uploader/UploadItem.tsx

@@ -1,298 +0,0 @@
-import React from 'react';
-import { File, X, AlertCircle, ChevronDown, ChevronRight, Trash } from 'lucide-react';
-import { FormXviwer } from '@mxmweb/xviewer';
-import '@mxmweb/xviewer/style.css';
-import { type UploadItem as UploadItemType, type UploadStatus } from './types';
-import { formatFileSize } from './utils';
-import {
-  UploadItem as StyledUploadItem,
-  FileIcon,
-  FileInfo,
-  FileName,
-  FileSize,
-  ProgressBar,
-  StatusIcon,
-  RemoveButton,
-  ExpandButton,
-  FormContainer,
-  UploadItemContainer
-} from './styles';
-import { type AppTheme } from '../../theme/styledTheme';
-import { createGlobalStyle } from 'styled-components';
-
-// 内部开关：控制是否启用“展开/收起”交互（默认关闭，表单始终展示）
-const ENABLE_ITEM_FORM_EXPAND = false;
-
-interface UploadItemProps {
-  item: UploadItemType;
-  index: number;
-  theme: AppTheme;
-  itemForm: any[];
-  onRemove: (id: string) => void;
-  onToggleExpand: (id: string) => void;
-  onFormDataChange: (id: string, formData: Record<string, any>) => void;
-  icons?: {
-    // 文件项状态图标配置
-    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;      // 音频文件
-    };
-  };
-}
-
-/**
- * 获取文件类型图标
- * @param fileType - 文件类型
- * @param icons - 图标配置
- * @returns 文件类型图标
- */
-const getFileTypeIcon = (fileType: string, icons?: UploadItemProps['icons']) => {
-  if (!icons?.fileType) {
-    return <File size={20} />;
-  }
-
-  // 根据文件类型返回对应图标
-  if (fileType.startsWith('image/')) {
-    return icons.fileType.image || <File size={20} />;
-  } else if (fileType.includes('document') || fileType.includes('pdf') || fileType.includes('text')) {
-    return icons.fileType.document || <File size={20} />;
-  } else if (fileType.includes('spreadsheet') || fileType.includes('excel') || fileType.includes('csv')) {
-    return icons.fileType.spreadsheet || <File size={20} />;
-  } else if (fileType.includes('zip') || fileType.includes('rar') || fileType.includes('7z')) {
-    return icons.fileType.archive || <File size={20} />;
-  } else if (fileType.startsWith('video/')) {
-    return icons.fileType.video || <File size={20} />;
-  } else if (fileType.startsWith('audio/')) {
-    return icons.fileType.audio || <File size={20} />;
-  }
-
-  return icons.fileType.default || <File size={20} />;
-};
-
-/**
- * 获取状态显示组件
- * @param status - 上传状态
- * @param theme - 主题
- * @param icons - 图标配置
- * @returns 状态显示组件
- */
-const getStatusDisplay = (status: UploadStatus, theme: AppTheme, icons?: UploadItemProps['icons']) => {
-  // 如果配置了状态图标，优先使用配置的图标
-  if (icons?.itemStatus) {
-    switch (status) {
-      case 'error':
-        return icons.itemStatus.error || <AlertCircle size={20} />;
-      case 'uploading':
-        return icons.itemStatus.uploading || <span style={{ fontSize: '12px', color: theme?.colors?.primary || '#007bff' }}>上传中...</span>;
-      case 'success':
-        return icons.itemStatus.success || null;
-      case 'pending':
-        return icons.itemStatus.pending || <span style={{ fontSize: '12px', color: theme?.colors?.warning || '#FFA500' }}>等待中</span>;
-      default:
-        return null;
-    }
-  }
-
-  // 默认状态显示
-  switch (status) {
-    case 'error':
-      return <AlertCircle size={20} />;
-    case 'uploading':
-      return <span style={{ fontSize: '12px', color: theme?.colors?.primary || '#007bff' }}>上传中...</span>;
-    case 'pending':
-      return <span style={{ fontSize: '12px', color: theme?.colors?.warning || '#FFA500' }}>等待中</span>;
-      default:
-        return null;
-  }
-};
-
-const GlobalStyles = createGlobalStyle`
-  .upload-item-container .upload-item {
-    padding: 0px !important;
-  }
-
-  .upload-item-container .list-item {
-    padding: 0px !important;
-  }
-`;
-/**
- * 独立的上传项组件
- * 每个上传项都有独立的表单数据管理，展开/收起时保持数据状态
- */
-const UploadItem: React.FC<UploadItemProps> = ({
-  item,
-  index,
-  theme,
-  itemForm,
-  onRemove,
-  onToggleExpand,
-  onFormDataChange,
-  icons,
-}) => {
-  return (
-
-
-      <UploadItemContainer $theme={theme} $status={item.status} $hasForm={itemForm.length > 0}>
-        <StyledUploadItem $theme={theme} $status={item.status} $hasForm={itemForm.length > 0}>
-          {/* 索引计数 - 带高亮线设计 */}
-          {/* <div style={{
-            position: 'relative',
-            marginRight: '12px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '24px',
-            height: '24px'
-          }}>
-            <div style={{
-              position: 'absolute',
-              width: '2px',
-              height: '16px',
-              background: theme?.colors?.primary || '#007bff',
-              borderRadius: '1px'
-            }} />
-            <span style={{
-              color: theme?.colors?.primary || '#007bff',
-              fontSize: '11px',
-              fontWeight: '600',
-              zIndex: 1,
-              background: theme?.colors?.background || '#f8f9fa',
-              padding: '0 2px'
-            }}>
-              {index + 1} .
-            </span>
-          </div> */}
-
-          <FileIcon $theme={theme}>
-            {getFileTypeIcon(item.type, icons)}
-          </FileIcon>
-
-          <FileInfo>
-            <div className='flex items-center gap-1 line-clamp-1'>
-              <FileName $theme={theme}>{item.name}</FileName>
-              <FileSize $theme={theme}>{formatFileSize(item.size)}</FileSize>
-            </div>
-
-            {item.status === 'uploading' && (
-              <ProgressBar $theme={theme} $progress={item.progress} />
-            )}
-
-            {item.status === 'error' && item.error && (
-              <div style={{ color: theme?.colors?.error || '#FF0000', fontSize: '12px', marginTop: '4px' }}>
-                {typeof item.error === 'string' ? item.error : String(item.error)}
-              </div>
-            )}
-          </FileInfo>
-
-          {/* 状态显示 */}
-          {(() => {
-            const statusDisplay = getStatusDisplay(item.status, theme, icons);
-            return statusDisplay && (
-              <StatusIcon $theme={theme} $status={item.status}>
-                {statusDisplay}
-              </StatusIcon>
-            );
-          })()}
-
-          {/* 展开/收起按钮（可开关） - 只在上传完成后显示 */}
-          {ENABLE_ITEM_FORM_EXPAND && itemForm.length > 0 && item.status === 'success' && (
-            <ExpandButton
-              $theme={theme}
-              onClick={() => onToggleExpand(item.id)}
-              title={item.isExpanded ? '收起表单' : '展开表单'}
-            >
-              {item.isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
-            </ExpandButton>
-          )}
-
-          <RemoveButton
-            $theme={theme}
-            onClick={() => onRemove(item.id)}
-            title="移除文件"
-          >
-            <Trash size={16} />
-          </RemoveButton>
-        </StyledUploadItem>
-
-        {/* 文件项关联表单 - 当关闭展开功能时，始终展示；开启时遵循展开状态 */}
-        {((!ENABLE_ITEM_FORM_EXPAND && itemForm.length > 0) ||
-          (ENABLE_ITEM_FORM_EXPAND && item.isExpanded && itemForm.length > 0)) && (
-          <FormContainer
-            $theme={theme}
-            $hasError={item.status === 'error'}
-            className='list-my'
-          >
-            <FormXviwer
-              formItems={itemForm}
-              initialValues={item.formData || {}}
-              size="sm"
-              formProps={{ component: false }} // 禁用 <form> 标签，避免表单嵌套
-              eventsEmit={(eventName: string, data: any) => {
-                console.log('FormXviwer Event:', eventName, data);
-
-                // 添加命名空间前缀，避免与外部表单事件冲突
-                const namespacedEventName = `uploader_form:${eventName}`;
-
-                switch (eventName) {
-                  case 'form:submit':
-                    onFormDataChange(item.id, data.values);
-                    break;
-                  case 'form:change':
-                    // 实时更新表单数据，确保展开/收起时数据不丢失
-                    onFormDataChange(item.id, data.values);
-                    break;
-                  case 'form:fieldChange':
-                    // 单个字段变化时也更新数据
-                    if (data.field && data.value !== undefined) {
-                      const updatedFormData = {
-                        ...item.formData,
-                        [data.field]: data.value
-                      };
-                      onFormDataChange(item.id, updatedFormData);
-                    }
-                    break;
-                  case 'form:reset':
-                    // 表单重置时清空数据
-                    onFormDataChange(item.id, {});
-                    break;
-                  case 'form:validate':
-                    // 表单验证时保持数据
-                    if (data.values) {
-                      onFormDataChange(item.id, data.values);
-                    }
-                    break;
-                }
-
-                // 转发命名空间事件给外部
-                if (typeof onFormDataChange === 'function') {
-                  // 这里可以触发一个自定义事件，让外部知道内部表单发生了变化
-                  // 但不直接转发所有事件，避免冲突
-                }
-              }}
-              styles={{ theme }}
-              style={{
-                padding: '0px'
-              }}
-              // 添加key确保组件重新渲染时保持状态
-              key={`form-${item.id}-${ENABLE_ITEM_FORM_EXPAND ? item.isExpanded : 'always'}`}
-            />
-          </FormContainer>
-        )}
-      </UploadItemContainer>
-
-  );
-};
-
-export default UploadItem;

package/src/elements/Uploader/example.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import Uploader from './index';
-import { defaultTheme } from '../../theme/styledTheme';
-
-/**
- * Uploader组件使用示例
- * 展示如何配置独立表单数据管理
- */
-const UploaderExample: React.FC = () => {
-  // 表单配置示例
-  const itemForm = [
-    {
-      name: 'name',
-      label: '文件名',
-      type: 'input',
-      placeholder: '请输入文件名'
-    },
-    {
-      name: 'description',
-      label: '文件描述',
-      type: 'textarea',
-      placeholder: '请输入文件描述'
-    },
-    {
-      name: 'category',
-      label: '文件分类',
-      type: 'select',
-      options: [
-        { label: '文档', value: 'document' },
-        { label: '图片', value: 'image' },
-        { label: '视频', value: 'video' },
-        { label: '其他', value: 'other' }
-      ]
-    },
-    {
-      name: 'tags',
-      label: '标签',
-      type: 'input',
-      placeholder: '请输入标签，用逗号分隔'
-    }
-  ];
-
-  // 事件处理
-  const handleEvents = (eventName: string, data: any) => {
-    console.log('Uploader Event:', eventName, data);
-
-    switch (eventName) {
-      case 'uploader:start':
-        console.log('开始上传:', data.items);
-        break;
-      case 'uploader:progress':
-        console.log('上传进度:', data.item);
-        break;
-      case 'uploader:success':
-        console.log('上传成功:', data.item);
-        break;
-      case 'uploader:error':
-        console.log('上传失败:', data.item, data.error);
-        break;
-      case 'uploader:complete':
-        console.log('上传完成:', data.items);
-        break;
-      case 'uploader:formDataChange':
-        console.log('表单数据变化:', data.itemId, data.formData);
-        break;
-    }
-  };
-
-  return (
-    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
-      <h2>文件上传器示例</h2>
-      <p>每个上传项都有独立的表单数据管理，上传完成后会自动填充文件名</p>
-
-      <Uploader
-        multiple={true}
-        accept="*/*"
-        maxSize={50} // 50MB
-        maxFiles={5}
-        autoUpload={true}
-        url="http://localhost:3000/api/upload" // 替换为实际的上传接口
-        headers={{
-          'Authorization': 'Bearer your-token-here'
-        }}
-        queryParams={{
-          'folder': 'uploads'
-        }}
-        itemForm={itemForm}
-        styles={{ theme: defaultTheme }}
-        eventsEmit={handleEvents}
-      />
-    </div>
-  );
-};
-
-export default UploaderExample;