zy-react-library 1.0.0

package/components/Search/index.js

@@ -0,0 +1,125 @@
+import { DownOutlined, UpOutlined } from "@ant-design/icons";
+import { Button, Col, Form, Row } from "antd";
+import { useEffect, useRef, useState } from "react";
+import FormItemsRenderer from "../FormBuilder/FormItemsRenderer";
+
+/**
+ * 搜索表单组件
+ */
+const Search = (props) => {
+  const {
+    labelCol = { span: 4 },
+    options = [],
+    values,
+    onFinish,
+    onSubmit,
+    onReset,
+    searchText = "搜索",
+    resetText = "重置",
+    showSearchButton = true,
+    showResetButton = true,
+    extraButtons,
+    form,
+    ...restProps
+  } = props;
+
+  const [collapse, setCollapse] = useState(true);
+  const [span, setSpan] = useState(6);
+  const [showCollapseButton, setShowCollapseButton] = useState(false);
+  const classNameRef = useRef(`search-${Date.now()}`);
+
+  // 计算是否需要显示展开/收起按钮
+  useEffect(() => {
+    if (!options || options.length === 0)
+      return;
+
+    const calculateLayout = () => {
+      const colEl = document.querySelectorAll(
+        `.${classNameRef.current}>.${window.process.env.app.antd["ant-prefix"]}-col`,
+      );
+      const colElLength = colEl.length;
+      const excludeLast = colElLength - (extraButtons ? 2 : 1);
+
+      const spanMap = { 0: 24, 1: 18, 2: 12, 3: 6 };
+      setSpan(spanMap[excludeLast % 4] || 6);
+
+      setShowCollapseButton(excludeLast > 3);
+    };
+
+    // 延迟执行以确保 DOM 已渲染
+    setTimeout(calculateLayout, 0);
+  }, [options, extraButtons]);
+
+  // 处理表单提交
+  const handleSubmit = () => {
+    const values = form.getFieldsValue();
+    onFinish?.(values, "submit");
+    onSubmit?.(values);
+  };
+
+  // 处理重置
+  const handleReset = () => {
+    form.resetFields();
+    const values = form.getFieldsValue();
+    onFinish?.(values, "reset");
+    onReset?.(values);
+  };
+
+  // 切换展开/收起
+  const toggleCollapse = () => {
+    setCollapse(!collapse);
+  };
+
+  return (
+    <Form
+      form={form}
+      labelCol={labelCol}
+      initialValues={values}
+      {...restProps}
+    >
+      <Row className={classNameRef.current}>
+        <FormItemsRenderer
+          options={options}
+          span={6}
+          collapse={collapse}
+          useAutoGenerateRequired={false}
+        />
+        <Col span={showCollapseButton ? (collapse ? 6 : span) : span}>
+          <Form.Item label=" " colon={false} style={{ textAlign: "right" }}>
+            {showSearchButton && (
+              <Button type="primary" onClick={handleSubmit}>
+                {searchText}
+              </Button>
+            )}
+            {showResetButton && (
+              <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                {resetText}
+              </Button>
+            )}
+            {showCollapseButton && (
+              <Button
+                type="link"
+                icon={collapse ? <DownOutlined /> : <UpOutlined />}
+                onClick={toggleCollapse}
+                style={{ marginLeft: 8 }}
+              >
+                {collapse ? "展开" : "收起"}
+              </Button>
+            )}
+          </Form.Item>
+        </Col>
+        {extraButtons && (
+          <Col span={24}>
+            <Form.Item label=" " colon={false} labelCol={{ span: 0 }}>
+              {extraButtons}
+            </Form.Item>
+          </Col>
+        )}
+      </Row>
+    </Form>
+  );
+};
+
+Search.displayName = "Search";
+
+export default Search;

package/components/Table/index.d.ts

@@ -0,0 +1,23 @@
+import type { ProTableProps } from "@ant-design/pro-table";
+import type { TableProps } from "antd";
+import type { FC } from "react";
+
+/**
+ * TablePro 组件属性
+ */
+export type TableProProps<DataSource, U, ValueType> = Omit<TableProps, 'columns'> & ProTableProps<DataSource, U, ValueType> & {
+  /** 当一个路由下存在多个表格的情况下 需要给每一个表格设置一个唯一存储索引 若没有设置则使用默认索引，请注意缓存数据会被覆盖 */
+  storeIndex?: string;
+  /** 是否禁用内容区滚动，默认 false */
+  disabledResizer?: boolean;
+  /** 是否显示索引列，默认 true */
+  showIndex?: boolean;
+  /** 是否使用居中布局，默认 true */
+  useAlignCenter?: boolean;
+}
+
+/**
+ * 表格组件
+ */
+declare const TablePro: <DataSource, U, ValueType = "text">(props: TableProProps<DataSource, U, ValueType>) => ReturnType<FC>;
+export default TablePro;

