@cqsjjb/jjb-react-admin-component 3.3.1-beta.5 → 3.3.1-beta.6

package/ImageCropper/index.js

@@ -1,116 +0,0 @@
-import MD5 from 'spark-md5';
-import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import Cropper from 'react-cropper';
-import 'cropperjs/dist/cropper.css';
-import { Empty } from 'antd';
-import { tools } from '@cqsjjb/jjb-common-lib';
-import { isHttpUrl } from '../tools/index.js';
-const ImageCropper = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    width = 400,
-    height = 400,
-    aspect = 16 / 9,
-    locked = false,
-    resource
-  } = props;
-  const cropRef = useRef(null);
-  const [src, setSrc] = useState(undefined);
-
-  // 更新 src
-  const onUpdateSrc = () => {
-    if (resource instanceof File) {
-      tools.getFileToBase64(resource).then(setSrc);
-    } else if (/^data:image\/(png|jpg|jpeg);base64/.test(resource) || isHttpUrl(resource)) {
-      setSrc(resource);
-    }
-  };
-
-  // 初始化或资源变化时更新
-  useEffect(() => {
-    onUpdateSrc();
-  }, [resource]);
-
-  // 暴露给父组件的方法
-  useImperativeHandle(ref, () => ({
-    toDataURL: (quality = 1) => {
-      const md5 = new MD5();
-      try {
-        const base64 = cropRef.current.cropper.getCroppedCanvas().toDataURL('image/png', quality);
-        md5.appendBinary(base64);
-        return {
-          md5: md5.end(),
-          base64
-        };
-      } catch (e) {
-        return null;
-      }
-    },
-    toDataFile: () => {
-      try {
-        const {
-          md5,
-          base64
-        } = ref.current.toDataURL();
-        return {
-          md5,
-          file: tools.getBase64ToFile(base64, `${tools.createOnlyKey()}.png`)
-        };
-      } catch (e) {
-        return {
-          file: null,
-          md5: null
-        };
-      }
-    },
-    toBlobURL: () => {
-      try {
-        return window.URL.createObjectURL(ref.current.toDataFile().file);
-      } catch (e) {
-        return null;
-      }
-    },
-    toDataImageText: () => {
-      try {
-        return `<img alt="img" src="${ref.current.toDataURL().base64}"/>`;
-      } catch (e) {
-        return null;
-      }
-    },
-    toDataImageInstance: () => {
-      return new Promise(resolve => {
-        const image = new Image();
-        image.src = ref.current.toDataURL().base64;
-        image.onload = () => resolve({
-          src: image.src,
-          width: image.width,
-          height: image.height,
-          instance: image
-        });
-      });
-    }
-  }));
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      width,
-      height,
-      position: 'relative'
-    }
-  }, src ? /*#__PURE__*/React.createElement(Cropper, {
-    ref: cropRef,
-    src: src,
-    style: {
-      width,
-      height
-    },
-    aspectRatio: aspect,
-    cropBoxResizable: !locked
-  }) : /*#__PURE__*/React.createElement(Empty, {
-    image: Empty.PRESENTED_IMAGE_SIMPLE,
-    style: {
-      margin: 0,
-      paddingTop: (height - 70) / 2 - 40
-    },
-    description: "\u672A\u5BFC\u5165\u56FE\u7247\u8D44\u6E90\uFF0C\u65E0\u6CD5\u88C1\u526A"
-  }));
-});
-export default ImageCropper;

package/ImageUploader/index.js

