@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/esm/components/FormUpload.tpl

@@ -0,0 +1,561 @@
+
+import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
+import { ProFormUploadButton, ProFormUploadDragger } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import type { GetProp, UploadFile, UploadProps } from 'antd';
+import { Form, Image, message, Modal, Progress, Spin, Upload } from 'antd';
+import { BASE_API } from '../constants';
+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 React, { useEffect, useMemo, useRef, useState } from 'react';
+import { FormFileListType, MyFormUploadProps, UploadAcceptType } from '../types';
+import styles from './MyUpload.less';
+
+const { confirm } = Modal;
+const { Dragger } = Upload;
+
+type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+
+const getBase64 = (file: FileType): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+
+const FormUpload = React.memo((props: MyFormUploadProps) => {
+  const {
+    removeConfirmTitle,
+    removeConfirmContent,
+    maxCount,
+    maxSize,
+    label,
+    title,
+    defautlFileList = [],
+    bucketName,
+    needFileNmae,
+    width = 'md',
+    listType = 'text',
+    action = `${BASE_API}/minio/upload`,
+    accept,
+    cname = 'file',
+    noStyle,
+    layout,
+    disabled,
+    showPreviewImage,
+    isReadonly,
+    resolutionConstraints,
+    addBeforeUpload,
+  } = props;
+
+  const isLoaded = useRef(false);
+  const { formatMessage } = useIntl();
+  // 添加上传文件进度追踪
+  const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
+  const [uploadingFiles, setUploadingFiles] = useState<Set<string>>(new Set());
+
+  const [fileList, setFileList] = useState<FormFileListType[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+
+  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: `/minio/${item.fileId}`,
+      size: item.fileSize,
+    }));
+  }, [props.fileList, props.value, fileList]);
+
+  // 上传进度变化回调，文件上传至服务器就会到达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: FormFileListType[] = [
+                ...files,
+                {
+                  fileId: uploadFileId, // 注意，这个id一定不能少，否则展示失败
+                  fileName: originalFileName,
+                  fileSize,
+                  fileType,
+                },
+              ];
+
+              // 如果有最大数量限制，则删除第一个
+              if (maxCount && newList.length > maxCount) {
+                newList.shift();
+              }
+
+              // 使用 setTimeout 确保状态更新完成后再触发 onChange
+              setTimeout(() => {
+                props.onChange?.(newList);
+              }, 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, progressChange, handleXmlRequestError],
+  );
+
+  /**
+   * 删除上传
+   * @param file
+   */
+  const handleRemove = async (file: UploadFile) => {
+    // 自定义删除，不直接删除后台文件
+    if (props.diyRemove) {
+      const newFileList = await props.diyRemove?.({ fileId: file.uid, fileName: file.name }, file.status);
+      setFileList(newFileList);
+      return;
+    }
+    confirm({
+      title: removeConfirmTitle
+        ? removeConfirmTitle
+        : formatMessage({
+            id: 'cfmmUI.File.delete.title',
+            defaultMessage: '删除文件',
+          }),
+      content: removeConfirmContent
+        ? removeConfirmContent
+        : formatMessage({
+            id: 'cfmmUI.File.delete.confirmMessage',
+            defaultMessage: '你确定要删除吗？ 删除后将无法恢复',
+          }),
+      onOk: async () => {
+        //删除后台文件
+        console.log(`删除文件${JSON.stringify(file)}`);
+        const res = await removePackage(file.uid);
+        if (res.code === 200) {
+          // 删除当前项
+          const newList = fileList.filter((item) => item.fileId !== file.uid);
+          setFileList(newList);
+          props.removeAfter?.({ fileId: file.uid, fileName: file.name });
+          props.onChange?.(newList);
+        }
+      },
+      onCancel() {},
+    });
+  };
+
+  // 第一次defautlFileList有值时回显
+  useEffect(() => {
+    if (defautlFileList && defautlFileList.length > 0 && !isLoaded.current) {
+      isLoaded.current = true;
+      setFileList(defautlFileList);
+    }
+  }, [defautlFileList]);
+
+  useEffect(() => {
+    if (props.fileList && props.fileList.length > 0) {
+      setFileList(props.fileList);
+    }
+  }, [props.fileList]);
+
+  const handlePreview = async (file: UploadFile) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj as FileType);
+    }
+
+    setPreviewImage(file.url || (file.preview as string));
+    setPreviewOpen(true);
+  };
+
+  // 点击链接触发自定义逻辑（触发onPreview，如果显示为图片类型，且能预览，请设置showPreviewImage为true）
+  const handleFileClick = (file: UploadFile) => {
+    fileDownloadFromId(file.uid, file.name);
+  };
+
+  const baseOptions = {
+    accept: Array.isArray(accept) ? accept.join(',') : accept,
+    action,
+    noStyle,
+    layout,
+    width,
+    disabled: disabled || isReadonly,
+    name: cname,
+    value: componentValue,
+    initialValue: fileList,
+    max: maxCount,
+    label: label ? label : formatMessage({ id: 'cfmmUI.File.upload.file', defaultMessage: '上传文件' }),
+    title: title ? title : formatMessage({ id: 'cfmmUI.File.upload.file.title', defaultMessage: '点击上传文件' }),
+    fieldProps: {
+      multiple: maxCount ? maxCount > 1 : true,
+      onRemove: handleRemove,
+      beforeUpload,
+      onPreview: showPreviewImage ? handlePreview : handleFileClick,
+      customRequest: handlerCustomerUploadFile,
+    },
+  };
+
+  return (
+    <div className={styles.proFormUploadButton}>
+      <Spin spinning={loading}>
+        {listType === 'dragger' ? (
+          isReadonly && !componentValue.length ? (
+            <Form.Item label={baseOptions.label} noStyle={noStyle}>
+              <Dragger disabled>
+                <p className="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">{baseOptions.title}</p>
+              </Dragger>
+            </Form.Item>
+          ) : (
+            <ProFormUploadDragger {...baseOptions} />
+          )
+        ) : isReadonly && !componentValue.length ? (
+          <Form.Item label={baseOptions.label} noStyle={noStyle}>
+            <Upload disabled listType={listType}>
+              <div>
+                <UploadOutlined /> {baseOptions.title}
+              </div>
+            </Upload>
+          </Form.Item>
+        ) : (
+          <ProFormUploadButton
+            {...baseOptions}
+            fieldProps={{
+              ...baseOptions.fieldProps,
+              listType,
+            }}
+          />
+        )}
+
+        {Object.values(uploadProgress).length > 0 &&
+          Object.values(uploadProgress).map((progress, idx) => {
+            return <Progress key={idx} percent={progress} />;
+          })}
+
+        {previewImage && showPreviewImage && (
+          <Image
+            wrapperStyle={{ display: 'none' }}
+            preview={{
+              visible: previewOpen,
+              onVisibleChange: (visible) => setPreviewOpen(visible),
+              afterOpenChange: (visible) => !visible && setPreviewImage(''),
+            }}
+            src={previewImage}
+          />
+        )}
+      </Spin>
+    </div>
+  );
+});
+
+export default React.memo(FormUpload);

