@hsu-react/ui 0.0.1

package/src/components/Upload/_components/UploadedItem/index.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { UploadFile, Tooltip, Popconfirm } from "antd";
+import classNames from "classnames";
+import Button from "../../../Button";
+import { downloadFile } from "hsu-utils";
+import { deepCopy } from "hsu-utils";
+import { FilePreviewTypeArr } from "../../../FilePreview";
+import styles from "../../index.module.less";
+import { UploadProps } from "../..";
+
+interface UploadedItemProps {
+  file: UploadFile;
+  listProps?: UploadProps["listProps"];
+  en?: boolean;
+  disabled?: boolean;
+  downloading: Record<string, AbortController>;
+  setDownloading: (downloading: Record<string, AbortController>) => void;
+  onPreview?: (file: UploadFile) => void;
+  onDownload?: (file: UploadFile) => void;
+  onRemove: () => void;
+  onPreviewClick: (info: {
+    fileUrl?: string;
+    fileType?: string;
+    fileName?: string;
+  }) => void;
+}
+
+export const UploadedItem: React.FC<UploadedItemProps> = ({
+  file,
+  listProps,
+  en,
+  disabled,
+  downloading,
+  setDownloading,
+  onPreview,
+  onDownload,
+  onRemove,
+  onPreviewClick,
+}) => {
+  const { name, url } = file;
+  const fileType = (name ?? url)?.split(".").pop()?.toLowerCase();
+
+  const handleDownload = () => {
+    if (onDownload) {
+      onDownload(file);
+    } else {
+      const controller = new AbortController();
+      const signal = controller.signal;
+
+      setDownloading(
+        deepCopy({
+          ...downloading,
+          [file.uid]: controller,
+        }),
+      );
+
+      downloadFile(
+        listProps?.itemDownload?.formatUrl?.(file) ||
+          listProps?.formatUrl?.(file) ||
+          url ||
+          "",
+        name || "",
+        signal,
+      ).then(() => {
+        delete downloading[file.uid];
+        setDownloading(deepCopy(downloading));
+      });
+    }
+  };
+
+  const handlePreview = () => {
+    if (onPreview) {
+      onPreview(file);
+    } else {
+      const formatInfo = listProps?.itemPreview?.formatInfo?.(file);
+      onPreviewClick({
+        fileUrl: formatInfo?.fileUrl || listProps?.formatUrl?.(file) || url,
+        fileType: formatInfo?.fileType || fileType,
+        fileName: formatInfo?.fileName || name,
+      });
+    }
+  };
+
+  const handleRemove = () => {
+    onRemove();
+    if (downloading[file.uid]) {
+      downloading[file.uid].abort();
+      delete downloading[file.uid];
+      setDownloading(deepCopy(downloading));
+    }
+  };
+
+  return (
+    <div className={classNames(styles.fileItem, listProps?.item)}>
+      <Tooltip
+        title={name}
+        color="#f2f4f5"
+        styles={{
+          body: { color: "#131212", padding: "6px 16px" },
+        }}
+      >
+        <div className={classNames(styles.fileName, listProps?.itemName)}>
+          {name || url?.split("/").pop()}
+        </div>
+      </Tooltip>
+      {((fileType && FilePreviewTypeArr.includes(fileType)) || onPreview) && (
+        <Button {...listProps?.itemPreview} onClick={handlePreview}>
+          {en ? "Preview" : "预览"}
+        </Button>
+      )}
+      <Button
+        onClick={handleDownload}
+        disabled={!!downloading[file.uid]}
+        {...listProps?.itemDownload}
+      >
+        {en
+          ? downloading[file.uid]
+            ? "Downloading..."
+            : "Download"
+          : downloading[file.uid]
+            ? "下载中..."
+            : "下载"}
+      </Button>
+      {!disabled && (
+        <Popconfirm
+          placement="bottom"
+          title={en ? "Are you sure you want to delete?" : "确认删除?"}
+          okText={en ? "Confirm" : "确认"}
+          cancelText={en ? "Cancel" : "取消"}
+          onConfirm={handleRemove}
+        >
+          <Button danger {...listProps?.itemRemove}>
+            {en ? "Delete" : "删除"}
+          </Button>
+        </Popconfirm>
+      )}
+    </div>
+  );
+};

