@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/{es/form/BaseForm → lib/form/layouts/LightFilter}/LightWrapper/index.d.ts

@@ -1,7 +1,7 @@
 import type { SizeType as AntdSizeType } from 'antd/lib/config-provider/SizeContext';
 import type { TooltipPlacement } from 'antd/lib/tooltip';
 import React from 'react';
-import type { LightFilterFooterRender } from '../../typing';
+import type { LightFilterFooterRender } from '../../../typing';
 export type SizeType = AntdSizeType;
 export type LightWrapperProps = {
     label?: React.ReactNode;

package/lib/form/{BaseForm → layouts/LightFilter}/LightWrapper/index.js

@@ -8,7 +8,7 @@ exports.LightWrapper = void 0;
 var _antd = require("antd");
 var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
-var _utils = require("../../../utils");
+var _utils = require("../../../../utils");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
 const LightWrapper = props => {
@@ -39,20 +39,28 @@ const LightWrapper = props => {
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(prefixCls);
-  const [tempValue, setTempValue] = (0, _react.useState)(props[valuePropName]);
+  const labelValue = props[valuePropName];
+  const [tempValue, setTempValue] = (0, _react.useState)(labelValue);
   const [open, setOpen] = (0, _react.useState)(false);
-  const onChange = (...restParams) => {
+
+  // Form 的 initialValues 是异步注入的，初次渲染时 value 可能还是 undefined，
+  // 当 Popover 关闭时同步外部最新值，避免影响编辑中的临时状态
+  (0, _react.useEffect)(() => {
+    if (!open) {
+      setTempValue(labelValue);
+    }
+  }, [labelValue, open]);
+  const onChange = (0, _utils.useRefFunction)((...restParams) => {
     otherFieldProps?.onChange?.(...restParams);
     propsOnChange?.(...restParams);
-  };
-  const labelValue = props[valuePropName];
+  });
 
   /** DateRange的转化，dayjs 的 toString 有点不好用 */
   const labelValueText = (0, _react.useMemo)(() => {
     if (!labelValue) return labelValue;
     const lowerValueType = valueType?.toLowerCase?.();
     if (lowerValueType?.endsWith('range') && lowerValueType !== 'digitrange' && !labelFormatter) {
-      return (0, _utils.dateArrayFormatter)(labelValue, valueType && _utils.dateFormatterMap[valueType] || 'YYYY-MM-DD');
+      return (0, _utils.dateArrayFormatter)(labelValue, (0, _utils.getLightFilterRangeDisplayFormat)(valueType));
     }
     if (Array.isArray(labelValue)) return labelValue.map(item => {
       if (typeof item === 'object' && item.label && item.value) {
@@ -95,20 +103,30 @@ const LightWrapper = props => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _clsx.clsx)(`${prefixCls}-container`, hashId, className),
       style: style,
-      children: /*#__PURE__*/_react.default.cloneElement(children, {
-        ...rest,
-        [valuePropName]: tempValue,
-        onChange: e => {
-          setTempValue(e?.target ? e.target.value : e);
-        },
-        ...children.props,
-        // light 模式下由外层 FilterDropdown 统一描边，内层 Select/TreeSelect/DatePicker 等统一使用 borderless，各 Field 组件无需再根据 light 判断
-        variant: 'borderless',
-        fieldProps: {
-          ...children.props?.fieldProps,
-          variant: 'borderless'
-        }
-      })
+      children: (() => {
+        const childElement = children;
+        const childProps = childElement.props;
+        const mergedFieldProps = {
+          ...childProps?.fieldProps,
+          variant: 'borderless',
+          onChange: (...args) => {
+            const e = args[0];
+            setTempValue(e?.target ? e.target.value : e);
+            childProps?.fieldProps?.onChange?.(...args);
+          }
+        };
+        return /*#__PURE__*/_react.default.cloneElement(childElement, {
+          ...rest,
+          ...childProps,
+          [valuePropName]: tempValue,
+          onChange: e => {
+            setTempValue(e?.target ? e.target.value : e);
+            childProps?.onChange?.(e);
+          },
+          variant: 'borderless',
+          fieldProps: mergedFieldProps
+        });
+      })()
     })
   }));
 };

package/lib/form/{BaseForm → layouts/LightFilter}/LightWrapper/style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ProAliasToken } from '../../../provider';
+import type { ProAliasToken } from '../../../../provider';
 export interface ProToken extends ProAliasToken {
     componentCls: string;
 }

