@lingxiteam/ebe-utils 0.5.11 → 0.6.1

package/lib/h5public/src/components/factory/src/DformFile/FormFile.tsx

@@ -1,29 +1,29 @@
 /* eslint-disable jsx-a11y/alt-text */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { DformFile } from '@lingxiteam/dform';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { Ellipsis, ImageViewer, Popover, Toast } from 'antd-mobile-5';
-import { Action } from 'antd-mobile-5/es/components/popover';
-import classNames from 'classnames';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { DFormWrapper } from '../BasicComponents';
-import Icon from '../Icon';
-import { convertToBytes } from '../utils';
-import { dateToFormatter } from '../utils/date';
 import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
 import { join } from '../utils/path';
 import UploadHandle from '../utils/upload';
-import closeIcon from './assets/closeIcon.png';
-import defaultIcon from './assets/default.png';
+import { convertToBytes } from '../utils';
+import Icon from '../Icon';
 import fileIcon from './assets/fileName.png';
-import imgIcon from './assets/img.png';
-import jsIcon from './assets/js.png';
-import pdfIcon from './assets/pdf.png';
-import pptIcon from './assets/ppt.png';
-import txtIcon from './assets/txt.png';
 import wordIcon from './assets/word.png';
+import pptIcon from './assets/ppt.png';
 import xlsIcon from './assets/xls.png';
+import defaultIcon from './assets/default.png';
+import imgIcon from './assets/img.png';
 import zipIcon from './assets/zip.png';
+import pdfIcon from './assets/pdf.png';
+import jsIcon from './assets/js.png';
+import txtIcon from './assets/txt.png';
+import closeIcon from './assets/closeIcon.png';
+import { dateToFormatter } from '../utils/date';
+import { ImageViewer, Popover, Toast, Ellipsis } from 'antd-mobile-5';
+import { Action } from 'antd-mobile-5/es/components/popover';
 import './index.less';
+import classNames from 'classnames';
 
 const prefixCls = 'lcdp-dformfile';
 const IMG_TYPE = ['png', 'svg', 'jpeg', 'jpg', 'heic', 'ico', 'bmp', 'tiff', 'tif'];
@@ -67,12 +67,12 @@ export interface FormFileProps extends UseFormItemProps {
    * @deprecated 不知道啥作用
    */
   resAliaKeys?: {
-    title: string;
-    id: string;
+    title: string,
+    id: string,
   };
   alias?: {
-    title: string;
-    id: string;
+    title: string,
+    id: string,
   };
   upload: (values: any) => void;
 
@@ -128,23 +128,31 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
   };
   const { getLocale } = engineApis;
   const { api = '/app/file/uploadSingleFile', _source, _serviceId } = columns || {};
-  const { disabled, val: defaultVal, onInputChange, getRules, required, readOnly, visible, isForm, form } = useFormItem(ref, props);
+  const {
+    disabled,
+    val: defaultVal,
+    onInputChange,
+    getRules,
+    required,
+    readOnly,
+    visible,
+    isForm,
+    form,
+  } = useFormItem(ref, props);
   const galleryRef = useRef<any>();
   const uploadResultRef = React.useRef<any>();
   const [imgSrc, setImgSrc] = useState('');
   const [imageVisible, setImageVisibleVisible] = useState(false);
   const { fieldProps } = restProps;