package/src/components/Upload/_components/UploadingItem/index.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { UploadFile, Progress, Tooltip, Popconfirm } from "antd";
+import classNames from "classnames";
+import Button from "../../../Button";
+import styles from "../../index.module.less";
+
+interface UploadingItemProps {
+  file: UploadFile;
+  listProps?: {
+    item?: string;
+    itemName?: string;
+    itemProgress?: {
+      hide?: boolean;
+      className?: string;
+    };
+    itemRemove?: Partial<React.ComponentProps<typeof Button>>;
+  };
+  en?: boolean;
+  onRemove: () => void;
+}
+
+export const UploadingItem: React.FC<UploadingItemProps> = ({
+  file,
+  listProps,
+  en,
+  onRemove,
+}) => {
+  const { name, url, percent } = file;
+
+  return (
+    <div className={classNames(styles.fileItem, listProps?.item)}>
+      <div className={styles.uploading}>
+        <Tooltip
+          title={name}
+          color="#f2f4f5"
+          styles={{
+            body: { color: "#131212", padding: "6px 16px" },
+          }}
+        >
+          <div
+            className={classNames(styles.fileName, listProps?.itemName)}
+          >
+            {name || url?.split("/").pop()}
+          </div>
+        </Tooltip>
+        {!listProps?.itemProgress?.hide && (
+          <Progress
+            className={classNames(styles.progress, listProps?.itemProgress?.className)}
+            percent={percent}
+            showInfo={false}
+          />
+        )}
+      </div>
+      <Popconfirm
+        placement="bottom"
+        title={en ? "Are you sure you want to delete?" : "确认删除?"}
+        okText={en ? "Confirm" : "确认"}
+        cancelText={en ? "Cancel" : "取消"}
+        onConfirm={onRemove}
+      >
+        <Button danger {...listProps?.itemRemove}>
+          {en ? "Delete" : "删除"}
+        </Button>
+      </Popconfirm>
+    </div>
+  );
+};
+

package/src/components/Upload/_hooks/index.ts

@@ -0,0 +1,4 @@
+export { useUploadFileList } from "./useUploadFileList";
+export { useUploadOperations } from "./useUploadOperations";
+export { useUploadPreview } from "./useUploadPreview";
+

package/src/components/Upload/_hooks/useUploadFileList.ts

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import { UploadFile } from "antd";
+import { deepCopy, Equal } from "hsu-utils";
+import { extractFileUrl } from "../_utils";
+
+interface UseUploadFileListProps {
+  fileList?: UploadFile[];
+  onChange?: (params: { file: UploadFile; fileList: UploadFile[] }) => void;
+  rmFile?: string;
+}
+
+/**
+ * 管理上传文件列表状态
+ */
+export function useUploadFileList({
+  fileList,
+  onChange,
+  rmFile,
+}: UseUploadFileListProps) {
+  const [_fileList, setFilelist] = useState<UploadFile[]>([]);
+  const [lastFileList, setLastFileList] = useState<UploadFile[]>([]);
+
+  useEffect(() => {
+    if (rmFile) {
+      const file = _fileList.find((item) => item.uid === rmFile);
+      const filteredList = _fileList.filter((item) => item.uid !== rmFile);
+      if (file) {
+        setFilelist(filteredList);
+        setTimeout(() => {
+          onChange?.({
+            file,
+            fileList: filteredList,
+          });
+        }, 100);
+      }
+    }
+  }, [_fileList, onChange, rmFile]);
+
+  useEffect(() => {
+    if (!Equal.ObjEqual(fileList ?? [], lastFileList)) {
+      if (fileList?.length) {
+        setFilelist(deepCopy(fileList));
+        setLastFileList(deepCopy(fileList));
+      } else {
+        setFilelist([]);
+        setLastFileList([]);
+      }
+    }
+  }, [fileList, lastFileList]);
+
+  const handleChange = ({
+    file,
+    fileList: newFileList,
+  }: {
+    file: UploadFile;
+    fileList: UploadFile[];
+  }) => {
+    setFilelist(newFileList);
+
+    const uploaded = newFileList.filter((item) => item.status !== "uploading");
+    if (uploaded.length) {
+      const processedList = uploaded
+        .filter((item) => item?.response?.code !== "ERR_CANCELED")
+        ?.map((item) => extractFileUrl(item));
+
+      onChange?.({
+        file,
+        fileList: processedList,
+      });
+      setLastFileList(processedList);
+    }
+  };
+
+  return {
+    fileList: _fileList,
+    setFileList: setFilelist,
+    onChange: handleChange,
+  };
+}