package/lib/form/{BaseForm → layouts/LightFilter}/LightWrapper/style.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _provider = require("../../../provider");
+var _provider = require("../../../../provider");
 const genProStyle = token => {
   return {
     [`${token.componentCls}-collapse-label`]: {

package/lib/form/layouts/LightFilter/index.d.ts

@@ -3,45 +3,19 @@ import type { TooltipPlacement } from 'antd/lib/tooltip';
 import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 import type { LightFilterFooterRender } from '../../typing';
-export type LightFilterProps<T, U = Record<string, any>> = {
+import { lightFilterFieldComponents } from './lightFilterFieldComponents';
+export type LightFilterLayoutProps<T, U = Record<string, any>> = {
     collapse?: boolean;
-    /**
-     * @name 收起的label dom
-     *
-     * @example collapseLabel={"收起"}
-     */
     collapseLabel?: React.ReactNode;
-    /**
-     * @name 组件样式变体
-     */
     variant?: 'outlined' | 'filled' | 'borderless';
-    /**
-     * @name 忽略rules，一般而言 LightFilter 应该不支持rules，默认是 false。
-     */
     ignoreRules?: boolean;
-    /**
-     * @name 自定义 footerRender
-     *
-     * @example 自定义清除
-     * footerRender={(onConfirm,onClear)=>{  return <a onClick={onClear}>清除</a> })}
-     */
     footerRender?: LightFilterFooterRender;
-    /**
-     * @name 支持配置弹出的位置
-     * @default bottomLeft
-     */
     placement?: TooltipPlacement;
-    /**
-     * @name 透传给内部 Popover 的属性（折叠态弹层）
-     *
-     * @description
-     * LightFilter 在折叠态会使用 Popover 将筛选项渲染到 body 下；
-     * 可通过该属性为弹层根节点添加自定义类名（如 classNames.root）以便做样式覆盖。
-     *
-     * @example
-     * popoverProps={{ classNames: { root: 'my-lightfilter-popover' } } }
-     */
     popoverProps?: Omit<PopoverProps, 'children' | 'content' | 'trigger' | 'open' | 'onOpenChange' | 'placement'>;
 } & Omit<FormProps<T>, 'onFinish'> & CommonFormProps<T, U>;
-declare function LightFilter<T = Record<string, any>>(props: LightFilterProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function LightFilterComponent<T = Record<string, any>>(props: LightFilterLayoutProps<T>): React.JSX.Element;
+type LightFilterType = typeof LightFilterComponent & typeof lightFilterFieldComponents;
+declare const LightFilter: LightFilterType;
 export { LightFilter };
+export default LightFilter;
+export type { LightFilterLayoutProps as LightFilterProps };

package/lib/form/layouts/LightFilter/index.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LightFilter = LightFilter;
+exports.default = exports.LightFilter = void 0;
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
@@ -13,13 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
 var _BaseForm = require("../../BaseForm");
+var _lightFilterFieldComponents = require("./lightFilterFieldComponents");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 单行的查询表单，一般用于配合 table 或者 list使用 有时也会用于 card 的额外区域
- *
- * @param props
- */
 const LightFilterContainer = props => {
   const {
     items,
@@ -77,7 +73,7 @@ const LightFilterContainer = props => {
       collapseItems: collapseItemsArr,
       outsideItems: outsideItemsArr
     };
-  }, [props.items]);
+  }, [props.items, collapse]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _clsx.clsx)(lightFilterClassName, hashId, `${lightFilterClassName}-${size}`, {
       [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => Array.isArray(values[key]) ? values[key].length > 0 : values[key])
@@ -103,10 +99,8 @@ const LightFilterContainer = props => {
               placement: newPlacement,
               variant: 'borderless'
             },
-            // proFieldProps 会直接作为 ProField 的 props 传递过去
             proFieldProps: {
               ...child.props.proFieldProps,
-              light: true,
               label: child.props.label,
               variant
             },
@@ -161,7 +155,7 @@ const LightFilterContainer = props => {
                 return false;
               }
             };
-            if (moreValues.hasOwnProperty(name)) {
+            if (Object.prototype.hasOwnProperty.call(moreValues, name)) {
               newFieldProps[child.props.valuePropName || 'value'] = moreValues[name];
             }
             const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
@@ -181,7 +175,7 @@ const LightFilterContainer = props => {
     })
   }));
 };