-  const { val } = useMemo(
-    () => ({
-      get val() {
-        if (isForm && fieldProps) {
-          return form?.getFieldValue(fieldProps);
-        }
-        return defaultVal;
-      },
-    }),
-    [defaultVal, isForm, fieldProps, form]
-  );
+  const { val } = useMemo(() => ({
+    get val() {
+      if (isForm && fieldProps) {
+        return form?.getFieldValue(fieldProps);
+      }
+      return defaultVal;
+    },
+  }), [defaultVal, isForm, fieldProps, form]);
+
 
   useEffect(() => {
     if (!uploadResultRef.current) {
@@ -289,10 +297,11 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
   const isImage = (item: any) => {
     if (
       item?.fileType?.startsWith('image') ||
-      IMG_TYPE.includes(item?.file_path_in_server?.split('.')?.[1]?.toLocaleLowerCase() || '') ||
+      IMG_TYPE.includes(
+        item?.file_path_in_server?.split('.')?.[1]?.toLocaleLowerCase() || '',
+      ) ||
       IMG_TYPE.includes(item.filePathInServer?.split('.')?.[1]?.toLocaleLowerCase() || '') ||
-      IMG_TYPE.includes(item.fileName?.split('.')?.[1]?.toLocaleLowerCase() || '') ||
-      IMG_TYPE.includes(item.url?.split('.')?.[1]?.toLocaleLowerCase() || '')
+      IMG_TYPE.includes(item.fileName?.split('.')?.[1]?.toLocaleLowerCase() || '') || IMG_TYPE.includes(item.url?.split('.')?.[1]?.toLocaleLowerCase() || '')
     ) {
       return true;
     }
@@ -308,9 +317,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
         <span
           className={cName}
           // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{
-            __html: iconInfo?.iconFileInfo?.svgContent,
-          }}
+          dangerouslySetInnerHTML={{ __html: iconInfo?.iconFileInfo?.svgContent }}
           onClick={() => {
             if (onButtonClick) {
               onButtonClick();
@@ -319,15 +326,11 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
         />
       );
     } else {
-      const { type, theme, isIconFont, fontAddress } = iconInfo;
       iconView = (
         <span className={cName}>
           {/** @ts-ignore */}
           <Icon
-            type={type}
-            theme={theme}
-            isIconFont={isIconFont}
-            fontAddress={fontAddress}
+            icon={iconInfo}
             onClick={() => {
               if (onButtonClick) {
                 onButtonClick();
@@ -396,7 +399,13 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
         icon = iconMap[suffix];
       }
     }
-    return <img src={icon ?? defaultIcon} alt="" className={`${prefixCls}-list-style-img-item-file-icon`} />;
+    return (
+      <img
+        src={icon ?? defaultIcon}
+        alt=""
+        className={`${prefixCls}-list-style-img-item-file-icon`}
+      />
+    );
   };
   const rightBtn = (btnList: any) => {
     const showBtnList = (btnList || []).filter((btn: { checked: any }) => btn.checked);
@@ -417,15 +426,15 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
     }
     const actions: Action[] = showBtnList.map((btn: any, index: number) => {
       const { btnText, onButtonClick } = btn;
-      return {
-        key: `${index + 1}`,
-        icon: null,
-        text: btnText,
-        onClick: onButtonClick,
-      };
+      return { key: `${index + 1}`, icon: null, text: btnText, onClick: onButtonClick };
     });
     return (
-      <Popover.Menu actions={actions} placement="bottom" trigger="click" className={`${prefixCls}-popover`}>
+      <Popover.Menu
+        actions={actions}
+        placement="bottom"
+        trigger="click"
+        className={`${prefixCls}-popover`}
+      >
         <span className={`${prefixCls}-list-style-img-item-more-btn`}>{getLocale?.('more', '更多')}</span>
       </Popover.Menu>
     );
@@ -500,7 +509,11 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
         return (
           <div className={`${prefixCls}-list-style-text-item`}>
             <div className={`${prefixCls}-list-style-text-item-left-item`}>
-              <img src={fileIcon} alt="" className={`${prefixCls}-list-style-text-item-file-icon`} />
+              <img
+                src={fileIcon}
+                alt=""
+                className={`${prefixCls}-list-style-text-item-file-icon`}
+              />
               <Ellipsis
                 direction="middle"
                 content={fileNameField}
@@ -518,7 +531,9 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
               {btnList && btnList.length
                 ? btnList.map(item => {
                   const { checked, icon, onButtonClick } = item;
-                  const iconView = checked ? renderIcon(icon, `${prefixCls}-line-icon`, onButtonClick) : null;
+                  const iconView = checked
+                    ? renderIcon(icon, `${prefixCls}-line-icon`, onButtonClick)
+                    : null;
                   return iconView;
                 })
                 : null}
@@ -621,7 +636,9 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
           uploadStyle={uploadStyle}
           {...fileOtherProps}
           extra={renderExtra}
-          titleExtension={hasTitleIcon === 'hasIcon' ? renderIcon(titleIcon, `${prefixCls}-icon`, null) : null}
+          titleExtension={
+            hasTitleIcon === 'hasIcon' ? renderIcon(titleIcon, `${prefixCls}-icon`, null) : null
+          }
           value={val}
           rules={getRules()}
           cardIcon={cardIcon}
@@ -630,7 +647,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
           required={required}
           beforeUpload={(files: any[]) => {
             const currenLength = val?.length || 0;
-            if (typeof numberLimit === 'number' && numberLimit > 0 && files.length + currenLength > numberLimit) {
+            if (typeof numberLimit === 'number' && numberLimit > 0 && (files.length + currenLength) > numberLimit) {
               Toast.show(`最多选择 ${numberLimit} 个文件，你多选了 ${files.length + currenLength - numberLimit} 个`);
               return null;
             }
@@ -693,11 +710,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
           maxLength={numberLimit}
           // 存量数据
           valueStyle={{ color: props.valueStyle }}
-          fileProps={{
-            ...fileProps,
-            accept: fileProps?.accept || acceptData(),
-            multiple,
-          }}
+          fileProps={{ ...fileProps, accept: fileProps?.accept || acceptData(), multiple }}
           readonly={readOnly}
           getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
             return engineApis?.getLocale(`DformFile.${t}`, '', tempValue);

package/lib/h5public/src/components/factory/src/DformFile/index.tsx

@@ -1,7 +1,7 @@
-import { Form } from '@lingxiteam/dform';
-import { LingxiForwardRef } from '@lingxiteam/types';
 import React from 'react';
+import { Form } from '@lingxiteam/dform';
 import { FormItem } from '../BasicComponents';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { DFormContext } from '../utils/form';
 import { withTransformProps } from '../utils/withTransformProps';
 import type { FormFileProps } from './FormFile';

package/lib/h5public/src/components/factory/src/DformImagePicker/ImagePicker.tsx

@@ -1,11 +1,15 @@
+import React, { useEffect, useRef, useMemo } from 'react';
 import { DformImagePicker } from '@lingxiteam/dform';
-import React, { useEffect, useMemo, useRef } from 'react';
 import { DFormWrapper } from '../BasicComponents';
 import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
 import UploadHandle from '../utils/upload';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { EngineApisType, LingxiForwardRef } from '@lingxiteam/types';
+import _ from 'lodash';
 import { Toast } from 'antd-mobile-5';
+import { EngineApisType, LingxiForwardRef } from '@lingxiteam/types';
+import { checkFileType, getAcceptTargetValue } from '../utils/checkFileType';
+import { UploadTask } from 'antd-mobile-5/es/components/image-uploader';
+import { useListenProps } from '../utils/hooks/useListenState';
 // import { usePatchUploadImage } from './usePatchUploadImage';
 
 // @ts-ignore
@@ -33,12 +37,16 @@ export interface ImagePickerProps extends UseFormItemProps {
   newDefaultValue?: any; // 添加id和url的文件数据
   synchronousDeletion?: boolean;
   multiple?: boolean; // 是否支持多选
+  onAllUploadCallback?: (taskFiles: any[]) => void
+  beforeUpload?: (files: File[], file: File) => void;
+  uploadAccepType?: Record<string, any>;
 }
+
 const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
   const {
     // defaultValue,
     onChange,
-    maxLength,
+    maxLength: temMaxLength,
     fileName = 'file',
     headers,
     resAliaKeys,
@@ -57,11 +65,23 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
     synchronousDeletion = false,
     $$componentItem,
     multiple = false,
+    onAllUploadCallback,
+    beforeUpload,
+    uploadAccepType,
+    selectable: temSelectable = true,
     ...restProps
   } = props;
   const { api = '/app/file/uploadSingleFile', _source, _serviceId } = columns || {};
   const uploadResultRef = useRef<any>();
   const engineApis = getEngineApis?.();
+  const [maxLength] = useListenProps(temMaxLength);
+  const [selectable] = useListenProps(temSelectable);
+
+  // 批量上传任务状态
+  const uploadTaskStatus = useRef(false);
+
+  // 批次上传成功文件信息
+  const uploadTaskFiles = useRef<any>([]);
 
   const {
     disabled,
@@ -85,13 +105,12 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
         const [, unit] = limitSize?.split(`${num}`);
         if (unit === 'KB') {
           return num * 1024;
-        }
-        if (unit === 'MB') {
+        } if (unit === 'MB') {
           return num * 1024 * 1024;
         }
       }
     }
-    return +limitSize * 1024;
+    return (+limitSize) * 1024;
   }, [limitSize]);
   useEffect(() => {
     if (!uploadResultRef.current) {
@@ -126,28 +145,21 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
     }
   }, [engineApis.getLocale]);
 
-  const selectable = useMemo(() => {
-    if (props.selectable === false) {
-      return false;
-    }
-    if (maxLength && val?.length >= maxLength) {
-      return false;
-    }
-    return true;
-  }, [props.selectable, maxLength, val]);
   const onUpload = async (file: Blob) =>
     new Promise((resolve, reject) => {
-      uploadResultRef.current.sendRequest({
-        hooks: {
-          uploadAfter(opts: unknown) {
-            resolve(opts);
+      uploadResultRef.current.sendRequest(
+        {
+          hooks: {
+            uploadAfter(opts: unknown) {
+              resolve(opts);
+            },
+            uploadError: () => {
+              reject();
+            },
           },
-          uploadError: () => {
-            reject();
-          },
-        },
-        file,
-      });
+          file,
+        }
+      );
     });
 
   const getImgSize = (base64Str: string) => {
@@ -211,6 +223,7 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
       if (props.onUpload) {
         res = props.onUpload([base64String]);
       }
+      uploadTaskFiles.current.push(res?.url ? res : base64String);
       return res?.url ? res : base64String;
     }
     return uploadResultRef.current.queue([onUpload], [file]).then((data: any) => {
@@ -219,10 +232,22 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
         props.onUpload(values);
       }
       uploadResultRef.current?.clearValue();
+
+      uploadTaskFiles.current.push(values[0]);
       return values[0];
     });
   };
 
+  // 图片上传队列变化时触发
+  const onUploadQueueChange = (tasks: UploadTask[]) => {
+    const failTask = tasks.filter(row => row.status === 'fail');
+    if (uploadTaskStatus.current && (!tasks.length || failTask.length === tasks.length)) {
+      uploadTaskStatus.current = false;
+      if (onAllUploadCallback) onAllUploadCallback(uploadTaskFiles.current);
+      uploadTaskFiles.current = [];
+    }
+  };
+
   const ImgPicker: any = DformImagePicker;
 
   const preview = useMemo(() => {
@@ -242,7 +267,6 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
       {capture === 'camera' ? (
         <ImgPicker
           {...restProps}
-          limitSize={imgLimitSize}
           onImageClick={(index: number, file: any, files: any) => {
             if (onImageClick) {
               onImageClick(index, files, file);
@@ -255,6 +279,28 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
           defaultValue={val}
           accept="image/*,image/heic"
           positionType="vertical"
+          onCountExceed={(exceed: number) => {
+            if (exceed > 0) {
+              Toast.show(`最多选择 ${maxLength} 张图片，你多选了 ${exceed} 张`);
+            }
+          }}
+          beforeCheckMyFileLimit={(file: any, files: any[]) => {
+            uploadTaskStatus.current = true;
+            if (!checkFileType(file, getAcceptTargetValue(uploadAccepType))) {
+              return null;
+            }
+            // 先进行文件大小的判断
+            if (imgLimitSize && file && file.size && file.size > imgLimitSize) {
+              Toast.show({
+                icon: 'fail',
+                content: '图片过大',
+              });
+              return null;
+            }
+            beforeUpload && beforeUpload(files, file);
+            return true;
+          }}
+          onUploadQueueChange={onUploadQueueChange}
           deletable={restProps.disableDelete}
           disabled={disabled}
           getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
@@ -274,20 +320,33 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
           rules={getRules()}
           maxLength={maxLength}
           preview={preview}
-          limitSize={imgLimitSize}
+          onCountExceed={(exceed: number) => {
+            if (exceed > 0) {
+              Toast.show(`最多选择 ${maxLength} 张图片，你多选了 ${exceed} 张`);
+            }
+          }}
           onImageClick={(index: number, file: any, files: any) => {
             if (onImageClick) {
               onImageClick(index, files, file);
             }
           }}
-          beforeCheckMyFileLimit={(_: any, files: any[]) => {
-            const currenLength = val?.length || 0;
-            if (typeof maxLength === 'number' && maxLength > 0 && files.length + currenLength > maxLength) {
-              Toast.show(`最多选择 ${maxLength} 张图片，你多选了 ${files.length + currenLength - maxLength} 张`);
+          beforeCheckMyFileLimit={(file: any, files: any[]) => {
+            uploadTaskStatus.current = true;
+            if (!checkFileType(file, getAcceptTargetValue(uploadAccepType))) {
+              return null;
+            }
+            // 先进行文件大小的判断
+            if (imgLimitSize && file && file.size && file.size > imgLimitSize) {
+              Toast.show({
+                icon: 'fail',
+                content: '图片过大',
+              });
               return null;
             }
+            beforeUpload && beforeUpload(files, file);
             return true;
           }}
+          onUploadQueueChange={onUploadQueueChange}
           required={required}
           defaultValue={val}
           multiple={multiple}

package/lib/h5public/src/components/factory/src/DformImagePicker/index.tsx

@@ -1,11 +1,11 @@
 import { Form } from '@lingxiteam/dform';
-import React, { useMemo } from 'react';
 import { AppForwardRef, FormItem } from '../BasicComponents';
-import { DFormContext } from '../utils/form';
-import { UseFormItemProps } from '../utils/hooks/useFormItem';
 import { withTransformProps } from '../utils/withTransformProps';
 import ImagePicker from './ImagePicker';
 import transformProps from './transformProps';
+import { DFormContext } from '../utils/form';
+import React, { useMemo } from 'react';
+import { UseFormItemProps } from '../utils/hooks/useFormItem';
 
 export interface MyDformImagePickerProps extends UseFormItemProps {
   upload?: (file: any) => void;

package/lib/h5public/src/components/factory/src/DformImagePicker/transformProps.tsx

@@ -8,7 +8,15 @@ interface Props {
 }
 
 export default function transformProps(props: Props) {
-  const { basicStatus, fieldName, name, numberLimit = 5, singleFileMaxSize = 50, value, ...restProps } = props;
+  const {
+    basicStatus,
+    fieldName,
+    name,
+    numberLimit = 5,
+    singleFileMaxSize = 50,
+    value,
+    ...restProps
+  } = props;
   const newProps: Record<string, any> = {
     ...(restProps as any),
     fieldProps: fieldName,

package/lib/h5public/src/components/factory/src/DformInput/index.tsx

@@ -17,8 +17,13 @@ export interface MyDformInputProps extends UseFormItemProps {
 }
 
 const MyDformInput = LingxiForwardRef<any, MyDformInputProps>((props, ref) => {
-  const { getEngineApis, $$componentItem, ...restProps } = props;
-  const { visible, val, disabled, getRules, onInputChange, required, readOnly } = useFormItem(ref, props);
+  const {
+    getEngineApis,
+    $$componentItem,
+    ...restProps
+  } = props;
+  const { visible, val, disabled, getRules, onInputChange, required, readOnly } =
+    useFormItem(ref, props);
   const { getLocale } = getEngineApis?.() || {};
   return (
     <FormItem>

package/lib/h5public/src/components/factory/src/DformInputNumber/FormInputNumber.tsx

@@ -1,6 +1,6 @@
 import { DformInput, INomarInputProps } from '@lingxiteam/dform';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { DFormWrapper } from '../BasicComponents';
 import { useFormItem } from '../utils/hooks/useFormItem';
 
@@ -40,7 +40,15 @@ const FormInputNumber = LingxiForwardRef<any, FormInputNumberProps>((props: any,
     ...restProps
   } = props;
   const { getLocale } = getEngineApis?.() || {};
-  const { visible, disabled, val, getRules, onInputChange, required, readOnly } = useFormItem(ref, props);
+  const {
+    visible,
+    disabled,
+    val,
+    getRules,
+    onInputChange,
+    required,
+    readOnly,
+  } = useFormItem(ref, props);
   const [digitText, setDigitText] = useState<string>('');
   const [myMaxLength, setMyMaxLength] = useState(10000);
   const [myUnit, setMyUnit] = useState<any>(null);
@@ -98,20 +106,18 @@ const FormInputNumber = LingxiForwardRef<any, FormInputNumberProps>((props: any,
         return value;
       }
 
-      const withComma = (str: string) =>
-        str
-          .split('')
-          .reverse()
-          .join('')
-          .replace(/(\d{1,3})/g, ',$1')
-          .split('')
-          .reverse()
-          .join('')
-          .replace(/,$/, '');
+      const withComma = (str: string) => str.split('').reverse().join('').replace(/(\d{1,3})/g, ',$1')
+        .split('')
+        .reverse()
+        .join('')
+        .replace(/,$/, '');
 
       // 只有小数点前的部分需要千位分隔符
       if (formatting === 'comma' && value.indexOf('.') > -1) {
-        return withComma(value.substring(0, value.indexOf('.'))) + value.substring(value.indexOf('.'));
+        return (
+          withComma(value.substring(0, value.indexOf('.'))) +
+          value.substring(value.indexOf('.'))
+        );
       }
       if (formatting === 'comma') {
         return withComma(`${value}`);
@@ -175,6 +181,7 @@ const FormInputNumber = LingxiForwardRef<any, FormInputNumberProps>((props: any,
     }
   };
 
+
   const renderFooter = () => {
     const fatherStyle: any = {
       display: 'flex',
@@ -207,6 +214,7 @@ const FormInputNumber = LingxiForwardRef<any, FormInputNumberProps>((props: any,
     return targetProps;
   }, [formatting]);
 
+
   useEffect(() => {
     const style: any = {
       display: 'flex',
@@ -214,12 +222,7 @@ const FormInputNumber = LingxiForwardRef<any, FormInputNumberProps>((props: any,
       flexShrink: 0,
     };
     if (formatting === 'percent') {
-      setMyUnit(
-        <div style={style}>
-          <span>%</span>
-          <span style={addonAfter ? { marginLeft: '8px' } : {}}>{addonAfter}</span>
-        </div>
-      );
+      setMyUnit(<div style={style}><span>%</span><span style={addonAfter ? { marginLeft: '8px' } : {}}>{addonAfter}</span></div>);
     } else {
       if (addonAfter) {
         style.marginLeft = '8px';

package/lib/h5public/src/components/factory/src/DformInputNumber/index.tsx

@@ -1,12 +1,12 @@
 import { Form } from '@lingxiteam/dform';
-import { LingxiForwardRef } from '@lingxiteam/types';
-import React from 'react';
-import { FormItem } from '../BasicComponents';
-import { DFormContext } from '../utils/form';
 import { withTransformProps } from '../utils/withTransformProps';
 import type { FormInputNumberProps } from './FormInputNumber';
 import FormInputNumber from './FormInputNumber';
 import transformProps from './transformProps';
+import { FormItem } from '../BasicComponents';
+import { DFormContext } from '../utils/form';
+import React from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
 
 export type MyDformInputProps = FormInputNumberProps;
 

package/lib/h5public/src/components/factory/src/DformList/FormItem/index.tsx

@@ -1,11 +1,12 @@
-import { Form } from '@lingxiteam/dform';
-import { EngineBaseProps } from '@lingxiteam/types';
-import { isEqual } from 'lodash';
+import React, { FC, useEffect, useRef } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
-import type { ValidatorRule } from 'rc-field-form/es/interface';
+import { Form } from '@lingxiteam/dform';
 import type { ListField } from 'rc-field-form/es/List';
-import React, { FC, useEffect, useRef } from 'react';
+import type { ValidatorRule } from 'rc-field-form/es/interface';
+import { EngineBaseProps } from '@lingxiteam/types';
 import { DFormContext } from '../../utils/form';
+import { isEqual } from 'lodash';
+
 
 const { List, Field } = Form;
 interface FormItemProps {
@@ -57,6 +58,7 @@ interface FormItemProps {
    * 是否显示
    */
   visible?: boolean;
+
 }
 
 interface FormListProps {
@@ -100,7 +102,7 @@ interface FormListProps {
   [key: string]: any;
 }
 
-const FormList: FC<FormListProps> = props => {
+const FormList: FC<FormListProps> = (props) => {
   const {
     getEngineApis,
     index,
@@ -139,7 +141,7 @@ const FormList: FC<FormListProps> = props => {
 
   const replaceComponents = (item: ListField, i: number, field: ListField) => {
     const recursive = (schemas: Record<string, any>[] = []) => {
-      return schemas.map(schema => {
+      return schemas.map((schema) => {
         const { components = [], props: schemaProps, isAppChildForm = false } = schema;
         schema.components = recursive(components);
         if (isAppChildForm) {
@@ -238,7 +240,7 @@ const FormItem: FC<FormItemProps> = ({
               disabled={disabled}
               uniqueField={uniqueField}
               compId={compId}
-              onHandleChange={v => {
+              onHandleChange={(v) => {
                 if (onChange) {
                   onChange(v);
                 }