package/src/components/Upload/_hooks/useUploadOperations.ts

@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from "react";
+import { deepCopy, Equal } from "hsu-utils";
+import { UploadingList } from "..";
+
+interface UseUploadOperationsProps {
+  onUploadingList?: (list: UploadingList) => void;
+}
+
+/**
+ * 管理上传和下载操作
+ */
+export function useUploadOperations({
+  onUploadingList,
+}: UseUploadOperationsProps) {
+  const [uploadingList, setUploadingList] = useState<UploadingList>({});
+  const [lastUploadList, setLastUploadList] = useState<UploadingList>({});
+  const [downloading, setDownloading] = useState<
+    Record<string, AbortController>
+  >({});
+  const operationsRef = useRef<{
+    downloading: Record<string, AbortController>;
+    uploadingList: UploadingList;
+  }>({
+    downloading: {},
+    uploadingList: {},
+  });
+
+  // 更新时同步到 ref
+  useEffect(() => {
+    operationsRef.current.downloading = downloading;
+  }, [downloading]);
+
+  useEffect(() => {
+    operationsRef.current.uploadingList = uploadingList;
+  }, [uploadingList]);
+
+  useEffect(() => {
+    if (!Equal.ObjEqual(uploadingList, lastUploadList)) {
+      onUploadingList?.(deepCopy(uploadingList));
+      setLastUploadList(deepCopy(uploadingList));
+    }
+  }, [uploadingList, lastUploadList, onUploadingList]);
+
+  // 清理函数
+  useEffect(() => {
+    return () => {
+      const {
+        downloading: currentDownloading,
+        uploadingList: currentUploadingList,
+      } = operationsRef.current;
+
+      Object.values(currentDownloading)?.forEach((controller) => {
+        controller?.abort();
+      });
+
+      Object.values(currentUploadingList)?.forEach((controllers) => {
+        controllers?.forEach((c) => c?.());
+      });
+
+      operationsRef.current = {
+        downloading: {},
+        uploadingList: {},
+      };
+      setDownloading({});
+      setUploadingList({});
+      setLastUploadList({});
+    };
+  }, []);
+
+  return {
+    uploadingList,
+    setUploadingList,
+    downloading,
+    setDownloading,
+    operationsRef,
+  };
+}

package/src/components/Upload/_hooks/useUploadPreview.ts

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import { FilePreviewType } from "../../FilePreview";
+
+/**
+ * 管理文件预览状态
+ */
+export function useUploadPreview() {
+  const [file, setFile] = useState<{
+    fileUrl?: string;
+    fileType?: FilePreviewType;
+    fileName?: string;
+  }>({});
+
+  return {
+    file,
+    setFile,
+    open: !!file.fileUrl,
+  };
+}
+

package/src/components/Upload/_utils/chunkUpload.ts

