@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UIFileUpload.tsx

@@ -0,0 +1,382 @@
+/**
+ * UIFileUpload - 文件上传组件
+ * 
+ * 使用示例：
+ * 
+ * 1. 基础用法：
+ *    import { UIFileUpload } from './UIFileUpload';
+ *    import type { UploadFile } from 'antd/es/upload/interface';
+ *    
+ *    const [fileList, setFileList] = useState<UploadFile[]>([]);
+ *    
+ *    <UIFileUpload
+ *      fileList={fileList}
+ *      onChange={setFileList}
+ *      maxCount={5}
+ *      accept=".doc,.docx,.pdf"
+ *    />
+ * 
+ * 2. 完整配置：
+ *    <UIFileUpload
+ *      fileList={fileList}
+ *      onChange={setFileList}
+ *      onFinish={async (newFileList) => {
+ *        // 所有文件上传完成后的回调
+ *        console.log('上传完成:', newFileList);
+ *      }}
+ *      cancel={(file) => {
+ *        // 取消上传文件的回调
+ *        console.log('取消上传:', file);
+ *      }}
+ *      maxCount={10}
+ *      disabled={false}
+ *      multiple={true}
+ *      accept=".jpg,.jpeg,.png,.pdf,.doc,.docx"
+ *    />
+ * 
+ * 特点：
+ * - 支持文件大小限制（最大100MB）
+ * - 支持文件类型限制
+ * - 支持上传进度显示
+ * - 支持取消上传
+ * - 支持多文件上传
+ */
+ 
+ 
+import React, { useEffect, useRef, useState } from 'react';
+import { Upload, Button, Modal, Image, Space, message, Progress } from 'antd';
+import { 
+  UploadOutlined, 
+  DownloadOutlined, 
+  EyeOutlined, 
+  FilePdfFilled, 
+  FileExcelFilled, 
+  FileWordFilled, 
+  FileTextFilled, 
+  FileUnknownFilled 
+} from '@ant-design/icons';
+import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
+import { FileUploadHandler } from './upload';
+import { getImageBase64ByFile } from './upload/image';
+
+import * as febs from 'febs-browser';
+
+// example:
+// {/* 文件预览模态窗口 */}
+// <UIFilePreviewModal
+//   visible={previewVisible}
+//   file={previewFile}
+//   onClose={() => setPreviewVisible(false)}
+//   onDownload={handleDownloadFile}
+// />
+
+// <UIFileList 
+//   files={request.attachments}
+//   onPreview={onPreviewFile}
+//   onDownload={onDownloadFile}
+// />
+
+// <UIFileUpload 
+//  fileList={[]}
+//  onChange={onFileListChange}
+//  cancel={(file: UploadFile) => {
+//    console.log('取消上传文件:', file);
+//    // 调用文件的 cancel 方法
+//  }}
+// />
+
+interface FileUploadProps {
+  fileList: UploadFile[];
+  onChange?: (fileList: UploadFile[]) => void;
+  onFinish?: (fileList: UploadFile[], serverData: any) => Promise<void>;
+  cancel?: (file: UploadFile) => void;
+  maxCount?: number;
+  disabled?: boolean;
+  btnText?: string;
+  multiple?: boolean;
+  /**
+   * 使用逗号隔开的文件类型：.doc,.docx
+   */
+  accept?: string;
+}
+
+export const UIFileUpload: React.FC<FileUploadProps> = ({
+  fileList,
+  onChange,
+  onFinish,
+  cancel,
+  btnText = '上传文件',
+  maxCount = 5,
+  disabled = false,
+  multiple = true,
+  accept = undefined,
+}) => {
+  const [uploadingPercent, setUploadingPercent] = useState<number | undefined>(undefined);
+  const fileListRef = useRef<UploadFile[]>(fileList);
+
+  useEffect(() => {
+    fileListRef.current = fileList;
+  }, [fileList]);
+
+  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
+    // 更新整个文件列表
+    onChange?.(newFileList);
+  };
+
+  const removeFileFromList = (targetFile: UploadFile) => {
+    onChange?.(fileListRef.current.filter(file => file.uid !== targetFile.uid));
+  };
+
+  const beforeUpload = (file: File) => {
+    const isLt100M = file.size / 1024 / 1024 < 100;
+    if (!isLt100M) {
+      message.error('文件大小不能超过100MB');
+    }
+    return isLt100M || Upload.LIST_IGNORE;
+  };
+
+  const customRequest = async (options: any) => {
+    const { file, onSuccess, onError, onProgress } = options;
+    
+    try {
+      // 设置初始进度
+      file.status = 'uploading';
+      file.percent = 0;
+      onProgress({ percent: 0 });
+      setUploadingPercent(0);
+
+      febs.crypt.crc32_file(file as unknown as File, (crc32) => {
+        if (crc32 == 0) {
+          file.status = 'error';
+          onError('calc crc32 error');
+          return;
+        }
+
+        let abortHandle = FileUploadHandler.uploadSingle(file, crc32, (percent: number) => {
+          const nextPercent = Math.floor(percent * 100);
+          onProgress({ percent: nextPercent });
+          file.percent = nextPercent;
+          setUploadingPercent(nextPercent);
+        }, (err) => {
+          setUploadingPercent(undefined);
+          onError(err);
+        }, (data) => {
+          file.status = 'done';
+          file.percent = 100;
+          setUploadingPercent(undefined);
+          onSuccess("ok");
+          onFinish && onFinish([file], data).then(() => { }).catch(() => { });
+        });
+
+        // 添加取消上传的方法
+        file.cancel = () => {
+          abortHandle.abort(); // 调用上传取消方法
+          
+          file.status = 'error';
+          file.percent = 0;
+          setUploadingPercent(undefined);
+          onError(new Error('上传已取消'));
+          removeFileFromList(file);
+        };
+      });
+      
+    } catch (err) {
+      file.status = 'error';
+      setUploadingPercent(undefined);
+      onError(err);
+    }
+  };
+
+  const isUploading = uploadingPercent !== undefined && uploadingPercent < 100;
+
+  const itemRender = (_originNode: React.ReactElement, file: UploadFile, _fileList: Array<UploadFile>, _actions: {
+    download: () => void;
+    preview: () => void;
+    remove: () => void;
+  }) => {
+    // const fileUploading = file.status === 'uploading' && (file.percent || 0) < 100;
+
+    if (!isUploading) {
+      return null;
+    }
+
+    // 自定义上传列表项
+    return (
+      <div className="flex items-center justify-between w-full mt-2 rounded border border-blue-100 bg-blue-50 px-3 py-2">
+        <span className="mr-3 min-w-0 max-w-[120px] flex-1 truncate text-sm text-gray-700">{file.name}</span>
+        <Progress
+          className="w-[60px]"
+          percent={Math.round(file.percent || 0)}
+          size="small"
+          status="active"
+          showInfo
+        />
+        <Button
+          className="ml-3"
+          size="small"
+          onClick={() => {
+            if (cancel) {
+              cancel(file);
+            } else {
+              (file as any).cancel?.();
+            }
+            removeFileFromList(file);
+          }}
+          danger
+        >
+          取消
+        </Button>
+      </div>
+    );
+  };
+
+  return (
+    <Upload
+      fileList={fileList}
+      onChange={handleChange}
+      beforeUpload={beforeUpload}
+      customRequest={customRequest}
+      multiple={multiple}
+      maxCount={maxCount}
+      disabled={disabled}
+      itemRender={itemRender}
+      accept={accept}
+      // 显示进度条
+      showUploadList={true}
+    >
+      {!isUploading && <Button icon={<UploadOutlined />} disabled={disabled || isUploading}
+        title={multiple ? `上传文件（最多支持${maxCount}个文件，单个文件不超过100MB）` : '上传文件（单个文件不超过100MB）'}
+      >{isUploading ? <span className="inline-block w-[85px]">上传中 {uploadingPercent}%</span> : btnText}</Button>}
+      {/* <span className="ml-2 text-gray-500">
+        {multiple 
+          ? `（最多支持${maxCount}个文件，单个文件不超过100MB）` 
+          : `（单个文件不超过100MB）`}
+      </span> */}
+    </Upload>
+  );
+};
+
+interface FileListProps {
+  files?: UploadFile[];
+  onPreview?: (file: UploadFile) => void;
+  onDownload?: (file: UploadFile) => void;
+}
+
+export const UIFileList: React.FC<FileListProps> = ({
+  files = [],
+  onPreview,
+  onDownload
+}) => {
+  if (files.length === 0) return null;
+
+  return (
+    <div className="p-4 bg-gray-50 rounded">
+      {files.map((file, index) => (
+        <div key={file.uid || index} className="flex items-center mb-2">
+          {getFileIcon(file)}
+          <span className="mr-2">{file.name}</span>
+          <Space>
+            {onPreview && (
+              <Button 
+                type="link" 
+                size="small" 
+                icon={<EyeOutlined />}
+                onClick={() => onPreview(file)}
+              >
+                查看
+              </Button>
+            )}
+            {onDownload && (
+              <Button 
+                type="link" 
+                size="small" 
+                icon={<DownloadOutlined />}
+                onClick={() => onDownload(file)}
+              >
+                下载
+              </Button>
+            )}
+          </Space>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const getFileIcon = (file: UploadFile) => {
+  const fileType = file.type || '';
+  if (fileType.includes('pdf')) {
+    return <FilePdfFilled className="mr-2 text-red-500" />;
+  } else if (fileType.includes('excel') || fileType.includes('spreadsheet') || file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
+    return <FileExcelFilled className="mr-2 text-green-500" />;
+  } else if (fileType.includes('word') || fileType.includes('document') || file.name.endsWith('.docx') || file.name.endsWith('.doc')) {
+    return <FileWordFilled className="mr-2 text-blue-500" />;
+  } else if (fileType.includes('image')) {
+    return <FileTextFilled className="mr-2 text-purple-500" />;
+  } else {
+    return <FileUnknownFilled className="mr-2 text-gray-500" />;
+  }
+};
+
+interface FilePreviewModalProps {
+  visible: boolean;
+  file: UploadFile | null;
+  onClose: () => void;
+  onDownload?: (file: UploadFile) => void;
+}
+
+export const UIFilePreviewModal: React.FC<FilePreviewModalProps> = ({
+  visible,
+  file,
+  onClose,
+  onDownload
+}) => {
+  if (!file) return null;
+
+  const [previewImage, setPreviewImage] = useState<string>('');
+
+  const previewTitle = file.name || '';
+  // const previewImage = file.url || (file.preview as string) || '';
+  const isImage = file.type?.startsWith('image/');
+
+  if (isImage) {
+    getImageBase64ByFile(file as unknown as File, (base64: string | null) => {
+      setPreviewImage(base64||'');
+    });
+  }
+
+  return (
+    <Modal
+      open={visible}
+      title={previewTitle}
+      footer={null}
+      onCancel={onClose}
+      width={800}
+    >
+      {isImage ? (
+        <Image
+          alt={previewTitle}
+          style={{ width: '100%' }}
+          src={previewImage}
+        />
+      ) : (
+        <div className="text-center p-8">
+          <div className="text-6xl mb-4">
+            {getFileIcon(file)}
+          </div>
+          <p className="mb-4">{previewTitle}</p>
+          <p className="text-gray-500 mb-4">该文件类型无法直接预览</p>
+          {onDownload && (
+            <Button 
+              type="primary" 
+              icon={<DownloadOutlined />}
+              onClick={() => onDownload(file)}
+            >
+              下载文件查看
+            </Button>
+          )}
+        </div>
+      )}
+    </Modal>
+  );
+};

package/src/ui/UIImageUpload.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useRef } from 'react';
+import { Button, Modal, message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import ReactCrop, { Crop } from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+import { compressImage, getImageBase64ByFile } from './upload/image';
+
+interface UIImageUploadProps {
+  onUpload: (file: File|string) => Promise<void>;
+  accept?: string;
+  maxSize?: number;
+  aspectRatio?: number;
+  className?: string;
+  useBase64?: boolean;
+  id?: string;
+}
+
+export const UIImageUpload: React.FC<UIImageUploadProps> = ({
+  onUpload,
+  accept = 'image/*',
+  maxSize = 5,
+  aspectRatio,
+  className = '',
+  useBase64 = false,
+  id,
+}) => {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState<string>('');
+  const [crop, setCrop] = useState<Crop>({
+    unit: '%',
+    width: 90,
+    height: 90,
+    x: 5,
+    y: 5,
+  });
+  const [imageRef, setImageRef] = useState<HTMLImageElement | null>(null);
+  const [originalFile, setOriginalFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > maxSize * 1024 * 1024) {
+      message.error(`文件大小不能超过 ${maxSize}MB`);
+      return;
+    }
+
+    if (!file.type.startsWith('image/')) {
+      message.error('请上传图片文件');
+      return;
+    }
+
+    setOriginalFile(file);
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      setPreviewImage(e.target?.result as string);
+      setPreviewVisible(true);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleCropComplete = async (croppedArea: Crop) => {
+    if (!imageRef || !originalFile) return;
+
+    const displayedWidth = imageRef.width;
+    const displayedHeight = imageRef.height;
+    const scaleX = imageRef.naturalWidth / displayedWidth;
+    const scaleY = imageRef.naturalHeight / displayedHeight;
+
+    const fatorW = croppedArea.unit == '%' ? displayedWidth / 100 : 1;
+    const fatorH = croppedArea.unit == '%' ? displayedHeight / 100 : 1;
+
+    const sourceX = croppedArea.x * scaleX * fatorW;
+    const sourceY = croppedArea.y * scaleY * fatorH;
+    const sourceWidth = croppedArea.width * scaleX * fatorW;
+    const sourceHeight = croppedArea.height * scaleY * fatorH;
+
+    try {
+      const canvas = document.createElement('canvas');
+
+      canvas.width = sourceWidth;
+      canvas.height = sourceHeight;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      ctx.drawImage(
+        imageRef,
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        0,
+        0,
+        sourceWidth,
+        sourceHeight
+      );
+
+      canvas.toBlob((blob) => {
+        if (!blob) return;
+        const croppedFile = new File([blob], originalFile.name, {
+          type: originalFile.type,
+        });
+
+        if (useBase64) {
+          getImageBase64ByFile(croppedFile, (base64: string | null) => {
+            compressImage(base64 as string, 0, "image/jpeg", (compressedBase64: string | null) => {
+              setPreviewVisible(false);
+              onUpload(compressedBase64 as string);
+            });
+          });
+          return;
+        } else {
+          setPreviewVisible(false);
+          onUpload(croppedFile);
+        }
+      }, originalFile.type);
+
+      setPreviewVisible(false);
+      setPreviewImage('');
+      setOriginalFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    } catch (error) {
+      message.error('图片处理失败');
+    }
+  };
+
+  return (
+    <div className={className}>
+      <input
+        type="file"
+        ref={fileInputRef}
+        accept={accept}
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+      />
+      <Button
+        id={id}
+        icon={<UploadOutlined />}
+        onClick={() => fileInputRef.current?.click()}
+        className="btn-primary"
+      >
+        选择图片
+      </Button>
+
+      <Modal
+        title="裁剪图片"
+        open={previewVisible}
+        onCancel={() => {
+          setPreviewVisible(false);
+          setPreviewImage('');
+          setOriginalFile(null);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+        }}
+        footer={[
+          <Button key="cancel" onClick={() => setPreviewVisible(false)} className="btn-outline">
+            取消
+          </Button>,
+          <Button
+            key="confirm"
+            type="primary"
+            onClick={() => handleCropComplete(crop)}
+            className="btn-primary"
+          >
+            确认
+          </Button>,
+        ]}
+        width={500}
+      >
+        <div className="flex justify-center">
+          {previewImage && (
+            <ReactCrop
+              crop={crop}
+              onChange={(c) => setCrop(c)}
+              aspect={aspectRatio}
+              className="max-w-full"
+            >
+              <img
+                src={previewImage}
+                alt="预览"
+                ref={(img) => setImageRef(img)}
+                className="max-w-full"
+              />
+            </ReactCrop>
+          )}
+        </div>
+      </Modal>
+    </div>
+  );
+};