package/components/Table/index.js

@@ -0,0 +1,19 @@
+import Table from "@cqsjjb/jjb-react-admin-component/Table";
+import { getIndexColumn } from "../../utils/index";
+
+function TablePro(props) {
+  const {
+    columns = [],
+    showIndex = true,
+    useAlignCenter = true,
+    ...restProps
+  } = props;
+  const storeIndex = props.storeIndex || `${window.process.env.app.antd["ant-prefix"]}_${Math.random().toString(36).substring(2)}`;
+  function calcColumns() {
+    showIndex && columns.unshift(getIndexColumn(props.pagination));
+    return columns.map(item => ({ ...item, align: useAlignCenter ? "center" : "left" }));
+  }
+  return <Table storeIndex={storeIndex} columns={calcColumns()} {...restProps} />;
+}
+
+export default TablePro;

package/components/TooltipPreviewImg/index.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from "react";
+import type { PreviewImgProps } from "../PreviewImg";
+
+declare const TooltipPreviewImg: FC<PreviewImgProps>;
+
+export default TooltipPreviewImg;

package/components/TooltipPreviewImg/index.js

@@ -0,0 +1,22 @@
+import { Tag, Tooltip } from "antd";
+import PreviewImg from "~/components/PreviewImg";
+
+const TooltipPreviewImg = (props) => {
+  const { files = [], fileUrlKey = "filePath" } = props;
+
+  const renderContent = () => {
+    return (
+      files.length > 0
+        ? <PreviewImg files={files} fileUrlKey={fileUrlKey} />
+        : <span>暂无图片</span>
+    );
+  };
+
+  return (
+    <Tooltip placement="top" title={renderContent()}>
+      <Tag>预览</Tag>
+    </Tooltip>
+  );
+};
+
+export default TooltipPreviewImg;

package/components/Upload/index.d.ts

@@ -0,0 +1,28 @@
+import type { UploadProps as AntUploadProps, UploadFile } from "antd/es/upload";
+import type { FC, ReactNode } from "react";
+
+/**
+ * Upload 组件属性
+ */
+export interface UploadProps extends Omit<AntUploadProps, "fileList"> {
+  /** 文件列表 */
+  value?: UploadFile[];
+  /** 图片分辨率限制，如 "1920*1080" */
+  ratio?: `${number}*${number}`;
+  /** 是否显示提示，默认 true */
+  showTip?: boolean;
+  /** 文件大小限制（单位：MB），默认 0（不限制） */
+  size?: number;
+  /** 自定义提示内容 */
+  tipContent?: ReactNode;
+  /** listType 为 text 时上传按钮文本，默认 "点击选择文件上传" */
+  uploadButtonText?: string;
+}
+
+/**
+ * 文件上传组件
+ * 支持文件格式、大小、分辨率验证，支持图片预览
+ */
+declare const Upload: FC<UploadProps>;
+
+export default Upload;

package/components/Upload/index.js