@@ -0,0 +1,179 @@
+import axios, { Canceler } from "axios";
+import { RcFile } from "antd/es/upload";
+import { getUUID } from "../../../utils";
+import { deepCopy } from "hsu-utils";
+import { toMB, validateFile, createFormData, isSuccessResponse } from ".";
+import { UploadingList } from "..";
+
+interface ChunkUploadOptions {
+  file: RcFile;
+  chunkAction: string;
+  mergeChunkAction: string;
+  chunkNum: number;
+  data?: Partial<Record<string, string>>;
+  headers?: Record<string, string>;
+  accept?: string;
+  size?: number;
+  en?: boolean;
+  uploadingList: UploadingList;
+  setUploadingList: (list: UploadingList) => void;
+  onProgress?: (progress: { percent: number }) => void;
+  onSuccess?: (response: unknown) => void;
+  onError?: (error: Error) => void;
+  onUploadSuccess?: () => void;
+}
+
+/**
+ * 分片上传
+ */
+export async function chunkUpload({
+  file,
+  chunkAction,
+  mergeChunkAction,
+  chunkNum,
+  data,
+  headers,
+  accept,
+  size,
+  en,
+  uploadingList,
+  setUploadingList,
+  onProgress,
+  onSuccess,
+  onError,
+  onUploadSuccess,
+}: ChunkUploadOptions) {
+  // 验证文件
+  const validation = validateFile({ file, accept, size, en });
+  if (!validation.valid) {
+    onError?.(validation.error!);
+    return;
+  }
+
+  const name = file.name;
+  const uploadId = getUUID();
+  const sliceSize = toMB(5); // 切片大小，每个切片5MB
+  const totalSlices = Math.ceil(file.size / sliceSize); // 获取切片数量
+
+  let chunk = 0;
+  let postPromises: Promise<{ data?: { code?: number; msg?: string } }>[] = [];
+  let success = 0;
+  const CancelToken = axios.CancelToken;
+
+  while (chunk < totalSlices) {
+    const start = chunk * sliceSize;
+    const end = Math.min(start + sliceSize, file.size);
+    const slice = file.slice(start, end);
+
+    const formData = createFormData(data);
+    formData.append("file", slice);
+    formData.append("chunkNum", `${chunk}`);
+    formData.append("fileName", name);
+    formData.append("uploadId", uploadId);
+
+    const postPromise = axios.post(chunkAction, formData, {
+      headers,
+      onUploadProgress: (progressEvent: { loaded: number; total?: number }) => {
+        if (progressEvent.loaded === progressEvent.total) {
+          success += 0.5;
+          const overallProgress = Math.round((success / totalSlices) * 100);
+          onProgress?.({ percent: overallProgress });
+        }
+      },
+      cancelToken: new CancelToken(function executor(c: Canceler) {
+        uploadingList[file.uid]
+          ? uploadingList[file.uid].push(c)
+          : (uploadingList[file.uid] = [c]);
+        setUploadingList(deepCopy(uploadingList));
+      }),
+    });
+
+    postPromise.then((res: { data: any }) => {
+      if (isSuccessResponse(res.data)) {
+        success += 0.5;
+        const overallProgress = Math.round((success / totalSlices) * 100);
+        onProgress?.({ percent: overallProgress });
+      }
+    });
+
+    postPromises.push(postPromise);
+
+    if ((chunk + 1) % chunkNum === 0) {
+      try {
+        const arrList = await Promise.all(postPromises);
+        const errorList = arrList.filter(
+          (v) => !v.data || !isSuccessResponse(v.data)
+        );
+
+        postPromises = [];
+        delete uploadingList[file.uid];
+        setUploadingList(deepCopy(uploadingList));
+
+        if (errorList.length) {
+          onError?.(
+            new Error(
+              errorList.slice(-1)?.[0]?.data?.msg ||
+                (en ? "Upload failed" : "上传失败")
+            )
+          );
+          return;
+        }
+      } catch (e) {
+        if ((e as { code: string }).code === "ERR_CANCELED") {
+          onSuccess?.({ code: "ERR_CANCELED" });
+        } else {
+          onError?.(new Error(en ? "Upload failed" : "上传失败"));
+        }
+
+        postPromises = [];
+        delete uploadingList[file.uid];
+        setUploadingList(deepCopy(uploadingList));
+        return;
+      }
+    }
+
+    chunk++;
+  }
+
+  try {
+    const arrList = await Promise.all(postPromises);
+    const errorList = arrList.filter(
+      (v) => !v.data || !isSuccessResponse(v.data)
+    );
+
+    if (!errorList.length) {
+      const formData = createFormData(data);
+      formData.append("chunkCount", `${totalSlices}`);
+      formData.append("fileName", name);
+      formData.append("uploadId", uploadId);
+
+      const res = await axios.post(mergeChunkAction, formData);
+
+      if (isSuccessResponse(res.data)) {
+        onSuccess?.(res.data);
+        onUploadSuccess?.();
+      } else {
+        onError?.(
+          new Error(res.data.msg || (en ? "Upload failed" : "上传失败"))
+        );
+      }
+    } else {
+      onError?.(
+        new Error(
+          errorList.slice(-1)?.[0]?.data?.msg ||
+            (en ? "Upload failed" : "上传失败")
+        )
+      );
+    }
+  } catch (e) {
+    if ((e as { code: string }).code === "ERR_CANCELED") {
+      onSuccess?.({ code: "ERR_CANCELED" });
+    } else {
+      onError?.(new Error(en ? "Upload failed" : "上传失败"));
+    }
+  }
+
+  postPromises = [];
+  delete uploadingList[file.uid];
+  setUploadingList(deepCopy(uploadingList));
+}

