@hsu-react/ui 0.0.1

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

@@ -0,0 +1,94 @@
+import axios, { AxiosRequestConfig, Canceler } from "axios";
+import { RcFile } from "antd/es/upload";
+import { deepCopy } from "hsu-utils";
+import { validateFile, createFormData, isSuccessResponse } from ".";
+import { UploadingList } from "..";
+import type { UploadRequestOption } from "rc-upload/lib/interface";
+
+interface NormalUploadOptions {
+  file: RcFile;
+  action: string;
+  data?: Partial<Record<string, string>>;
+  headers?: AxiosRequestConfig["headers"];
+  accept?: string;
+  size?: number;
+  en?: boolean;
+  uploadingList: UploadingList;
+  setUploadingList: (list: UploadingList) => void;
+  onProgress?: UploadRequestOption["onProgress"];
+  onSuccess?: UploadRequestOption["onSuccess"];
+  onError?: UploadRequestOption["onError"];
+  onUploadSuccess?: () => void;
+}
+
+/**
+ * 普通文件上传
+ */
+export async function normalUpload({
+  file,
+  action,
+  data,
+  headers,
+  accept,
+  size,
+  en,
+  uploadingList,
+  setUploadingList,
+  onProgress,
+  onSuccess,
+  onError,
+  onUploadSuccess,
+}: NormalUploadOptions) {
+  // 验证文件
+  const validation = validateFile({ file, accept, size, en });
+  if (!validation.valid) {
+    onError?.(validation.error!);
+    return;
+  }
+
+  const formData = createFormData(data);
+  formData.append("file", file);
+
+  const CancelToken = axios.CancelToken;
+
+  const postPromise = axios.post(action, formData, {
+    headers,
+    onUploadProgress: (progressEvent: { loaded: number; total?: number }) => {
+      if (progressEvent.loaded === progressEvent.total) {
+        onProgress?.({ percent: 50 });
+      }
+    },
+    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)) {
+        onProgress?.({ percent: 100 });
+        onSuccess?.(res.data);
+        onUploadSuccess?.();
+      } else {
+        onError?.(
+          new Error(res.data.msg || (en ? "Upload failed" : "上传失败"))
+        );
+      }
+
+      delete uploadingList[file.uid];
+      setUploadingList(deepCopy(uploadingList));
+    })
+    .catch((e: unknown) => {
+      if ((e as { code: string }).code === "ERR_CANCELED") {
+        onSuccess?.({ code: "ERR_CANCELED" });
+      } else {
+        onError?.(new Error(en ? "Upload failed" : "上传失败"));
+      }
+
+      delete uploadingList[file.uid];
+      setUploadingList(deepCopy(uploadingList));
+    });
+}

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

@@ -0,0 +1,7 @@
+/**
+ * 将 MB 转换为字节
+ */
+export function toMB(size: number): number {
+  return size * 1024 * 1024;
+}
+

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

@@ -0,0 +1,45 @@
+import { RcFile } from "antd/es/upload";
+import { toMB } from "./toMB";
+
+interface ValidateFileOptions {
+  file: RcFile;
+  accept?: string;
+  size?: number;
+  en?: boolean;
+}
+
+/**
+ * 验证文件格式和大小
+ */
+export function validateFile({
+  file,
+  accept,
+  size,
+  en,
+}: ValidateFileOptions): { valid: boolean; error?: Error } {
+  if (accept) {
+    const fileRegex = new RegExp(`(${accept.replace(/,/g, "|")})$`);
+    if (!fileRegex.test(file.name.toLowerCase())) {
+      return {
+        valid: false,
+        error: new Error(
+          en
+            ? `File format error, please upload ${accept} file`
+            : `文件格式错误，请上传 ${accept} 文件`
+        ),
+      };
+    }
+  }
+
+  if (size && file.size > toMB(size)) {
+    return {
+      valid: false,
+      error: new Error(
+        en ? `File size cannot exceed ${size}MB` : `文件大小不能超过${size}MB`
+      ),
+    };
+  }
+
+  return { valid: true };
+}
+