-function LightFilter(props) {
+function LightFilterComponent(props) {
   const {
     size,
     collapse,
@@ -192,7 +186,6 @@ function LightFilter(props) {
     placement,
     formRef: userFormRef,
     variant,
-    ignoreRules,
     footerRender,
     popoverProps,
     ...reset
@@ -207,9 +200,14 @@ function LightFilter(props) {
     };
   });
   const formRef = (0, _react.useRef)();
-  (0, _react.useImperativeHandle)(userFormRef, () => formRef.current, [formRef.current]);
+
+  // deps 必须是 []：formRef.current 是 mutable value，变化不触发 React 更新，
+  // 放入 deps 无意义，且会导致每次渲染都重新执行。
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useImperativeHandle)(userFormRef, () => formRef.current, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseForm.BaseForm, {
     size: size,
+    formComponentType: "LightFilter",
     initialValues: initialValues,
     form: userForm,
     contentRender: items => {
@@ -217,7 +215,6 @@ function LightFilter(props) {
         prefixCls: prefixCls,
         items: items?.flatMap(item => {
           if (!item || !item?.type) return item;
-          /** 如果是 ProFormGroup，直接拼接dom */
           if (item?.type?.displayName === 'ProForm-Group') return item.props.children;
           return item;
         }),
@@ -260,4 +257,8 @@ function LightFilter(props) {
       formRef.current?.submit();
     }
   });
-}
+}
+const LightFilter = exports.LightFilter = LightFilterComponent;
+Object.assign(LightFilter, _lightFilterFieldComponents.lightFilterFieldComponents);
+LightFilter.displayName = 'LightFilter';
+var _default = exports.default = LightFilter;

package/lib/form/layouts/LightFilter/lightFilterFieldComponents.d.ts

@@ -0,0 +1,104 @@
+import React from 'react';
+/** 挂在 `LightFilter` 上的轻量字段（`LightFilter.input` 等） */
+export declare const lightFilterFieldComponents: {
+    readonly input: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly password: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly text: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly textArea: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly select: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly searchSelect: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly treeSelect: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly cascader: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly digit: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly digitRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly slider: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly date: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly dateTime: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly time: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly timeRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly dateRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly dateTimeRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly weekRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly monthRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly quarterRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly yearRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly timePickerRange: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly checkboxGroup: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly fieldSet: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+    readonly switch: {
+        (props: Record<string, any>): React.JSX.Element;
+        displayName: string;
+    };
+};

package/lib/form/layouts/LightFilter/lightFilterFieldComponents.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lightFilterFieldComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Cascader = _interopRequireDefault(require("../../components/Cascader"));
+var _Checkbox = _interopRequireDefault(require("../../components/Checkbox"));
+var _DatePicker = _interopRequireDefault(require("../../components/DatePicker"));
+var _DateTimePicker = _interopRequireDefault(require("../../components/DatePicker/DateTimePicker"));
+var _TimePicker = _interopRequireDefault(require("../../components/DatePicker/TimePicker"));
+var _DateRangePicker = _interopRequireDefault(require("../../components/DateRangePicker"));
+var _DateMonthRangePicker = require("../../components/DateRangePicker/DateMonthRangePicker");
+var _DateQuarterRangePicker = require("../../components/DateRangePicker/DateQuarterRangePicker");
+var _DateTimeRangePicker = require("../../components/DateRangePicker/DateTimeRangePicker");
+var _DateWeekRangePicker = require("../../components/DateRangePicker/DateWeekRangePicker");
+var _DateYearRangePicker = require("../../components/DateRangePicker/DateYearRangePicker");
+var _TimeRangePicker = require("../../components/DateRangePicker/TimeRangePicker");
+var _Digit = _interopRequireDefault(require("../../components/Digit"));
+var _DigitRange = _interopRequireDefault(require("../../components/Digit/DigitRange"));
+var _FieldSet = _interopRequireDefault(require("../../components/FieldSet"));
+var _Select = _interopRequireDefault(require("../../components/Select"));
+var _Slider = _interopRequireDefault(require("../../components/Slider"));
+var _Switch = _interopRequireDefault(require("../../components/Switch"));
+var _Text = _interopRequireDefault(require("../../components/Text"));
+var _TextArea = _interopRequireDefault(require("../../components/TextArea"));
+var _TreeSelect = _interopRequireDefault(require("../../components/TreeSelect"));
+var _jsxRuntime = require("react/jsx-runtime");
+const createLightFilterField = Field => {
+  const FieldWrapper = props => {
+    const {
+      proFieldProps,
+      ...rest
+    } = props;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Field, {
+      ...rest,
+      proFieldProps: {
+        light: true,
+        ...proFieldProps
+      }
+    });
+  };
+  FieldWrapper.displayName = 'LightFilterField';
+  return FieldWrapper;
+};
+
+/** 挂在 `LightFilter` 上的轻量字段（`LightFilter.input` 等） */
+const lightFilterFieldComponents = exports.lightFilterFieldComponents = {
+  input: createLightFilterField(_Text.default),
+  password: createLightFilterField(_Text.default.Password),
+  text: createLightFilterField(_Text.default),
+  textArea: createLightFilterField(_TextArea.default),
+  select: createLightFilterField(_Select.default),
+  searchSelect: createLightFilterField(_Select.default.SearchSelect),
+  treeSelect: createLightFilterField(_TreeSelect.default),
+  cascader: createLightFilterField(_Cascader.default),
+  digit: createLightFilterField(_Digit.default),
+  digitRange: createLightFilterField(_DigitRange.default),
+  slider: createLightFilterField(_Slider.default),
+  date: createLightFilterField(_DatePicker.default),
+  dateTime: createLightFilterField(_DateTimePicker.default),
+  time: createLightFilterField(_TimePicker.default),
+  timeRange: createLightFilterField(_TimeRangePicker.ProFormTimeRangePicker),
+  dateRange: createLightFilterField(_DateRangePicker.default),
+  dateTimeRange: createLightFilterField(_DateTimeRangePicker.ProFormDateTimeRangePicker),
+  weekRange: createLightFilterField(_DateWeekRangePicker.ProFormDateWeekRangePicker),
+  monthRange: createLightFilterField(_DateMonthRangePicker.ProFormDateMonthRangePicker),
+  quarterRange: createLightFilterField(_DateQuarterRangePicker.ProFormDateQuarterRangePicker),
+  yearRange: createLightFilterField(_DateYearRangePicker.ProFormDateYearRangePicker),
+  timePickerRange: createLightFilterField(_TimePicker.default.RangePicker),
+  checkboxGroup: createLightFilterField(_Checkbox.default.Group),
+  fieldSet: createLightFilterField(_FieldSet.default),
+  switch: createLightFilterField(_Switch.default)
+};