@@ -0,0 +1,161 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Upload as AntUpload, Button, message, Modal } from "antd";
+import { useState } from "react";
+
+/**
+ * 文件上传组件
+ */
+const Upload = (props) => {
+  const {
+    value = [],
+    onChange,
+    onPreview,
+    maxCount = 1,
+    listType = "text",
+    accept = "",
+    ratio = "",
+    showTip = true,
+    multiple = true,
+    size = 0,
+    tipContent,
+    uploadButtonText = "点击选择文件上传",
+    ...restProps
+  } = props;
+
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState("");
+
+  // 生成提示信息
+  const getTipText = () => {
+    if (tipContent)
+      return tipContent;
+
+    const tips = [
+      `最多上传${maxCount}个文件`,
+      accept
+        ? `并且只能上传${accept
+          .replace(/\./g, "")
+          .split(",")
+          .join("、")}格式的文件`
+        : "可以上传任意格式的文件",
+      size ? `文件大小不能超过${size}M` : "",
+      ratio ? `只能上传${ratio}分辨率的图片` : "",
+    ].filter(Boolean);
+
+    return `${tips.join("，")}。`;
+  };
+
+  const handleBeforeUpload = () => {
+    return false;
+  };
+
+  // 文件状态改变
+  const handleChange = ({ file, fileList }) => {
+    const acceptList = accept ? accept.split(",") : [];
+    const ratioArr = ratio ? ratio.split("*") : [];
+    const suffix = file.name.substring(
+      file.name.lastIndexOf("."),
+      file.name.length,
+    );
+    const maxSize = size * 1024 * 1024;
+
+    // 验证文件格式
+    if (acceptList.length > 0 && !acceptList.includes(suffix)) {
+      message.warning(`只能上传${accept}格式的文件`);
+      return;
+    }
+
+    // 验证文件大小
+    if (maxSize && file.size > maxSize) {
+      message.warning(`文件大小不能超过${size}M`);
+      return;
+    }
+
+    // 验证图片分辨率
+    if (ratioArr.length === 2 && file.type?.startsWith("image/")) {
+      const img = new Image();
+      img.src = file.url || file.thumbUrl;
+      img.onload = () => {
+        if (img.width !== +ratioArr[0] || img.height !== +ratioArr[1]) {
+          message.warning(`只能上传${ratio}分辨率的图片`);
+          const filtered = fileList.filter(item => item.uid !== file.uid);
+          onChange?.(filtered);
+          return;
+        }
+        onChange?.(fileList);
+      };
+    }
+    else {
+      onChange?.(fileList);
+    }
+  };
+
+  // 预览文件
+  const handlePreview = (file) => {
+    if (["picture-card", "picture-circle", "picture"].includes(listType)) {
+      setPreviewImage(file.url || file.thumbUrl);
+      setPreviewVisible(true);
+    }
+    onPreview?.(file);
+  };
+
+  // 关闭预览
+  const handleCancel = () => {
+    setPreviewVisible(false);
+  };
+
+  // 上传按钮
+  const uploadButton
+    = ["picture-card", "picture-circle", "picture"].includes(listType)
+      ? (
+          <div>
+            <PlusOutlined style={{ fontSize: 32 }} />
+          </div>
+        )
+      : (
+          <Button type="primary">{uploadButtonText}</Button>
+        );
+
+  return (
+    <>
+      <AntUpload
+        fileList={value}
+        multiple={multiple}
+        maxCount={maxCount}
+        listType={listType}
+        accept={accept}
+        onChange={handleChange}
+        onPreview={handlePreview}
+        beforeUpload={handleBeforeUpload}
+        {...restProps}
+      >
+        {value.length >= maxCount ? null : uploadButton}
+      </AntUpload>
+      {
+        showTip
+          ? (tipContent || getTipText()) && (
+              <div style={{ marginTop: 10, color: "#ff4d4f" }}>
+                {tipContent || getTipText()}
+              </div>
+            )
+          : null
+      }
+      <Modal
+        open={previewVisible}
+        title="查看图片"
+        footer={null}
+        onCancel={handleCancel}
+      >
+        <img
+          alt="preview"
+          style={{ width: "100%", objectFit: "scale-down" }}
+          src={previewImage}
+        />
+      </Modal>
+    </>
+  );
+};
+
+Upload.displayName = "Upload";
+
+export default Upload;

package/enum/formItemRender/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 表单项类型枚举
+ */
+export declare const FORM_ITEM_RENDER_ENUM: {
+  /** 映射为 antd Input */
+  INPUT: "input";
+  /** 映射为 antd Input.TextArea */
+  TEXTAREA: "textarea";
+  /** 映射为 antd InputNumber */
+  INPUT_NUMBER: "inputNumber";
+  /** 映射为 antd InputNumber */
+  NUMBER: "number";
+  /** 映射为 antd Select */
+  SELECT: "select";
+  /** 映射为 antd Radio.Group */
+  RADIO: "radio";
+  /** 映射为 antd Checkbox.Group */
+  CHECKBOX: "checkbox";
+  /** 映射为 antd DatePicker，日期格式为YYYY-MM-DD */
+  DATE: "date";
+  /** 映射为 antd DatePicker.MonthPicker，日期格式为YYYY-MM */
+  DATE_MONTH: "dateMonth";
+  /** 映射为 antd DatePicker.YearPicker，日期格式为YYYY */
+  DATE_YEAR: "dateYear";
+  /** 映射为 antd DatePicker.WeekPicker，日期格式为YYYY-wo */
+  DATE_WEEK: "dateWeek";
+  /** 映射为 antd DatePicker.RangePicker，日期格式为YYYY-MM-DD */
+  DATE_RANGE: "dateRange";
+  /** 映射为 antd DatePicker，日期格式为YYYY-MM-DD HH:mm:ss */
+  DATETIME: "datetime";
+  /** 映射为 antd DatePicker.RangePicker，日期格式为YYYY-MM-DD HH:mm:ss */
+  DATETIME_RANGE: "datetimeRange";
+  /** 映射为 antd Divider */
+  DIVIDER: "divider";
+};