package/src/components/Upload/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 数据录入
+  order: 3
+title: Upload 上传
+---
+
+# Upload 上传
+
+> `Upload` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { Upload } from "@hsu-react/ui";
+```

package/src/components/Upload/index.module.less

@@ -0,0 +1,74 @@
+.Upload {
+  display: inline-block;
+
+  width: 100%;
+  height: 100%;
+
+  span.ant-upload {
+    display: inline-flex;
+  }
+
+  .ant-upload-list {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+
+    width: 100%;
+
+    &.ant-upload-list-picture-card {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 5px;
+    }
+
+    &::before,
+    &::after {
+      content: none !important;
+    }
+
+    .fileItem {
+      display: flex;
+      align-items: center;
+      column-gap: 5px;
+
+      width: 100%;
+
+      .uploading {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        min-width: 0px;
+        margin-bottom: -5px;
+
+        &:not(.progress) {
+          margin-bottom: 0px;
+
+          .fileName {
+            margin-bottom: 0px;
+          }
+        }
+      }
+
+      .fileName {
+        flex: 1;
+
+        min-width: 0px;
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        margin-bottom: -12px;
+      }
+
+      &:not(.progress) {
+        .fileName {
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+}

package/src/components/Upload/index.tsx

@@ -0,0 +1,306 @@
+import {
+  Upload as AntdUpload,
+  UploadProps as AntdUploadProps,
+  UploadFile,
+} from "antd";
+import type { UploadRequestOption } from "rc-upload/lib/interface";
+import React, { useCallback } from "react";
+import { Canceler } from "axios";
+import { RcFile } from "antd/es/upload";
+import { deepCopy } from "hsu-utils";
+import styles from "./index.module.less";
+import classNames from "classnames";
+import { ButtonProps, ProgressProps } from "antd";
+import FilePreview, { FilePreviewType } from "../FilePreview";
+import {
+  useUploadFileList,
+  useUploadOperations,
+  useUploadPreview,
+} from "./_hooks";
+import { chunkUpload, normalUpload } from "./_utils";
+import { UploadingItem } from "./_components/UploadingItem";
+import { UploadedItem } from "./_components/UploadedItem";
+
+export type UploadingList = Record<string, Canceler[]>;
+
+export interface UploadProps extends Omit<AntdUploadProps, "action" | "data"> {
+  drop?: true;
+  onUploading?: (fileList: UploadFile[]) => void;
+  action?: string;
+  chunkAction?: string;
+  mergeChunkAction?: string;
+  chunkNum?: number;
+  data?: Partial<Record<string, string>>;
+  sharding?: boolean;
+  size?: number;
+  onUploadingList?: (list: Record<string, Canceler[]>) => void;
+  rmFile?: string;
+  onUploadSuccess?: () => void;
+  listProps?: {
+    item?: string;
+    itemName?: string;
+    itemProgress?: ProgressProps & {
+      hide?: boolean;
+    };
+    itemRemove?: ButtonProps;
+    formatUrl?: (file: UploadFile) => string;
+    itemDownload?: ButtonProps & {
+      formatUrl?: (file: UploadFile) => string;
+    };
+    itemPreview?: ButtonProps & {
+      formatInfo?: (file: UploadFile) => {
+        fileUrl?: string;
+        fileType?: FilePreviewType;
+        fileName?: string;
+      };
+    };
+  };
+  en?: boolean;
+}
+
+const Upload: React.FC<UploadProps> = (props) => {
+  const {
+    disabled = false,
+    drop,
+    onChange,
+    fileList = [],
+    onUploading,
+    action,
+    chunkAction,
+    mergeChunkAction,
+    chunkNum = 3,
+    data,
+    sharding,
+    size,
+    accept = "",
+    onUploadingList,
+    rmFile,
+    onUploadSuccess,
+    className,
+    headers,
+    listProps,
+    listType,
+    en,
+    onDownload,
+    onPreview,
+    ...uploadConfig
+  } = props;
+
+  const {
+    fileList: _fileList,
+    setFileList,
+    onChange: handleFileListChange,
+  } = useUploadFileList({
+    fileList,
+    onChange,
+    rmFile,
+  });
+
+  const { uploadingList, setUploadingList, downloading, setDownloading } =
+    useUploadOperations({
+      onUploadingList,
+    });
+
+  const {
+    file: previewFile,
+    open: previewOpen,
+    setFile: setPreviewFile,
+  } = useUploadPreview();
+
+  // 分片上传
+  const chunkCustomRequest: AntdUploadProps["customRequest"] = useCallback(
+    async (options: UploadRequestOption) => {
+      const { file: _file, onSuccess, onError, onProgress } = options;
+      if (typeof _file === "string" || !chunkAction || !mergeChunkAction) {
+        return;
+      }
+
+      const file = new File(
+        [_file],
+        encodeURIComponent((_file as RcFile).name),
+        {
+          type: (_file as RcFile).type,
+        }
+      ) as RcFile;
+      file.uid = (_file as RcFile).uid;
+
+      await chunkUpload({
+        file,
+        chunkAction,
+        mergeChunkAction,
+        chunkNum,
+        data,
+        headers,
+        accept,
+        size,
+        en,
+        uploadingList,
+        setUploadingList,
+        onProgress,
+        onSuccess,
+        onError,
+        onUploadSuccess,
+      });
+    },
+    [
+      chunkAction,
+      mergeChunkAction,
+      chunkNum,
+      data,
+      headers,
+      accept,
+      size,
+      en,
+      uploadingList,
+      setUploadingList,
+      onUploadSuccess,
+    ]
+  );
+
+  // 普通上传
+  const customRequest: AntdUploadProps["customRequest"] = useCallback(
+    async (options: UploadRequestOption) => {
+      const { file: _file, onSuccess, onError, onProgress } = options;
+      if (typeof _file === "string" || !action) {
+        onError?.(new Error("没有上传地址"));
+        return;
+      }
+
+      const file = new File(
+        [_file],
+        encodeURIComponent((_file as RcFile).name),
+        {
+          type: (_file as RcFile).type,
+        }
+      ) as RcFile;
+      file.uid = (_file as RcFile).uid;
+
+      await normalUpload({
+        file,
+        action,
+        data,
+        headers,
+        accept,
+        size,
+        en,
+        uploadingList,
+        setUploadingList,
+        onProgress,
+        onSuccess,
+        onError,
+        onUploadSuccess,
+      });
+    },
+    [
+      action,
+      data,
+      headers,
+      accept,
+      size,
+      en,
+      uploadingList,
+      setUploadingList,
+      onUploadSuccess,
+    ]
+  );
+
+  const handleChange = ({
+    file,
+    fileList: newFileList,
+  }: {
+    file: UploadFile;
+    fileList: UploadFile[];
+  }) => {
+    handleFileListChange({ file, fileList: newFileList });
+
+    const uploading = newFileList.filter((item) => item.status === "uploading");
+    onUploading?.(uploading);
+  };
+
+  const handleRemove = useCallback(
+    (file: UploadFile) => {
+      if (uploadingList[file.uid]) {
+        uploadingList[file.uid]?.forEach((c) => c());
+        delete uploadingList[file.uid];
+        setUploadingList(deepCopy(uploadingList));
+      }
+
+      const filteredList = _fileList.filter((item) => item.uid !== file.uid);
+      setFileList(filteredList);
+      onChange?.({
+        file,
+        fileList: filteredList,
+      });
+    },
+    [uploadingList, setUploadingList, _fileList, setFileList, onChange]
+  );
+
+  const Upload = drop ? AntdUpload.Dragger : AntdUpload;
+
+  return (
+    <>
+      <Upload
+        disabled={disabled}
+        className={classNames(styles.Upload, className)}
+        customRequest={sharding ? chunkCustomRequest : customRequest}
+        fileList={
+          Array.isArray(_fileList)
+            ? _fileList.filter((item) => item.status !== "error")
+            : undefined
+        }
+        onChange={handleChange}
+        accept={accept}
+        onRemove={handleRemove}
+        listType={listType}
+        onDownload={onDownload}
+        onPreview={onPreview}
+        itemRender={
+          listType === "picture-card"
+            ? undefined
+            : (_, file, __, { remove }) => {
+                if (file.status === "removed") {
+                  return null;
+                }
+
+                if (file.status === "uploading") {
+                  return (
+                    <UploadingItem
+                      file={file}
+                      listProps={listProps}
+                      en={en}
+                      onRemove={remove}
+                    />
+                  );
+                }
+
+                return (
+                  <UploadedItem
+                    file={file}
+                    listProps={listProps}
+                    en={en}
+                    disabled={disabled}
+                    downloading={downloading}
+                    setDownloading={setDownloading}
+                    onPreview={onPreview}
+                    onDownload={onDownload}
+                    onRemove={remove}
+                    onPreviewClick={(info) => {
+                      setPreviewFile(info);
+                    }}
+                  />
+                );
+              }
+        }
+        {...uploadConfig}
+      />
+
+      <FilePreview
+        {...previewFile}
+        open={previewOpen}
+        onClose={() => setPreviewFile({})}
+      />
+    </>
+  );
+};
+
+export default Upload;

package/src/config-provider/index.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from "react";
+
+import { PermissionsContent } from "../hooks/usePermissions";
+import { configureRequest, RequestImpl } from "../request";
+
+export interface ConfigProviderProps {
+  /** 当前用户权限码列表；传入后 usePermissions / hasPermi 据此校验。不传则默认全部放行 */
+  permissions?: string[] | null;
+  /** 注入 HTTP 请求实现，供 ImportForm 等智能组件使用 */
+  request?: Partial<RequestImpl>;
+  children?: React.ReactNode;
+}
+
+/**
+ * Hsu UI 全局配置：注入权限与请求实现。
+ *
+ * @example
+ * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>
+ *   <App />
+ * </ConfigProvider>
+ */
+const ConfigProvider: React.FC<ConfigProviderProps> = ({
+  permissions = null,
+  request,
+  children,
+}) => {
+  // 在渲染期同步注入，确保子组件首次交互即可拿到 request 实现
+  useMemo(() => {
+    if (request) configureRequest(request);
+  }, [request]);
+
+  const permissionsValue = useMemo(() => ({ permissions }), [permissions]);
+
+  return (
+    <PermissionsContent.Provider value={permissionsValue}>
+      {children}
+    </PermissionsContent.Provider>
+  );
+};
+
+export default ConfigProvider;

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as usePermissions, PermissionsContent } from "./usePermissions";
+export { default as useLabelWidth } from "./useLabelWidth";

package/src/hooks/useLabelWidth.ts

@@ -0,0 +1,92 @@
+import { FormItemProps } from "../components/FormItem";
+import { get_string_size } from "hsu-utils";
+import { useMemo } from "react";
+
+interface Font {
+  style?: string;
+  variant?: string;
+  weight?: string;
+  size?: number;
+  lineHeight?: number;
+  family?: string;
+}
+
+const getLabelWidth = (
+  formItem: FormItemProps[],
+  font: Font = { size: 14 },
+  min?: boolean | number
+) => {
+  let _labelWitdh: number = 0;
+
+  if (formItem) {
+    _labelWitdh = formItem.reduce(
+      (prev, curr) => {
+        let _labelWidth: number = prev;
+
+        const _label = curr.label;
+        if (typeof _label === "string" && _label) {
+          const { width } = get_string_size(_label, font);
+          _labelWidth = width;
+
+          if (
+            curr.colon !== false &&
+            ((curr.required === true && curr.requiredPosition !== "after") ||
+              curr.required !== true)
+          ) {
+            const { width } = get_string_size(":", font);
+            _labelWidth += width + 10;
+          }
+
+          if (curr.required && curr.hideRequired !== true) {
+            const { width } = get_string_size("*", font);
+            _labelWidth += width + 4;
+          }
+
+          if (
+            curr.tips &&
+            (!curr.tips?.icon || typeof curr.tips?.icon === "string")
+          ) {
+            _labelWidth += 22;
+          }
+
+          if (curr.layout === "vertical") {
+            _labelWidth = 0;
+          }
+        }
+
+        if (!!min && prev !== 0) {
+          if (typeof min === "number") {
+            return min;
+          }
+
+          return _labelWidth < prev ? _labelWidth : prev;
+        }
+
+        return _labelWidth > prev ? _labelWidth : prev;
+      },
+      typeof min === "number" ? min : 0
+    );
+  }
+
+  return _labelWitdh;
+};
+
+export default function useLabelWidth(
+  formItem: FormItemProps[] = [],
+  font: Font = {
+    size: 14,
+    family:
+      "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'",
+  },
+  min?: boolean | number
+): [
+  number,
+  (formItem: FormItemProps[], font?: Font, min?: boolean | number) => number
+] {
+  const labelWidth = useMemo(
+    () => getLabelWidth(formItem, font, min),
+    [formItem, font, min]
+  );
+
+  return [labelWidth, getLabelWidth];
+}