@@ -1,310 +0,0 @@
-import MD5 from 'spark-md5';
-import React, { useState, useRef, useCallback } from 'react';
-import { tools } from '@cqsjjb/jjb-common-lib';
-import { Button, Col, Image as ImageFunc, Modal, Row, message } from 'antd';
-import { PlusOutlined, EyeOutlined, DeleteOutlined, SyncOutlined, ScissorOutlined } from '@ant-design/icons';
-import ImageCropper from '../ImageCropper';
-import './index.less';
-import { getToken, getViewAsp, getAppKey, isHttpUrl } from '../tools/index.js';
-const {
-  toObject,
-  isPromise,
-  isFunction,
-  parseObject
-} = tools;
-const prefixCls = window.process?.env?.app?.antd['ant-prefix'] || 'ant';
-const FILE_TYPE = ['image/png', 'image/jpg', 'image/jpeg'];
-const FILE_TYPE_POWER = [...FILE_TYPE, 'image/svg+xml'];
-const ImageUploader = props => {
-  const [loading, setLoading] = useState(false);
-  const [preview, setPreview] = useState(false);
-  const [visible, setVisible] = useState(false);
-  const [resource, setResource] = useState(undefined);
-  const cropperRef = useRef(null);
-  const fileInputRef = useRef(null);
-  const algorithm = (() => {
-    const value = document.documentElement.style.getPropertyValue('--saas-algorithm');
-    return value ? value === '#FFF' ? 'default' : 'dark' : 'default';
-  })();
-  const onLoadFile = useCallback(file => {
-    const md5 = new MD5();
-    const {
-      svg = false
-    } = props;
-    return new Promise(resolve => {
-      const reader = new FileReader();
-      reader.onload = e => {
-        md5.appendBinary(e.target.result);
-        const isImage = (svg ? FILE_TYPE_POWER : FILE_TYPE).includes(file.type);
-        if (isImage) {
-          const image = new Image();
-          const base64 = e.target.result;
-          image.src = base64;
-          image.onload = () => {
-            resolve({
-              file,
-              base64,
-              md5: md5.end(),
-              size: file.size,
-              type: file.type,
-              name: file.name,
-              width: image.width,
-              height: image.height
-            });
-          };
-        } else {
-          resolve({
-            file,
-            md5: md5.end(),
-            size: file.size,
-            type: file.type,
-            name: file.name,
-            width: 0,
-            height: 0,
-            base64: undefined
-          });
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-  }, [props]);
-  const onCompression = useCallback(data => {
-    const {
-      compressionConfig
-    } = props;
-    return new Promise(resolve => {
-      const URL = window.URL || window.webkitURL;
-      const {
-        quality = 0.8
-      } = toObject(compressionConfig);
-      const img = new Image();
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      onLoadFile(data.file).then(res => {
-        img.width = res.width;
-        img.height = res.height;
-        img.src = URL.createObjectURL(data.file);
-        img.onload = () => {
-          img.onload = null;
-          canvas.width = img.width;
-          canvas.height = img.height;
-          context.drawImage(img, 0, 0, img.width, img.height);
-          canvas.toBlob(blob => {
-            const newFile = new File([blob], data.name, {
-              type: blob.type
-            });
-            resolve({
-              ...data,
-              file: newFile,
-              size: newFile.size
-            });
-          }, 'image/png', quality);
-        };
-      });
-    });
-  }, [onLoadFile, props]);
-  const onUploadHttp = useCallback(transfer => {
-    const {
-      API_HOST
-    } = window.process.env.app;
-    const {
-      data = {},
-      action,
-      headers: $headers = {},
-      needToken = true,
-      customRequest,
-      fieldName = 'file',
-      onChange
-    } = props;
-    const requestURL = isHttpUrl(action) ? action : `${API_HOST}${action}`;
-    const xhr = new XMLHttpRequest();
-    const form = new FormData();
-    const headers = toObject($headers);
-    headers.appKey = getAppKey();
-    if (needToken) {
-      headers.token = getToken();
-    }
-    transfer.md5 && form.append('md5', transfer.md5);
-    setLoading(true);
-    xhr.open('POST', requestURL);
-    Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));
-    xhr.onreadystatechange = () => {
-      if (xhr.readyState === 4 && xhr.status === 200) {
-        setLoading(false);
-        const res = parseObject(xhr.responseText);
-        if (isFunction(customRequest)) {
-          const fn = customRequest(res);
-          if (isPromise(fn)) {
-            fn.then(value => onChange && onChange(value));
-          }
-        } else {
-          const {
-            success,
-            errMessage
-          } = res;
-          if (success) {
-            const result = toObject(res.data);
-            if (typeof onChange === 'undefined') {
-              console.warn('ImageUploader警告:缺少必要的onChange回调,可能无法正确显示图片!');
-            }
-            onChange && onChange({
-              fileId: result.fileId,
-              fileUrl: result.fileUrl
-            });
-            message.success('上传成功！');
-          } else {
-            message.error(errMessage || '未知错误，上传失败，请检查！');
-          }
-        }
-      }
-    };
-    form.append(fieldName, transfer.file);
-    Object.keys(data).forEach(key => form.append(key, data[key]));
-    xhr.send(form);
-  }, [props]);
-  const onUpload = useCallback(e => {
-    const target = e.target;
-    const files = target.files;
-    const file = files[0];
-    const {
-      wh = '50*50',
-      svg = false,
-      size = 5120,
-      cropper = false,
-      compression = false
-    } = props;
-    onLoadFile(file).then(load => {
-      const [w, h] = getViewAsp(wh);
-      const fileSize = load.size;
-      const fileType = load.type;
-      if (!(svg ? FILE_TYPE_POWER : FILE_TYPE).includes(fileType)) {
-        message.error(`文件格式错误，不是图片类型，支持.PNG、.JPG、.JPEG${svg ? '、.SVG' : ''}`);
-        target.value = null;
-        return;
-      }
-      if (fileSize / 1024 > size) {
-        message.error(`图片大小超过最大值(${size}KB)，请重新选择`);
-        target.value = null;
-        return;
-      }
-      if (cropper) {
-        setResource(load.file);
-        setVisible(true);
-      } else {
-        if (load.width < w || load.height < h) {
-          message.error(`图片尺寸不能小于${w}x${h}`);
-          target.value = null;
-          return;
-        }
-        if (compression && fileSize / 1024 > 200) {
-          onCompression(load).then(res => onUploadHttp(res));
-          target.value = null;
-          return;
-        }
-        onUploadHttp(load);
-      }
-      target.value = null;
-    });
-  }, [props, onLoadFile, onCompression, onUploadHttp]);
-  const {
-    tip = '点击上传',
-    svg = false,
-    value,
-    disabled = false,
-    width = 120,
-    height = 120,
-    preview: _preview = true,
-    cropper = false,
-    borderStyle = 'dashed',
-    borderColor = '#d9d9d9',
-    borderWidth = 1,
-    borderRadius = 2,
-    backgroundColor = '#fafafa',
-    cropperConfig: $cropperConfig = {},
-    onChange
-  } = props;
-  const cropperConfig = toObject($cropperConfig);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      width,
-      height,
-      borderStyle,
-      borderWidth,
-      borderColor,
-      borderRadius,
-      backgroundColor
-    },
-    className: `${prefixCls}_image-file-uploader_ ${prefixCls}_image-file-uploader-${algorithm}_`
-  }, value ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}_image-file-uploader-preview_`
-  }, value && /*#__PURE__*/React.createElement(ImageFunc, {
-    src: toObject(value).fileUrl,
-    preview: !disabled ? {
-      visible: preview,
-      onVisibleChange: () => setPreview(false)
-    } : true
-  }), !disabled && /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}_image-file-uploader-preview-control_`
-  }, _preview && /*#__PURE__*/React.createElement(EyeOutlined, {
-    title: "\u9884\u89C8",
-    onClick: () => setPreview(true)
-  }), /*#__PURE__*/React.createElement(DeleteOutlined, {
-    title: "\u5220\u9664",
-    onClick: () => onChange && onChange(undefined)
-  }))) : /*#__PURE__*/React.createElement("label", {
-    className: `${prefixCls}_image-file-uploader-select_`
-  }, loading ? /*#__PURE__*/React.createElement(SyncOutlined, {
-    spin: true
-  }) : /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: width
-    },
-    className: `${prefixCls}_image-file-uploader-select-tip_`
-  }, loading ? '上传中...' : tip), !loading && !disabled && /*#__PURE__*/React.createElement("input", {
-    ref: fileInputRef,
-    type: "file",
-    style: {
-      display: 'none'
-    },
-    accept: `image/png,image/jpg,image/jpeg${svg ? ',image/svg+xml' : ''}`,
-    onChange: onUpload
-  })), cropper && visible && !svg && /*#__PURE__*/React.createElement(Modal, {
-    open: true,
-    title: "\u56FE\u7247\u88C1\u526A",
-    width: (cropperConfig.width || 400) + 48,
-    footer: /*#__PURE__*/React.createElement(Row, {
-      align: "middle",
-      justify: "space-between"
-    }, /*#__PURE__*/React.createElement(Col, {
-      style: {
-        color: 'red'
-      }
-    }, "\u5F53\u524D\u88C1\u526A\u7684\u7EB5\u6A2A\u6BD4\uFF1A16 / ", cropperConfig.aspect ? Math.floor(16 / cropperConfig.aspect) : 9), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Button, {
-      type: "primary",
-      icon: /*#__PURE__*/React.createElement(ScissorOutlined, null),
-      onClick: () => {
-        onUploadHttp(cropperRef.current.toDataFile());
-        setTimeout(() => setVisible(false), 300);
-      }
-    }, "\u786E\u5B9A"))),
-    maskClosable: false,
-    destroyOnClose: false,
-    onCancel: () => setVisible(false)
-  }, /*#__PURE__*/React.createElement(ImageCropper, {
-    ref: cropperRef,
-    width: cropperConfig.width || 400,
-    height: cropperConfig.height || 400,
-    locked: cropperConfig.locked,
-    aspect: cropperConfig.aspect,
-    resource: resource
-  })));
-};
-export default ImageUploader;
-export const getValueProps = value => ({
-  value: value ? {
-    fileUrl: value
-  } : undefined
-});
-export const getValueFromEvent = file => {
-  return file?.fileUrl;
-};