package/src/components/Upload/_utils/createFormData.ts

@@ -0,0 +1,19 @@
+/**
+ * 创建 FormData 并添加数据
+ */
+export function createFormData(
+  data?: Partial<Record<string, string>>
+): FormData {
+  const formData = new FormData();
+
+  if (data) {
+    Object.keys(data)?.forEach((key) => {
+      const v = data[key];
+      if (v) {
+        formData.append(key, v);
+      }
+    });
+  }
+
+  return formData;
+}

package/src/components/Upload/_utils/extractFileUrl.ts

@@ -0,0 +1,20 @@
+import { UploadFile } from "antd";
+
+/**
+ * 从响应中提取文件 URL
+ */
+export function extractFileUrl(file: UploadFile): UploadFile {
+  if (file.response?.data?.list?.[0]?.url) {
+    file.url = file.response.data.list[0].url;
+    file.thumbUrl = file.response.data.list[0].url;
+  } else if (file.response?.data?.url) {
+    file.url = file.response.data.url;
+    file.thumbUrl = file.response.data.url;
+  } else if (file.response?.url) {
+    file.url = file.response.url;
+    file.thumbUrl = file.response.url;
+  }
+
+  return file;
+}
+

package/src/components/Upload/_utils/index.ts

@@ -0,0 +1,8 @@
+export { toMB } from "./toMB";
+export { validateFile } from "./validateFile";
+export { extractFileUrl } from "./extractFileUrl";
+export { createFormData } from "./createFormData";
+export { isSuccessResponse } from "./isSuccessResponse";
+export { chunkUpload } from "./chunkUpload";
+export { normalUpload } from "./normalUpload";
+

package/src/components/Upload/_utils/isSuccessResponse.ts

@@ -0,0 +1,11 @@
+/**
+ * 检查响应是否成功
+ */
+export function isSuccessResponse(response: {
+  code?: number;
+  data?: { code?: number };
+}): boolean {
+  const code = response.code ?? response.data?.code;
+  return code === 0 || code === 200 || code === undefined;
+}
+