package/enum/formItemRender/index.js

@@ -0,0 +1,35 @@
+/**
+ * 表单项类型枚举
+ */
+export const FORM_ITEM_RENDER_ENUM = {
+  /** 映射为 antd Input */
+  INPUT: "input",
+  /** 映射为 antd Input.TextArea */
+  TEXTAREA: "textarea",
+  /** 映射为 antd InputNumber */
+  INPUT_NUMBER: "inputNumber",
+  /** 映射为 antd InputNumber */
+  NUMBER: "number",
+  /** 映射为 antd Select */
+  SELECT: "select",
+  /** 映射为 antd Radio.Group */
+  RADIO: "radio",
+  /** 映射为 antd Checkbox.Group */
+  CHECKBOX: "checkbox",
+  /** 映射为 antd DatePicker，日期格式为YYYY-MM-DD */
+  DATE: "date",
+  /** 映射为 antd DatePicker.MonthPicker，日期格式为YYYY-MM */
+  DATE_MONTH: "dateMonth",
+  /** 映射为 antd DatePicker.YearPicker，日期格式为YYYY */
+  DATE_YEAR: "dateYear",
+  /** 映射为 antd DatePicker.WeekPicker，日期格式为YYYY-wo */
+  DATE_WEEK: "dateWeek",
+  /** 映射为 antd DatePicker.RangePicker，日期格式为YYYY-MM-DD */
+  DATE_RANGE: "dateRange",
+  /** 映射为 antd DatePicker，日期格式为YYYY-MM-DD HH:mm:ss */
+  DATETIME: "datetime",
+  /** 映射为 antd DatePicker.RangePicker，日期格式为YYYY-MM-DD HH:mm:ss */
+  DATETIME_RANGE: "datetimeRange",
+  /** 映射为 antd Divider */
+  DIVIDER: "divider",
+};

package/hooks/useDownloadBlob/index.d.ts

@@ -0,0 +1,16 @@
+interface UseDownloadBlobOptions {
+  /** 下载文件的自定义文件名（不含后缀），默认为当前时间戳 */
+  name?: string;
+  /** Blob 对象的 MIME 类型，默认为 Excel 类型 */
+  type?: string;
+  /** 请求时携带的查询参数对象 */
+  params?: Record<string, any>;
+}
+
+/**
+ * 下载Blob流文件
+ */
+export default function useDownloadBlob(
+  url: string,
+  options?: UseDownloadBlobOptions
+): Promise<any>;

package/hooks/useDownloadBlob/index.js

@@ -0,0 +1,52 @@
+import { message } from "antd";
+import dayjs from "dayjs";
+import { getFileUrl } from "../../utils/index.js";
+
+/**
+ * 下载Blob流文件
+ */
+export default function useDownloadBlob(
+  url,
+  options = { name: "", type: "", params: {} },
+) {
+  const fileUrl = getFileUrl();
+  return new Promise((resolve, reject) => {
+    const finalUrl = !url.includes(fileUrl) ? fileUrl + url : url;
+    Object.entries(options.params).forEach(([key, value]) => {
+      finalUrl.searchParams.append(key, value);
+    });
+    fetch(finalUrl, {
+      method: "GET",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.blob();
+      })
+      .then((blob) => {
+        const finalBlob = new Blob([blob], {
+          type: options.type || "application/vnd.ms-excel",
+        });
+        const downloadElement = document.createElement("a");
+        const href = window.URL.createObjectURL(finalBlob);
+        downloadElement.style.display = "none";
+        downloadElement.href = href;
+        downloadElement.download
+          = options.name || dayjs().format("YYYY-MM-DD HH:mm:ss");
+        document.body.appendChild(downloadElement);
+        downloadElement.click();
+        document.body.removeChild(downloadElement);
+        window.URL.revokeObjectURL(href);
+        resolve({ data: finalBlob });
+      })
+      .catch((err) => {
+        message.error("导出失败");
+        reject(err);
+      });
+  });
+}

package/hooks/useDownloadFile/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 下载文件
+ */
+export default function useDownloadFile(url: string, name?: string): void;

package/hooks/useDownloadFile/index.js