package/ListDataContainer/index.js

@@ -1,211 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useEffect, useCallback, useImperativeHandle, forwardRef } from 'react';
-import { Table, Row, Col, Form } from 'antd';
-import { isEqual } from 'lodash';
-import SearchForm from '@cqsjjb/jjb-react-admin-component/SearchForm';
-import ProTable from '@cqsjjb/jjb-react-admin-component/Table';
-
-/**
- * @component ListDataContainer
- * @description 通用列表数据容器组件，提供搜索表单、数据表格、分页等功能的完整列表页面解决方案
- * 
- * @props {Array} columns - 表格列配置，遵循Ant Design Table组件的columns规范
- * @props {Function} fetchDataApi - 数据获取API函数，接收分页和搜索参数，返回包含list和total的对象
- * @props {Array} searchFormConfig - 搜索表单配置数组
- *   @param {React.Component} searchFormConfig[].field - 表单项组件(如ControlWrapper.Select)
- *   @param {string} searchFormConfig[].name - 表单项字段名
- *   @param {string} searchFormConfig[].label - 表单项标签
- *   @param {Object} searchFormConfig[].fieldProps - 传递给字段组件的属性
- *   @param {Object} searchFormConfig[].itemProps - 传递给Form.Item的属性
- *   @param {React.ReactNode} searchFormConfig[].content - 字段组件的子元素(如Select.Option列表)
- *   @param {boolean} searchFormConfig[].required - 是否必填
- * @props {string} rowKey - 表格行键值，默认为'id'
- * @props {Object} initialPagination - 初始分页配置，包含current、pageSize等分页属性
- * @props {Object} tableProps - 传递给Table组件的属性
- * @props {boolean} proTable - 是否使用ProTable组件，默认为false
- * @example
- * // 基础用法
- * <ListDataContainer
- *   columns={tableColumns}
- *   fetchDataApi={getCourseList}
- *   searchFormConfig={[
- *     {
- *       field: Select,
- *       name: 'status',
- *       label: '状态',
- *     }
- *     {
- *       field: Input,
- *       name: 'name',
- *       label: '名称',
- *       required: true,
- *     }
- *   ]}
- * />
- * 
- */
-
-const SELECT_COMPONENTS = ['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Checkbox', 'Radio', 'Switch', 'Slider', 'Upload'];
-const INPUT_COMPONENTS = ['Input', 'InputNumber'];
-const ListDataContainer = /*#__PURE__*/forwardRef(({
-  columns,
-  fetchDataApi,
-  searchFormConfig = [],
-  rowKey = 'id',
-  initialPagination = {
-    pageIndex: 1,
-    pageSize: 10,
-    showSizeChanger: true,
-    showQuickJumper: true
-  },
-  tableProps = {},
-  proTable = false
-}, ref) => {
-  const [form] = Form.useForm();
-  const [tableData, setTableData] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [pagination, setPagination] = useState(initialPagination);
-  const [totalCount, setTotalCount] = useState(0);
-  const getComponentName = Component => {
-    return Component.displayName || Component.constructor.name;
-  };
-
-  /**
-   * 数据加载与刷新方法
-   * @param {Object} [overrideParams={}] - 可选，用于覆盖内部参数的键值对
-   *   若传入，会覆盖同名的表单参数和分页参数（如page、pageSize或搜索字段）
-   */
-  const loadDataSource = useCallback(async (overrideParams = {}) => {
-    if (!fetchDataApi) return;
-    setLoading(true);
-    try {
-      // 1. 获取组件内部的表单参数
-      const formValues = await form.validateFields();
-
-      // 2. 构造基础参数：分页参数 + 表单参数
-      const baseParams = {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize,
-        ...formValues
-      };
-
-      // 3. 用外部传入的参数覆盖基础参数（同名参数以外部为准）
-      const requestParams = {
-        ...baseParams,
-        ...overrideParams
-      };
-
-      // 4. 发起请求
-      const response = await fetchDataApi(requestParams);
-      setTableData(response.data || []);
-      setTotalCount(response.totalCount || 0);
-    } catch (error) {
-      console.error('列表数据请求失败：', error);
-      setTableData([]);
-      setTotalCount(0);
-    } finally {
-      setLoading(false);
-    }
-  }, [fetchDataApi, pagination, form]);
-
-  // 暴露刷新方法给父组件
-  useImperativeHandle(ref, () => ({
-    // 外部调用时可传入覆盖参数
-    loadDataSource: (overrideParams = {}) => loadDataSource(overrideParams)
-  }));
-  const handleFinish = values => {
-    // 搜索时重置到第一页，并用表单值覆盖（values会合并到baseParams中）
-    setPagination(prev => ({
-      ...prev,
-      pageIndex: 1
-    }));
-    loadDataSource({
-      ...values,
-      pageIndex: 1
-    });
-  };
-  const handleReset = () => {
-    // 清空表单
-    form.setFieldsValue(searchFormConfig.reduce((obj, item) => {
-      obj[item.name] = undefined;
-      return obj;
-    }, {}));
-    // 重置分页并使用内部默认参数查询
-    setPagination(initialPagination);
-    loadDataSource();
-  };
-  const handlePaginationChange = newPagination => {
-    console.warn("ssssssssssss", newPagination);
-    // 更新分页后，用新分页参数查询
-    setPagination({
-      ...newPagination,
-      pageIndex: newPagination.current
-    });
-    loadDataSource({
-      pageIndex: newPagination.current,
-      pageSize: newPagination.pageSize
-    });
-  };
-  useEffect(() => {
-    loadDataSource();
-  }, []);
-  const generateFormItems = () => {
-    return searchFormConfig.map((item, index) => {
-      const {
-        field: FieldComponent,
-        name,
-        label,
-        required,
-        fieldProps = {},
-        itemProps = {},
-        content,
-        ...restProps
-      } = item;
-      return /*#__PURE__*/React.createElement(Form.Item, _extends({
-        key: `search-item-${name}-${index}`,
-        name: name,
-        label: label
-      }, required ? {
-        required: true,
-        rules: [{
-          required: true,
-          message: `${SELECT_COMPONENTS.includes(getComponentName(FieldComponent)) ? '请选择' : '请输入'}${label}`
-        }]
-      } : {}, itemProps, restProps), /*#__PURE__*/React.createElement(FieldComponent, _extends({
-        allowClear: true,
-        placeholder: `${SELECT_COMPONENTS.includes(getComponentName(FieldComponent)) ? '请选择' : '请输入'}${label}`
-      }, fieldProps), content || null));
-    }).filter(Boolean);
-  };
-  const TableComponent = proTable ? ProTable : Table;
-  return /*#__PURE__*/React.createElement(Row, {
-    gutter: [16, 24]
-  }, /*#__PURE__*/React.createElement(Col, {
-    span: 24
-  }, /*#__PURE__*/React.createElement(SearchForm, {
-    expand: true,
-    form: form,
-    loading: loading,
-    formLine: generateFormItems(),
-    onReset: handleReset,
-    onFinish: handleFinish
-  })), /*#__PURE__*/React.createElement(Col, {
-    span: 24
-  }, /*#__PURE__*/React.createElement(TableComponent, _extends({
-    columns: columns,
-    dataSource: tableData,
-    rowKey: rowKey,
-    loading: loading,
-    pagination: {
-      ...pagination,
-      current: pagination.pageIndex,
-      total: totalCount
-    },
-    onChange: handlePaginationChange,
-    scroll: {
-      x: 'max-content'
-    },
-    bordered: true
-  }, tableProps))));
-});
-export default ListDataContainer;

