@cqsjjb/jjb-react-admin-component 3.1.3 → 3.2.0-beta.0

package/ControlWrapper/index.js

@@ -1,268 +1,93 @@
+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 from 'react';
 import PropTypes from 'prop-types';
-import { Cascader as OriginCascader, Col, DatePicker as OriginDatePicker, Input as OriginInput, Row, Select as OriginSelect, TreeSelect as OriginTreeSelect } from 'antd';
+import { Row, Col, Input as OriginInput, Select as OriginSelect, Cascader as OriginCascader, DatePicker as OriginDatePicker, TreeSelect as OriginTreeSelect } from 'antd';
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { getAlgorithm, getPrefixCls } from '../tools/index.js';
 import './index.less';
-const prefixCls = process?.env?.app?.antd['ant-prefix'] || 'ant';
+const algorithm = getAlgorithm();
+const prefixCls = getPrefixCls();
 
 /**
- * @param classList {string[]}
- * @return {string}
+ * 通用包裹组件
+ * @param {*} WrappedComponent antd 原生组件
+ * @param {*} extraProps 额外的透传配置
  */
-function classnames(classList) {
-  return classList.filter(i => i).join(' ');
-}
-function algorithm() {
-  const value = document.documentElement.style.getPropertyValue('--saas-algorithm');
-  return value ? value === '#FFF' ? 'default' : 'dark' : 'default';
-}
-class Input extends React.Component {
-  get algorithm() {
-    return algorithm();
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: this.props.style,
-      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
-    }, /*#__PURE__*/React.createElement(Row, {
-      align: "middle",
-      wrap: false
-    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
-      span: this.props.labelSpan,
-      className: `${prefixCls}-form-item-control-label-span`
-    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
-      flex: 1
-    }, /*#__PURE__*/React.createElement(OriginInput, {
-      style: {
-        width: '100%'
-      },
-      value: this.props.value,
-      maxLength: this.props.maxLength,
-      allowClear: this.props.allowClear,
-      placeholder: this.props.placeholder,
-      onChange: e => this.props.onChange(e.target.value || undefined)
-    }))));
-  }
-}
-Input.propTypes = {
-  value: PropTypes.any,
-  label: PropTypes.string,
-  labelSpan: PropTypes.number,
-  maxLength: PropTypes.number,
-  allowClear: PropTypes.bool,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func
-};
-class Select extends React.Component {
-  get algorithm() {
-    return algorithm();
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: this.props.style,
-      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
-    }, /*#__PURE__*/React.createElement(Row, {
-      align: "middle",
-      wrap: false
-    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
-      span: this.props.labelSpan,
-      className: `${prefixCls}-form-item-control-label-span`
-    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
-      flex: 1
-    }, /*#__PURE__*/React.createElement(OriginSelect, {
-      mode: this.props.mode,
-      style: {
-        width: '100%'
-      },
-      value: this.props.value,
-      allowClear: this.props.allowClear,
-      maxTagCount: this.props.maxTagCount || 3,
-      placeholder: this.props.placeholder,
-      onChange: value => this.props.onChange(value || undefined)
-    }, this.props.options ? this.props.options : this.props.children))));
-  }
-}
-Select.propTypes = {
-  mode: PropTypes.string,
-  value: PropTypes.any,
-  label: PropTypes.string,
-  labelSpan: PropTypes.number,
-  allowClear: PropTypes.bool,
-  maxTagCount: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func
-};
-class Cascader extends React.Component {
-  get algorithm() {
-    return algorithm();
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: this.props.style,
-      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
-    }, /*#__PURE__*/React.createElement(Row, {
-      align: "middle",
-      wrap: false
-    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
-      span: this.props.labelSpan,
-      className: `${prefixCls}-form-item-control-label-span`
-    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
-      flex: 1
-    }, /*#__PURE__*/React.createElement(OriginCascader, {
-      style: {
-        width: '100%'
-      },
-      value: this.props.value,
-      options: this.props.options,
-      multiple: this.props.multiple,
-      allowClear: this.props.allowClear,
-      fieldNames: this.props.fieldNames,
-      maxTagCount: this.props.maxTagCount || 3,
-      placeholder: this.props.placeholder,
-      showCheckedStrategy: this.props.showCheckedStrategy,
-      onChange: value => this.props.onChange(value || undefined)
-    }))));
-  }
-}
-Cascader.propTypes = {
-  mode: PropTypes.string,
-  value: PropTypes.any,
-  label: PropTypes.string,
-  options: PropTypes.array,
-  multiple: PropTypes.bool,
-  labelSpan: PropTypes.number,
-  allowClear: PropTypes.bool,
-  fieldNames: PropTypes.object,
-  maxTagCount: PropTypes.number,
-  placeholder: PropTypes.string,
-  showCheckedStrategy: PropTypes.string,
-  onChange: PropTypes.func
-};
-class RangePicker extends React.Component {
-  get algorithm() {
-    return algorithm();
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: this.props.style,
-      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
-    }, /*#__PURE__*/React.createElement(Row, {
-      align: "middle",
-      wrap: false
-    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
-      span: this.props.labelSpan,
-      className: `${prefixCls}-form-item-control-label-span`
-    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
-      style: {
-        flex: 1
+function withLabel(WrappedComponent, extraProps = {}) {
+  return function Wrapper(props) {
+    const {
+      label,
+      labelSpan,
+      style,
+      onChange,
+      ...restProps
+    } = props;
+    const handleChange = (val, ...args) => {
+      if (onChange) {
+        // 统一处理空字符串 -> undefined
+        onChange(val === '' ? undefined : val, ...args);
       }
-    }, /*#__PURE__*/React.createElement(OriginDatePicker.RangePicker, {
-      style: {
-        width: '100%'
-      },
-      value: this.props.value,
-      format: this.props.format,
-      showTime: this.props.showTime || undefined,
-      placeholder: this.props.placeholder,
-      onChange: value => this.props.onChange(value || undefined)
-    }))));
-  }
-}
-RangePicker.propTypes = {
-  value: PropTypes.any,
-  label: PropTypes.string,
-  format: PropTypes.string,
-  labelSpan: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func
-};
-class DatePicker extends React.Component {
-  static RangePicker = RangePicker;
-  get algorithm() {
-    return algorithm();
-  }
-  render() {
+    };
     return /*#__PURE__*/React.createElement("div", {
-      style: this.props.style,
-      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
+      style: style,
+      className: tools.classNames(`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${algorithm}`, label && `${prefixCls}-form-item-control-label-has`)
     }, /*#__PURE__*/React.createElement(Row, {
-      align: "middle",
-      wrap: false
-    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
-      span: this.props.labelSpan,
+      align: "middle"
+    }, label && /*#__PURE__*/React.createElement(Col, {
+      span: labelSpan,
       className: `${prefixCls}-form-item-control-label-span`
-    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
+    }, label), /*#__PURE__*/React.createElement(Col, {
       flex: 1
-    }, /*#__PURE__*/React.createElement(OriginDatePicker, {
+    }, /*#__PURE__*/React.createElement(WrappedComponent, _extends({
       style: {
         width: '100%'
-      },
-      value: this.props.value,
-      format: this.props.format,
-      picker: this.props.picker || undefined,
-      showTime: this.props.showTime || undefined,
-      placeholder: this.props.placeholder,
-      onChange: value => this.props.onChange(value || undefined)
-    }))));
-  }
-}
-DatePicker.propTypes = {
-  value: PropTypes.any,
-  label: PropTypes.string,
-  format: PropTypes.string,
-  labelSpan: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func
-};
-class TreeSelect extends React.Component {
-  get algorithm() {
-    return algorithm();
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: this.props.style,
-      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
-    }, /*#__PURE__*/React.createElement(Row, {
-      align: "middle",
-      wrap: false
-    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
-      span: this.props.labelSpan,
-      className: `${prefixCls}-form-item-control-label-span`
-    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
-      flex: 1
-    }, /*#__PURE__*/React.createElement(OriginTreeSelect, {
-      showSearch: true,
-      allowClear: true,
-      style: {
-        width: '100%'
-      },
-      treeData: this.props.treeData,
-      fieldNames: this.props.fieldNames,
-      dropdownStyle: this.props.dropdownStyle,
-      maxTagCount: 2,
-      value: this.props.value,
-      placeholder: this.props.placeholder ? this.props.placeholder : '请选择分类',
-      defaultValue: this.props.defaultValue ? this.props.defaultValue : undefined,
-      treeCheckable: this.props.checkbox,
-      treeNodeFilterProp: "title",
-      showCheckedStrategy: OriginTreeSelect.SHOW_PARENT,
-      onChange: value => this.props.onChange(value)
-    }))));
-  }
+      }
+    }, extraProps, restProps, {
+      onChange: handleChange
+    })))));
+  };
 }