@@ -0,0 +1,36 @@
+import { message, Modal } from "antd";
+import { getFileName, getFileSuffix, getFileUrl } from "../../utils/index.js";
+
+/**
+ * 下载文件
+ */
+export default function useDownloadFile(url, name) {
+  if (!url)
+    throw new Error("没有下载地址");
+  Modal.confirm({ title: "提示", content: "确定要下载此文件吗？", onOk: () => {
+    const fileUrl = getFileUrl();
+    if (name) {
+      if (!getFileSuffix(url))
+        name = name + getFileSuffix(url);
+    }
+    else {
+      name = getFileName(url);
+    }
+    fetch(!url.includes(fileUrl) ? fileUrl + url : url)
+      .then(res => res.blob())
+      .then((blob) => {
+        const a = document.createElement("a");
+        document.body.appendChild(a);
+        a.style.display = "none";
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = `${name}`;
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+      })
+      .catch(() => {
+        message.error("下载失败");
+      });
+  } });
+}

package/hooks/useIsExistenceDuplicateSelection/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * useIsExistenceDuplicateSelection 钩子的选项参数
+ */
+interface UseIsExistenceDuplicateSelectionOptions<T> {
+  /** 需要检查重复项的目标数组 */
+  data: T[];
+  /** 用于去重判断的对象属性名 */
+  key: keyof T;
+  /** 可选的错误提示信息 */
+  message?: string;
+}
+
+/**
+ * 检查数组中是否存在重复项
+ */
+export default function useIsExistenceDuplicateSelection<T>(
+  options: UseIsExistenceDuplicateSelectionOptions<T>
+): Promise<void>;

package/hooks/useIsExistenceDuplicateSelection/index.js

@@ -0,0 +1,18 @@
+import { message as antdMessage } from "antd";
+import { uniqBy } from "lodash-es";
+
+/**
+ * 检查数组中是否存在重复项
+ */
+export default function useIsExistenceDuplicateSelection(options) {
+  const { data, key, message = "存在重复项，请勿重复选择" } = options;
+  return new Promise((resolve, reject) => {
+    if (uniqBy(data, key).length !== data.length) {
+      antdMessage.error(message);
+      reject(new Error(message));
+    }
+    else {
+      resolve();
+    }
+  });
+}

package/hooks/useTable/index.d.ts

@@ -0,0 +1,75 @@
+import type { AntdTableOptions, AntdTableResult, Data, Params, Service } from "ahooks/lib/useAntdTable/types";
+import type { FormInstance } from "antd/es/form";
+
+type FormValues = Record<string, any>;
+/**
+ * useTable 钩子的选项参数
+ */
+export interface UseTableOptions<TData extends Data, TParams extends Params> extends Omit<AntdTableOptions<TData, TParams>, "defaultParams" | "form"> {
+  /** 是否使用分页，默认是 */
+  usePagination?: boolean;
+  /** 默认分页参数，默认 { current: 1; pageSize: 10 } */
+  defaultPagination?: { current: number; pageSize: number };
+  /** 是否使用存储查询条件，默认是 */
+  useStorageQueryCriteria?: boolean;
+  /** 额外参数 */
+  params?: FormValues | (() => FormValues);
+  /** 表单数据转换函数，在每次请求之前调用，接收当前搜索的表单项，要求返回一个对象 */
+  transform?: (formData: FormValues) => FormValues;
+  /** 回调函数 */
+  callback?: (list: any[], data: any) => void;
+  /** 表单实例（通过 Form.useForm() 创建） */
+  form?: FormInstance;
+}
+
+/**
+ * 基础分页配置接口
+ */
+export interface BasePaginationConfig {
+  /** 当前页码 */
+  current: number;
+  /** 每页数量 */
+  pageSize: number;
+  /** 总数 */
+  total: number;
+}
+
+/**
+ * 扩展分页配置接口
+ */
+export interface ExtendedPaginationConfig extends BasePaginationConfig {
+  /** 显示快速跳转 */
+  showQuickJumper: boolean;
+  /** 显示页码选择器 */
+  showSizeChanger: boolean;
+}
+
+/**
+ * useTable 钩子返回的结果
+ */
+export interface UseTableResult<TData extends Data, TParams extends Params> extends AntdTableResult<TData, TParams> {
+  /** 表格属性 */
+  tableProps: {
+    /** 表格数据 */
+    dataSource: TData["list"];
+    /** 表格加载状态 */
+    loading: boolean;
+    /** 表格改变 */
+    onChange: (pagination: any, filters?: any, sorter?: any) => void;
+    /** 分页属性 */
+    pagination: false | ExtendedPaginationConfig;
+    [key: string]: any;
+  };
+  /** 查询方法，等于直接调用 search.submit */
+  getData: () => void;
+}
+
+/**
+ * 自定义 useTable，继承 ahooks 的 useAntdTable，根据需求进行扩展
+ */
+declare function useTable<TData extends Data, TParams extends Params>(
+  service: Service<TData, TParams>,
+  options?: UseTableOptions<TData, TParams>
+): UseTableResult<TData, TParams>;
+
+export default useTable;