package/MediaQuery/index.js

@@ -1,42 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react';
-const MEDIA_QUERY_LIST = {
-  MAX_WIDTH_479: '(max-width: 479px)',
-  MIN_WIDTH_480_AND_MAX_WIDTH_599: '(min-width: 480px) and (max-width: 599px)',
-  MIN_WIDTH_600_AND_MAX_WIDTH_899: '(min-width: 600px) and (max-width: 899px)',
-  MIN_WIDTH_900_AND_MAX_WIDTH_1199: '(min-width: 900px) and (max-width: 1199px)',
-  MIN_WIDTH_1200_AND_MAX_WIDTH_1439: '(min-width: 1200px) and (max-width: 1439px)',
-  MIN_WIDTH_1440: '(min-width: 1440px)'
-};
-export default function MediaQuery({
-  children,
-  disabled
-}) {
-  const [media, setMedia] = useState(undefined);
-  const mediaQueries = useMemo(() => {
-    if (disabled) return {};
-    return Object.fromEntries(Object.entries(MEDIA_QUERY_LIST).map(([key, query]) => [key, window.matchMedia(query)]));
-  }, [disabled]);
-  useEffect(() => {
-    if (disabled) return;
-    const handleChange = () => {
-      for (const [key, mql] of Object.entries(mediaQueries)) {
-        if (mql.matches) {
-          setMedia(key);
-          return;
-        }
-      }
-      setMedia(undefined);
-    };
-    Object.values(mediaQueries).forEach(mql => mql.addEventListener('change', handleChange));
-
-    // 初始化
-    handleChange();
-    return () => {
-      Object.values(mediaQueries).forEach(mql => mql.removeEventListener('change', handleChange));
-    };
-  }, [mediaQueries, disabled]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (Array.isArray(children) ? children : [children]).map((item, index) => /*#__PURE__*/React.isValidElement(item) ? /*#__PURE__*/React.cloneElement(item, {
-    key: index,
-    'data-media-query': media
-  }) : item));
-}