package/lib/form/layouts/LightFilter/style.js

@@ -10,7 +10,6 @@ const genLightFilterStyle = token => {
     [token.componentCls]: {
       boxSizing: 'border-box',
       lineHeight: '30px',
-      // @see https://yuque.antfin-inc.com/tech-ui/topics/523
       '&::before': {
         display: 'block',
         height: 0,
@@ -56,10 +55,10 @@ const genLightFilterStyle = token => {
 };
 function useStyle(prefixCls) {
   return (0, _provider.useStyle)('LightFilter', token => {
-    const proCardToken = {
+    const layoutToken = {
       ...token,
       componentCls: `.${prefixCls}`
     };
-    return [genLightFilterStyle(proCardToken)];
+    return [genLightFilterStyle(layoutToken)];
   });
 }

package/lib/form/layouts/LoginForm/index.js

@@ -8,6 +8,7 @@ exports.LoginForm = LoginForm;
 var _antd = require("antd");
 var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
+var _LoginFormHeader = require("../_shared/LoginFormHeader");
 var _provider = require("../../../provider");
 var _ProForm = require("../ProForm");
 var _style = require("./style");
@@ -53,36 +54,15 @@ function LoginForm(props) {
     hashId
   } = (0, _style.useStyle)(baseClassName);
   const getCls = className => `${baseClassName}-${className}`;
-
-  /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
-  const logoDom = (0, _react.useMemo)(() => {
-    if (!logo) return null;
-    if (typeof logo === 'string') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: logo,
-        alt: ""
-      });
-    }
-    return logo;
-  }, [logo]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _clsx.clsx)(getCls('container'), hashId),
     style: containerStyle,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _clsx.clsx)(getCls('top'), hashId),