-TreeSelect.propTypes = {
+
+// ============ 输入类 ============
+const Input = withLabel(OriginInput);
+
+// ============ 选择类 ============
+const Select = withLabel(OriginSelect, {
+  maxTagCount: 3
+});
+const Cascader = withLabel(OriginCascader, {
+  maxTagCount: 3
+});
+const TreeSelect = withLabel(OriginTreeSelect, {
+  showSearch: true,
+  allowClear: true,
+  showCheckedStrategy: OriginTreeSelect.SHOW_PARENT,
+  treeNodeFilterProp: 'title'
+});
+
+// ============ 日期类 ============
+const DatePicker = withLabel(OriginDatePicker);
+DatePicker.RangePicker = withLabel(OriginDatePicker.RangePicker);
+DatePicker.TimePicker = withLabel(OriginDatePicker.TimePicker);
+DatePicker.WeekPicker = withLabel(OriginDatePicker.WeekPicker);
+DatePicker.MonthPicker = withLabel(OriginDatePicker.MonthPicker);
+DatePicker.QuarterPicker = withLabel(OriginDatePicker.QuarterPicker);
+DatePicker.YearPicker = withLabel(OriginDatePicker.YearPicker);
+
+// ============ PropTypes 公共扩展 ============
+const commonPropTypes = {
   label: PropTypes.string,
-  checkbox: PropTypes.bool,
-  treeData: PropTypes.array,
   labelSpan: PropTypes.number,
-  fieldNames: PropTypes.object,
-  defaultValue: PropTypes.array,
-  dropdownStyle: PropTypes.object,
+  style: PropTypes.object,
   onChange: PropTypes.func
 };
+[Input, Select, Cascader, TreeSelect, DatePicker, DatePicker.RangePicker, DatePicker.TimePicker, DatePicker.WeekPicker, DatePicker.MonthPicker, DatePicker.QuarterPicker, DatePicker.YearPicker].forEach(cmp => {
+  cmp.propTypes = commonPropTypes;
+});
 export default {
   Input,
   Select,
   Cascader,
-  DatePicker,
-  TreeSelect
+  TreeSelect,
+  DatePicker
 };

package/Editor/index.js

@@ -0,0 +1,330 @@
+import PropTypes from 'prop-types';
+import '@wangeditor/editor/dist/css/style.css';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { message } from 'antd';
+import { http, tools } from '@cqsjjb/jjb-common-lib';
+import { createEditor, createToolbar } from '@wangeditor/editor';
+
+/**
+ * 工具函数：标准化 HTML 内容为空值
+ */
+function normalizeEmptyHtml(html) {
+  if (!html) return '';
+  const cleaned = html.replace(/\s+/g, '').toLowerCase();
+  return cleaned === '<p><br></p>' || cleaned === '<p></p>' || cleaned === '' ? '' : html;
+}
+
+/**
+ * 校验上传文件类型和大小
+ */
+function validateFile(file, {
+  validTypes,
+  validExts,
+  maxSize,
+  typeName
+}) {
+  const ext = file.name.split('.').pop().toLowerCase();
+  if (!validTypes.includes(file.type) && !validExts.includes(ext)) {
+    message.error(`只能上传${typeName}文件（${validExts.join(', ')}）`);
+    return false;
+  }
+  if (file.size > maxSize) {
+    message.error(`${typeName}大小不能超过 ${maxSize / 1024 / 1024}MB`);
+    return false;
+  }
+  return true;
+}
+
+/**
+ * 通用上传函数
+ */
+async function handleUpload(file, insertFn, options) {
+  const {
+    typeName,
+    validTypes,
+    validExts,
+    maxSize,
+    uploadServer,
+    uploadFileName,
+    uploadHeaders,
+    application,
+    uploadCustomRequest
+  } = options;
+  try {
+    if (!validateFile(file, {
+      validTypes,
+      validExts,
+      maxSize,
+      typeName
+    })) {
+      return;
+    }
+
+    // 自定义上传
+    if (typeof uploadCustomRequest === 'function') {
+      const url = await uploadCustomRequest(file);
+      insertFn(url, file.name);
+      return;
+    }
+
+    // 默认上传
+    const formData = new FormData();
+    formData.append(uploadFileName, file);
+    const resp = await fetch(uploadServer, {
+      method: 'POST',
+      headers: {
+        ...uploadHeaders,
+        ...(application ? {
+          tenantCode: application.tenantCode
+        } : {})
+      },
+      body: formData
+    });
+    const res = await resp.json();
+    if (res?.data?.fileUrl) {
+      insertFn(res.data.fileUrl, file.name);
+    } else if (Array.isArray(res?.data)) {
+      res.data.forEach(url => insertFn(url, file.name));
+    } else {
+      message.error(res?.respDesc || `${typeName}上传失败`);
+    }
+  } catch (e) {
+    console.error(e);
+    message.error(`${typeName}上传失败`);
+  }
+}
+const RCEditor = /*#__PURE__*/forwardRef(function RCEditor(props, ref) {
+  const {
+    value,
+    bordered = true,
+    mode = 'default',
+    height = 300,
+    disabled,
+    uploadUrl = `${window.process.env.app.API_HOST}/attachment/files/upload-speed-simple`,
+    uploadFileName = 'file',
+    uploadHeaders = {},
+    uploadCustomRequest,
+    placeholder = '请输入...',
+    uploadImageFileSize = 5 * 1024 * 1024,
+    uploadVideoFileSize = 50 * 1024 * 1024,
+    borderStyle = 'solid',
+    borderColor = '#e8e8e8',
+    borderWidth = 1,
+    borderRadius = 2,
+    onBlur,
+    onFocus,
+    onChange
+  } = props;
+
+  // 编辑器
+  const editorRef = useRef(null);
+  // 工具栏
+  const toolbarRef = useRef(null);
+  // 编辑器实例
+  const editorInstanceRef = useRef(null);
+  // 最后一次的html
+  const lastHtmlRef = useRef('');
+  // 是否是第一次聚焦
+  const isFirstFocusRef = useRef(true);
+  // 应用配置
+  const appConfig = tools.toObject(window.process?.env?.app);
+
+  // 上传地址
+  const uploadServer = useMemo(() => {
+    if (!appConfig) return uploadUrl;
+    return http.HTTP_URL_REG.test(uploadUrl) ? uploadUrl : `${appConfig.API_HOST}${uploadUrl}`;
+  }, [appConfig, uploadUrl]);
+
+  // 初始化编辑器
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const editor = createEditor({
+      selector: editorRef.current,
+      config: {
+        placeholder,
+        readOnly: disabled,
+        onChange(editor) {
+          // 获取html
+          let html = editor.getHtml();
+          // 标准化html
+          html = normalizeEmptyHtml(html);
+          // 存储最后一次的html
+          lastHtmlRef.current = html;
+
+          // 如果不是第一次聚焦，并且有onChange函数，则调用onChange函数
+          if (!isFirstFocusRef.current && tools.isFunction(onChange)) {
+            onChange(html);
+          }
+        },
+        onFocus: () => {
+          // 如果是第一次聚焦，则设置为不是第一次聚焦
+          if (isFirstFocusRef.current) {
+            isFirstFocusRef.current = false;
+            return;
+          }
+          // 调用onFocus函数
+          tools.isFunction(onFocus) && onFocus();
+        },
+        onBlur: () => tools.isFunction(onBlur) && onBlur(),
+        // 菜单配置
+        MENU_CONF: {
+          uploadImage: {
+            server: uploadServer,
+            fieldName: uploadFileName,
+            maxFileSize: uploadImageFileSize,
+            headers: {
+              ...uploadHeaders,
+              ...(appConfig ? {
+                tenantCode: appConfig.tenantCode
+              } : {})
+            },
+            timeout: 60000,
+            customUpload: async (file, insertFn) => {
+              await handleUpload(file, insertFn, {
+                typeName: '图片',
+                validTypes: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp'],
+                validExts: ['png', 'jpg', 'jpeg', 'gif', 'webp'],
+                maxSize: uploadImageFileSize,
+                uploadServer,
+                uploadFileName,
+                uploadHeaders,
+                appConfig,
+                uploadCustomRequest
+              });
+            }
+          },
+          uploadVideo: {
+            server: uploadServer,
+            fieldName: uploadFileName,
+            maxFileSize: uploadVideoFileSize,
+            headers: {
+              ...uploadHeaders,
+              ...(appConfig ? {
+                tenantCode: appConfig.tenantCode
+              } : {})
+            },
+            timeout: 120000,
+            customUpload: async (file, insertFn) => {
+              await handleUpload(file, insertFn, {
+                typeName: '视频',
+                validTypes: ['video/mp4', 'video/webm', 'video/ogg', 'video/mkv'],
+                validExts: ['mp4', 'webm', 'ogg', 'mkv'],
+                maxSize: uploadVideoFileSize,
+                uploadServer,
+                uploadFileName,
+                uploadHeaders,
+                appConfig,
+                uploadCustomRequest
+              });
+            }
+          }
+        }
+      },
+      mode
+    });
+    createToolbar({
+      editor,
+      selector: toolbarRef.current,
+      config: {},
+      mode
+    });
+
+    // 初始化内容
+    const initialHtml = normalizeEmptyHtml(value || '');
+    // 设置html
+    editor.setHtml(initialHtml);
+    // 存储最后一次的html
+    lastHtmlRef.current = initialHtml;
+    // 禁用编辑器
+    if (disabled) editor.disable();
+    // 存储编辑器实例
+    editorInstanceRef.current = editor;
+    // 销毁编辑器
+    return () => {
+      try {
+        editor.destroy();
+      } catch (e) {}
+      editorInstanceRef.current = null;
+    };
+  }, []);
+
+  // 受控 value
+  useEffect(() => {
+    // 获取编辑器实例
+    const editor = editorInstanceRef.current;
+    if (!editor) return;
+    // 标准化html
+    const safeHtml = normalizeEmptyHtml(value || '');
+    if (safeHtml !== lastHtmlRef.current) {
+      editor.setHtml(safeHtml);
+      // 存储最后一次的html
+      lastHtmlRef.current = safeHtml;
+    }
+  }, [value]);
+
+  // disabled 切换
+  useEffect(() => {
+    const editor = editorInstanceRef.current;
+    if (!editor) return;
+    // 禁用编辑器
+    if (disabled) editor.disable();
+    // 启用编辑器
+    else editor.enable();
+  }, [disabled]);
+  // 暴露编辑器实例
+  useImperativeHandle(ref, () => ({
+    // 获取编辑器实例
+    getEditorInstance: () => editorInstanceRef.current,
+    // 获取html
+    getHtml: () => normalizeEmptyHtml(editorInstanceRef.current?.getHtml?.() || ''),
+    // 设置html
+    setHtml: html => {
+      if (!editorInstanceRef.current) return;
+      const safeHtml = normalizeEmptyHtml(html || '');
+      editorInstanceRef.current.setHtml(safeHtml);
+      lastHtmlRef.current = safeHtml;
+    },
+    // 获取纯文本
+    getPlainText: () => editorInstanceRef.current?.getText?.() || ''
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: bordered ? `${borderWidth}px ${borderStyle} ${borderColor}` : 'none',
+      overflow: 'hidden',
+      borderRadius
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: toolbarRef,
+    style: {
+      borderBottom: bordered ? `${borderWidth}px ${borderStyle} ${borderColor}` : 'none'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: editorRef,
+    style: {
+      height,
+      overflowY: 'auto'
+    }
+  }));
+});
+RCEditor.propTypes = {
+  bordered: PropTypes.bool,
+  borderStyle: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderWidth: PropTypes.number,
+  borderRadius: PropTypes.number,
+  mode: PropTypes.string,
+  value: PropTypes.string,
+  height: PropTypes.number,
+  disabled: PropTypes.bool,
+  uploadUrl: PropTypes.string,
+  uploadFileName: PropTypes.string,
+  uploadImageFileSize: PropTypes.number,
+  uploadVideoFileSize: PropTypes.number,
+  uploadHeaders: PropTypes.object,
+  uploadCustomRequest: PropTypes.func,
+  placeholder: PropTypes.string,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onChange: PropTypes.func
+};
+export default RCEditor;