package/dist/esm/components/GlobalFooter.tpl

@@ -0,0 +1,21 @@
+import { DefaultFooter } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import React from 'react';
+
+/**
+ * 全局页脚
+ */
+const GlobalFooter = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <DefaultFooter
+      copyright={`2018-${new Date().getFullYear()} ${formatMessage({
+        id: 'cfmmUI.GlobalFooter.title',
+        defaultMessage: '广东翠峰机器人科技股份有限公司',
+      })}`}
+    />
+  );
+};
+
+export default React.memo(GlobalFooter);

package/dist/esm/components/GlobalHeader.less

@@ -0,0 +1,51 @@
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+
+.right {
+  display: flex;
+  float: right;
+  align-items: center;
+  height: 48px;
+  margin-left: auto;
+  overflow: hidden;
+
+  .action {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    > span {
+      vertical-align: middle;
+    }
+
+    &:hover {
+      background: @pro-header-hover-bg;
+    }
+
+    &:global(.opened) {
+      background: @pro-header-hover-bg;
+    }
+  }
+}
+
+:global(.ant-pro-global-header) {
+  .dark {
+    .action {
+      color: @text-color;
+
+      > span {
+        color: @text-color;
+      }
+
+      &:hover {
+        color: rgba(255, 255, 255, 85%);
+
+        > span {
+          color: rgba(255, 255, 255, 85%);
+        }
+      }
+    }
+  }
+}