-      children: [title || logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _clsx.clsx)(getCls('header'), hashId),
-        children: [logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: (0, _clsx.clsx)(getCls('logo'), hashId),
-          children: logoDom
-        }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: (0, _clsx.clsx)(getCls('title'), hashId),
-          children: title
-        }) : null]
-      }) : null, subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _clsx.clsx)(getCls('desc'), hashId),
-        children: subTitle
-      }) : null]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LoginFormHeader.LoginFormHeader, {
+      logo: logo,
+      title: title,
+      subTitle: subTitle,
+      prefixCls: baseClassName,
+      hashId: hashId
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _clsx.clsx)(getCls('main'), hashId),
       style: {

package/lib/form/layouts/LoginFormPage/index.js

@@ -10,6 +10,7 @@ var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _ProForm = require("../ProForm");
+var _LoginFormHeader = require("../_shared/LoginFormHeader");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
 function LoginFormPage(props) {
@@ -56,18 +57,6 @@ function LoginFormPage(props) {
     hashId
   } = (0, _style.useStyle)(baseClassName);
   const getCls = className => `${baseClassName}-${className}`;
-
-  /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
-  const logoDom = (0, _react.useMemo)(() => {
-    if (!logo) return null;
-    if (typeof logo === 'string') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: logo,
-        alt: ""
-      });
-    }
-    return logo;
-  }, [logo]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _clsx.clsx)(baseClassName, hashId),
     style: {
@@ -123,21 +112,12 @@ function LoginFormPage(props) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _clsx.clsx)(getCls('container'), hashId),
           style: containerStyle,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _clsx.clsx)(getCls('top'), hashId),
-            children: [title || logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: (0, _clsx.clsx)(getCls('header'), hashId),
-              children: [logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: (0, _clsx.clsx)(getCls('logo'), hashId),
-                children: logoDom
-              }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: (0, _clsx.clsx)(getCls('title'), hashId),
-                children: title
-              }) : null]
-            }) : null, subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _clsx.clsx)(getCls('desc'), hashId),
-              children: subTitle
-            }) : null]
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LoginFormHeader.LoginFormHeader, {
+            logo: logo,
+            title: title,
+            subTitle: subTitle,
+            prefixCls: baseClassName,
+            hashId: hashId
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: (0, _clsx.clsx)(getCls('main'), hashId),
             style: mainStyle,

package/lib/form/layouts/ModalForm/index.d.ts

@@ -29,5 +29,5 @@ export type ModalFormProps<T = Record<string, any>, U = Record<string, any>> = O
     /** @name 弹框的宽度 */
     width?: ModalProps['width'];
 };
-declare function ModalForm<T = Record<string, any>, U = Record<string, any>>({ children, trigger, onOpenChange, modalProps, onFinish, submitTimeout, title, width, open: propsOpen, ...rest }: ModalFormProps<T, U>): import("react/jsx-runtime").JSX.Element;
+declare function ModalForm<T = Record<string, any>, U = Record<string, any>>({ children, trigger, onOpenChange, modalProps, onFinish, submitTimeout, title, width, open: propsOpen, ...rest }: ModalFormProps<T, U>): React.JSX.Element;
 export { ModalForm };