@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/cjs/components/MyUpload.tpl

@@ -0,0 +1,609 @@
+import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import type { UploadFile, UploadProps } from 'antd';
+import { Button, message, Modal, Progress, Spin, Upload } from 'antd';
+import { BASE_API } from '../constants';
+import useAction from '../hooks/useAction';
+import { removePackage } from '../services';
+import { fileDownloadFromId, formatBytes } from '../utils/fileHelper';
+import xmlRequest from '../utils/xmlRequest';
+// @ts-ignore
+import { RcCustomRequestOptions } from 'antd/lib/upload/interface';
+import classnames from 'classnames';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { FileListType, MyUploadProps, UploadAcceptType } from '../types';
+import styles from './MyUpload.less';
+
+const { confirm } = Modal;
+const { Dragger } = Upload;
+
+const baseLocalCode = 'cfmmUI.File';
+const baseLocalName = '文件';
+
+const DraggerUpload = (props: MyUploadProps) => {
+  const {
+    removeConfirmTitle,
+    removeConfirmContent,
+    maxCount,
+    maxSize,
+    defautlFileList = [],
+    bucketName,
+    uploadType = 'drag',
+    listType = 'text',
+    action = `${BASE_API}/minio/upload`,
+    accept,
+    cname = 'file',
+    canDownload = true,
+    readonly,
+    disabled,
+    needFileNmae,
+    resolutionConstraints,
+    children,
+    onChange,
+    addBeforeUpload,
+    ...reset
+  } = props;
+
+  const loadRef = useRef<boolean>(false);
+  const { formatMessage } = useIntl();
+  const { doAction } = useAction({ baseLocalCode, baseLocalName });
+
+  // 监听外部value变化，当从有值变为空值时重置内部fileList
+  const prevValueRef = useRef(props.value || props.fileList);
+
+  // 添加上传文件进度追踪
+  const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
+  const [uploadingFiles, setUploadingFiles] = useState<Set<string>>(new Set());
+  const [previewImage, setPreviewImage] = useState<string>();
+  const [previewVisible, setPreviewVisible] = useState<boolean>(false);
+  const [fileList, setFileList] = useState<FileListType[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const componentValue: UploadFile[] = useMemo(() => {
+    // 优先使用外部fileList，没有则使用表单value，如果也不是表单则使用内部fileList
+    let list = props.fileList ? props.fileList : props.value || fileList;
+
+    if (list && !Array.isArray(list)) {
+      // 只有一个id，转为对象数组
+      if (typeof list === 'string') {
+        list = [
+          {
+            fileId: list,
+            fileName: list,
+          },
+        ];
+      } else {
+        // 如果是对象，则转为数组
+        list = [list];
+      }
+    }
+
+    if (list && !Array.isArray(list)) {
+      list = fileList;
+    }
+
+    return list?.map((item) => ({
+      uid: item.fileId,
+      name: item.fileName ? item.fileName : item.fileId,
+      url: canDownload ? `/minio/${item.fileId}` : undefined,
+      size: item.fileSize,
+    }));
+  }, [props.fileList, props.value, fileList]);
+
+  /**
+   * 预览图片
+   * @param file
+   */
+  const handlePreview = (file: UploadFile) => {
+    setPreviewImage(file.url || file.thumbUrl);
+    setPreviewVisible(true);
+  };
+
+  /**
+   * 取消预览
+   */
+  const handlePreviewCancel = () => {
+    setPreviewVisible(false);
+  };
+
+  // 上传进度变化回调，文件上传至服务器就会到达100，但需等待服务器返回结果
+  const progressChange = (uid: string, percent: number) => {
+    // 进度大于99时，固定在99，直到接口返回结果
+    setUploadProgress((prev) => ({
+      ...prev,
+      [uid]: percent >= 99 ? 99 : percent,
+    }));
+  };
+
+  // 上传前校验
+  const checkOtherConditions: UploadProps['beforeUpload'] = (file, fileList) => {
+    // 覆盖默认校验
+    if (props.beforeUpload) {
+      return props.beforeUpload?.(file, fileList);
+    }
+
+    // 添加自定义校验
+    const isPassBeforeUpload = addBeforeUpload?.(file, fileList) ?? true;
+
+    // 获取文件扩展名
+    const fileName = file.name;
+    const fileExtension: UploadAcceptType | null =
+      fileName.lastIndexOf('.') > -1 ? (('.' + fileName.split('.').pop()?.toLowerCase()) as UploadAcceptType) : null;
+
+    // 校验文件类型
+    let isTypeCheck = true;
+    if (accept) {
+      const acceptTypes = Array.isArray(accept) ? accept : accept.replace(/\s/g, '').split(',');
+
+      // 检查文件类型或文件扩展名是否匹配
+      isTypeCheck = acceptTypes.some((acceptType) => {
+        // 处理通配符格式 (如 "image/*", "video/*")
+        if (acceptType.includes('/*')) {
+          const baseType = acceptType.split('/')[0];
+          return file.type.startsWith(`${baseType}/`);
+        }
+
+        // 直接检查MIME类型
+        if (file.type && acceptType.includes('/')) {
+          return file.type === acceptType;
+        }
+
+        // 检查文件扩展名
+        if (fileExtension) {
+          // 直接匹配扩展名
+          return acceptType.toLowerCase() === fileExtension.toLowerCase();
+        }
+
+        return false;
+      });
+    }
+    if (!isTypeCheck && accept) {
+      const acceptTypes = Array.isArray(accept) ? accept : accept.replace(/\s/g, '').split(',');
+      const supportedTypes = acceptTypes
+        .map((type) => {
+          if (type.includes('/*')) {
+            return `${type.split('/')[0]}`;
+          }
+          if (type.startsWith('.')) {
+            return `${type.split('.')[1]}`;
+          }
+          return type;
+        })
+        .join('、');
+
+      message.error(
+        formatMessage(
+          {
+            id: 'cfmmUI.File.check.type.failMessage',
+            defaultMessage: '仅支持上传{types}格式的文件',
+          },
+          { type: supportedTypes },
+        ),
+      );
+    }
+
+    // 校验文件大小
+    let isLt = true;
+    if (maxSize) {
+      isLt = file.size <= maxSize;
+    }
+
+    if (!isLt) {
+      message.error(
+        formatMessage(
+          { id: 'cfmmUI.File.check.size.failMessage', defaultMessage: '文件不能大于xx' },
+          { size: formatBytes(maxSize) },
+        ),
+      );
+    }
+
+    return isTypeCheck && isLt && isPassBeforeUpload;
+  };
+
+  // 上传前校验
+  const beforeUpload: UploadProps['beforeUpload'] = async (file, fileList) => {
+    // 在组件中使用时解构
+    const { maxWidth, maxHeight, minWidth, minHeight } = resolutionConstraints || {};
+
+    // 视频分辨率校验
+    if (file.type.startsWith('video/') && ((maxWidth && maxHeight) || (minWidth && minHeight))) {
+      return new Promise((resolve) => {
+        // 创建视频元素来获取视频信息
+        const video = document.createElement('video');
+        video.preload = 'metadata';
+
+        video.onloadedmetadata = () => {
+          URL.revokeObjectURL(video.src);
+
+          // 获取视频分辨率
+          const width = video.videoWidth;
+          const height = video.videoHeight;
+
+          if (maxWidth && maxHeight) {
+            if (width > maxWidth || height > maxHeight) {
+              message.error(
+                formatMessage(
+                  {
+                    id: 'cfmmUI.File.check.resolution.max.failMessage',
+                    defaultMessage: '视频分辨率不能高于720P (1280x720)',
+                  },
+                  { size: `${maxHeight}P (${maxWidth}x${maxHeight})` },
+                ),
+              );
+              resolve(false);
+              return;
+            }
+          }
+          if (minWidth && minHeight) {
+            if (width < minWidth || height < minHeight) {
+              message.error(
+                formatMessage(
+                  {
+                    id: 'cfmmUI.File.check.resolution.min.failMessage',
+                    defaultMessage: '视频分辨率不能低于720p (1280x720)',
+                  },
+                  { size: `${minHeight}P (${minWidth}x${minHeight})` },
+                ),
+              );
+              resolve(false);
+              return;
+            }
+          }
+
+          // 继续执行其他校验
+          const otherChecks = checkOtherConditions(file, fileList);
+          resolve(otherChecks);
+        };
+        video.onerror = () => {
+          message.error(
+            formatMessage({
+              id: 'cfmmUI.File.check.video.failMessage',
+              defaultMessage: '视频文件无法读取',
+            }),
+          );
+          resolve(false);
+        };
+
+        video.src = URL.createObjectURL(file);
+      });
+    }
+
+    // 非视频文件，执行原有校验逻辑
+    return checkOtherConditions(file, fileList);
+  };
+
+  // xml请求报错处理
+  const handleXmlRequestError = (uid: string, error: ProgressEvent<EventTarget> | Error) => {
+    let errorMessage = formatMessage({
+      id: 'cfmmUI.File.request.error',
+      defaultMessage: '上传失败',
+    });
+
+    // 处理不同类型的错误
+    if (error instanceof Error) {
+      // 处理普通 Error 对象
+      errorMessage = error.message;
+    } else if (error instanceof ProgressEvent) {
+      // 处理网络相关错误
+      const target = error.target as XMLHttpRequest;
+      if (target.status === 0) {
+        errorMessage = formatMessage({
+          id: 'cfmmUI.File.request.timeOut',
+          defaultMessage: '请求超时或网络异常',
+        });
+      } else if (target.status >= 500) {
+        errorMessage = formatMessage({
+          id: 'cfmmUI.File.request.serverError',
+          defaultMessage: '服务器错误',
+        });
+      } else if (target.status === 413) {
+        errorMessage = formatMessage({
+          id: 'cfmmUI.File.request.fileTooLarge',
+          defaultMessage: '文件太大',
+        });
+      }
+    }
+
+    message.error(errorMessage);
+    setLoading(false);
+    setUploadProgress((prev) => {
+      const newProgress = { ...prev };
+      delete newProgress[uid];
+      return newProgress;
+    });
+  };
+
+  /**
+   * 上传事件
+   * @param options
+   */
+  const handlerCustomerUploadFile: UploadProps['customRequest'] = React.useCallback(
+    (options: RcCustomRequestOptions) => {
+      if (!bucketName) return;
+
+      const { onSuccess, onError, file, onProgress, action } = options;
+      setLoading(true);
+
+      // 添加文件到上传队列
+      setUploadingFiles((prev) => new Set(prev).add(file.uid));
+      setUploadProgress((prev) => ({
+        ...prev,
+        [file.uid]: 0,
+      }));
+
+      const fmData = new FormData();
+      fmData.append('file', file);
+      fmData.append('bucketName', bucketName);
+      if (needFileNmae) {
+        fmData.append('fileName', file.name.replace(/\.([^.]*)$/, ''));
+      }
+      // 使用xmlHttpRequest上传文件，才能获取上传进度
+      xmlRequest(action, {
+        body: fmData,
+        progressChange: (percent) => progressChange(file.uid, percent),
+        onProgress,
+        onError: (err) => handleXmlRequestError(file.uid, err),
+        onSuccess,
+      })
+        .then((res) => {
+          /**
+           * 上传完成，回调函数通知控件
+           */
+          if (res && res.code === 200) {
+            const { uploadFileId, originalFileName, fileSize, fileType } = res.data;
+            /**
+             * 成功返回方法中的参数，最后会在file和fileList的response属性中存在
+             */
+            onSuccess(res.data);
+
+            setFileList((files) => {
+              /**
+               * 成功返回数据
+               */
+              const newList: FileListType[] = [
+                ...files,
+                {
+                  fileId: uploadFileId, // 注意，这个id一定不能少，否则展示失败
+                  fileName: originalFileName,
+                  fileSize,
+                  fileType,
+                },
+              ];
+
+              // 如果有最大数量限制，则删除第一个
+              if (maxCount && newList.length > maxCount) {
+                newList.shift();
+              }
+
+              // 使用 setTimeout 确保状态更新完成后再触发 onChange
+              setTimeout(() => {
+                onChange?.(newList, 'ADD');
+              }, 0);
+
+              return newList;
+            });
+
+            // 上传到文件服务器给用户显示进度至99%，直到结果返回客户端才设置为100%
+            setUploadProgress((prev) => ({
+              ...prev,
+              [file.uid]: 100,
+            }));
+          } else {
+            /**
+             * 不成功则出现错误
+             */
+            const error = new Error(res.msg);
+            onError(error);
+          }
+        })
+        .catch((err) => {
+          onError({ err });
+        })
+        .finally(() => {
+          // 从上传队列中移除文件
+          setUploadingFiles((prev) => {
+            const newSet = new Set(prev);
+            newSet.delete(file.uid);
+            return newSet;
+          });
+
+          // 清理该文件的进度
+          setTimeout(() => {
+            setUploadProgress((prev) => {
+              const newProgress = { ...prev };
+              delete newProgress[file.uid];
+              return newProgress;
+            });
+          }, 2000);
+
+          // 如果没有正在上传的文件，则关闭 loading
+          if (uploadingFiles.size === 0) {
+            setLoading(false);
+          }
+        });
+    },
+    [bucketName, maxCount, needFileNmae, onChange, progressChange, handleXmlRequestError],
+  );
+
+  // 拖拽文件上传事件
+  const handleDrop = () => {};
+
+  /**
+   * 删除上传
+   * @param file
+   */
+  const handleRemove = async (file: UploadFile) => {
+    // 自定义删除，不直接删除后台文件
+    if (props.diyRemove) {
+      // 返回新数组或者布尔值，布尔值表示是否删除成功
+      const result = await props.diyRemove?.({ fileId: file.uid, fileName: file.name }, fileList);
+      if (Array.isArray(result)) {
+        setFileList(result);
+        return;
+      }
+      if (typeof result === 'boolean') {
+        // 删除成功过滤掉删除的文件
+        if (result) {
+          setFileList((fileList) => fileList.filter((item) => item.fileId !== file.uid));
+          return;
+        }
+      }
+      return;
+    }
+    confirm({
+      title: removeConfirmTitle
+        ? removeConfirmTitle
+        : formatMessage({
+            id: 'cfmmUI.File.delete.title',
+            defaultMessage: '删除文件',
+          }),
+      content: removeConfirmContent
+        ? removeConfirmContent
+        : formatMessage({
+            id: 'cfmmUI.File.delete.confirmMessage',
+            defaultMessage: '你确定要删除吗？ 删除后将无法恢复',
+          }),
+      onOk: async () => {
+        //删除文件
+        const res = await doAction('DELETE', file.uid, {
+          actionFn: removePackage,
+        });
+        if (res.success) {
+          // 删除当前项
+          const newList = fileList.filter((item) => item.fileId !== file.uid);
+          setFileList(newList);
+          onChange?.(newList, 'DELETE');
+        }
+      },
+      onCancel() {},
+    });
+  };
+
+  const showPreviewImage = useMemo(() => {
+    return listType === 'picture' || listType === 'picture-card';
+  }, [listType]);
+
+  // 点击链接触发自定义逻辑（触发onPreview，如果显示为图片类型，且能预览，请设置showPreviewImage为true）
+  const handleFileClick = (file: UploadFile) => {
+    fileDownloadFromId(file.uid, file.name);
+  };
+
+  const baseProps = {
+    accept: Array.isArray(accept) ? accept.join(',') : accept,
+    action,
+    disabled: disabled || readonly,
+    name: cname,
+    listType,
+    fileList: componentValue,
+    multiple: maxCount ? maxCount > 1 : true,
+    maxCount,
+    beforeUpload,
+    onRemove: handleRemove,
+    customRequest: handlerCustomerUploadFile,
+    onPreview: showPreviewImage ? handlePreview : handleFileClick,
+  };
+
+  // 第一次defautlFileList有值时回显
+  useEffect(() => {
+    if (defautlFileList && defautlFileList.length > 0 && !loadRef.current && !props.fileList && !props.value) {
+      loadRef.current = true;
+
+      setFileList(defautlFileList);
+    }
+  }, [defautlFileList, props.fileList, props.value]);
+
+  useEffect(() => {
+    const prevValue = prevValueRef.current;
+    const currentValue = props.value;
+    
+    // 只有当外部value从有值变为空值时，且没有外部fileList时，才清空内部fileList
+    if (!props.fileList && 
+        prevValue && // 之前有值
+        (!currentValue || (Array.isArray(currentValue) && currentValue.length === 0))) { // 现在没值
+      setFileList([]);
+    }
+    
+    // 更新ref
+    prevValueRef.current = currentValue;
+  }, [props.fileList, props.value]);
+
+  return (
+    <div className={styles.myUpload}>
+      <Spin spinning={loading}>
+        {uploadType === 'drag' && (
+          <Dragger {...reset} {...baseProps} onDrop={handleDrop}>
+            {children ? (
+              children
+            ) : (
+              <>
+                <p className="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">
+                  {formatMessage({
+                    id: 'cfmmUI.File.clickOrDragFiletoUpload',
+                    defaultMessage: '点击或拖拽文件到此处上传',
+                  })}
+                </p>
+              </>
+            )}
+          </Dragger>
+        )}
+        {uploadType === 'image' && (
+          <Upload
+            {...reset}
+            {...baseProps}
+            listType="picture-card"
+            accept={baseProps.accept ? baseProps.accept : 'image/*'}
+            onPreview={handlePreview}
+            action={action}
+            name={cname}
+            className={classnames({
+              [styles.hiddenUploadButton]: (maxCount && componentValue.length >= maxCount) || readonly,
+            })}
+          >
+            {children ? (
+              children
+            ) : (
+              <>
+                <div>
+                  <PlusOutlined />
+                  <div style={{ marginTop: 8 }}>
+                    <FormattedMessage id="cfmmUI.File.upload.image" defaultMessage="上传照片" />
+                  </div>
+                </div>
+              </>
+            )}
+
+            <Modal open={previewVisible} footer={null} onCancel={handlePreviewCancel}>
+              <img alt="example" style={{ width: '100%' }} src={previewImage} />
+            </Modal>
+          </Upload>
+        )}
+        {uploadType === 'file' && (
+          <Upload
+            {...reset}
+            {...baseProps}
+            className={classnames({
+              [styles.hiddenUploadButton]: (maxCount && componentValue.length >= maxCount) || readonly,
+            })}
+          >
+            {children ? (
+              children
+            ) : (
+              <Button icon={<UploadOutlined />}>
+                {formatMessage({ id: 'cfmmUI.File.upload.file', defaultMessage: '上传文件' })}
+              </Button>
+            )}
+          </Upload>
+        )}
+        {Object.values(uploadProgress).length > 0 &&
+          Object.values(uploadProgress).map((progress, idx) => {
+            return <Progress key={idx} percent={progress} />;
+          })}
+      </Spin>
+    </div>
+  );
+};
+
+export default React.memo(DraggerUpload);

package/dist/cjs/components/NoFoundPage.tpl

@@ -0,0 +1,46 @@
+import { useIntl, useModel } from "@umijs/max";
+import { Button, Result } from "antd";
+import React from "react";
+
+interface NoFoundPageProps {
+  onClick?: () => void;
+  logout?: () => void;
+}
+
+/**
+ * 404页面
+ * @param param0 重定向路由path
+ * @returns
+ */
+const NoFoundPage: React.FC<NoFoundPageProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const { logout } = useModel('login');
+
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="Sorry, the page you visited does not exist."
+      extra={[
+        <Button key="1" type="primary" onClick={() => props?.onClick?.()}>
+          Back Home
+        </Button>,
+        <div key="2">
+          <Button
+            type="link"
+            onClick={() => {
+              props.logout?.() || logout?.();
+            }}
+          >
+            {formatMessage({
+              id: 'cfmmUI.common.useOtherUserLogin.title',
+              defaultMessage: '使用其他用户登陆',
+            })}
+          </Button>
+        </div>
+      ]}
+    />
+  );
+};
+
+export default NoFoundPage;