@ant-design/pro-components 3.1.4-0 → 3.1.6-0

package/es/field/components/Text/index.js

@@ -7,7 +7,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * 最基本的组件，就是个普通的 Input
  *
- * @param
+ * @param text
+ * @param mode
+ * @param render
+ * @param formItemRender
+ * @param fieldProps
+ * @param emptyText
+ * @param ref
  */
 const FieldText = ({
   text,

package/es/field/components/TextArea/index.js

@@ -7,7 +7,8 @@ import FieldTextAreaReadonly from "./readonly";
 /**
  * 最基本的组件，就是个普通的 Input.TextArea
  *
- * @param
+ * @param props
+ * @param ref
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const FieldTextArea = (props, ref) => {
@@ -36,8 +37,10 @@ const FieldTextArea = (props, ref) => {
     const dom = /*#__PURE__*/_jsx(Input.TextArea, {
       ref: ref,
       rows: 3,
-      onKeyPress: e => {
-        if (e.key === 'Enter') e.stopPropagation();
+      onKeyDown: e => {
+        if (e.key === 'Enter') {
+          e.stopPropagation();
+        }
       },
       placeholder: intl.getMessage('tableForm.inputPlaceholder', '请输入'),
       ...fieldProps

package/es/field/components/TimePicker/index.js

@@ -99,7 +99,16 @@ const FieldTimePicker = ({
 /**
  * 时间区间选择
  *
- * @param param0
+ * @param text
+ * @param light
+ * @param label
+ * @param mode
+ * @param lightLabel
+ * @param format
+ * @param render
+ * @param formItemRender
+ * @param fieldProps
+ * @param variant
  * @param ref
  */
 const FieldTimeRangePickerComponents = ({

package/es/field/components/TreeSelect/index.d.ts

@@ -1,12 +1,6 @@
-import type { RadioGroupProps, TreeSelectProps } from 'antd';
+import type { TreeSelectProps } from 'antd';
 import React from 'react';
-import type { FieldSelectProps } from '../Select';
-export type GroupProps = {
-    options?: RadioGroupProps['options'];
-    radioType?: 'button' | 'radio';
-    variant?: 'outlined' | 'borderless' | 'filled';
-} & FieldSelectProps;
-export type TreeSelectFieldProps = TreeSelectProps<any> & {
+export type TreeSelectFieldProps = TreeSelectProps & {
     /**
      * 当搜索关键词发生变化时是否请求远程数据
      *
@@ -15,10 +9,6 @@ export type TreeSelectFieldProps = TreeSelectProps<any> & {
     fetchDataOnSearch?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
-    options?: (string | number | import("antd").CheckboxOptionType<any>)[] | undefined;
-    radioType?: "button" | "radio" | undefined;
-    variant?: "outlined" | "filled" | "borderless" | undefined;
-} & {
     text: string;
     valueEnum?: import("src/utils/typing").ProFieldValueEnumType | undefined;
     debounceTime?: number | undefined;

package/es/field/components/TreeSelect/index.js

@@ -1,4 +1,4 @@
-import { useControlledState } from '@rc-component/util';
+import { omit, useControlledState } from '@rc-component/util';
 import { ConfigProvider, Spin, TreeSelect } from 'antd';
 import { clsx } from 'clsx';
 import React, { useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -11,10 +11,17 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Tree select
  * A function that returns a React component.
+
+ * @param formItemRender
+ * @param mode
+ * @param light
+ * @param label
+ * @param render
+ * @param propsVariant
+ * @param rest
  * @param ref
  */
 const FieldTreeSelect = ({
-  radioType,
   formItemRender,
   mode,
   light,
@@ -30,17 +37,22 @@ const FieldTreeSelect = ({
   const treeSelectRef = useRef(null);
   const [open, setOpen] = useState(false);
   const {
-    onSearch,
     onClear,
     onChange: propsOnChange,
     onBlur,
     showSearch,
-    autoClearSearchValue,
-    treeData,
     fetchDataOnSearch,
-    searchValue: propsSearchValue,
+    onSearch: propsOnSearch,
+    autoClearSearchValue: propsAutoClearSearchValue,
+    searchValue: propsSearchValueProp,
     ...fieldProps
-  } = rest.fieldProps;
+  } = omit(rest.fieldProps, ['treeData']);
+  const showSearchConfig = typeof showSearch === 'object' ? showSearch : {};
+  const onSearch = showSearchConfig?.onSearch !== undefined ? showSearchConfig.onSearch : propsOnSearch;
+  //兼容过时API autoClearSearchValue
+  const autoClearSearchValue = showSearchConfig?.autoClearSearchValue !== undefined ? showSearchConfig.autoClearSearchValue : propsAutoClearSearchValue;
+  //兼容过时API searchValue
+  const propsSearchValue = showSearchConfig?.searchValue !== undefined ? showSearchConfig.searchValue : propsSearchValueProp;
   const variant = propsVariant ?? fieldProps?.variant;
   const intl = useIntl();
   const [loading, options, fetchData] = useFieldFetchData({
@@ -134,14 +146,23 @@ const FieldTreeSelect = ({
         } : undefined,
         ...fieldProps,
         treeData: options,
-        showSearch: showSearch,
+        showSearch: showSearch ? {
+          ...showSearchConfig,
+          searchValue: searchValue,
+          autoClearSearchValue: autoClearSearchValue,
+          onSearch: value => {
+            // fix 不支持请求的情况下不刷新options
+            if (fetchDataOnSearch && rest?.request) {
+              fetchData(value);
+            }
+            setSearchValue(value);
+          }
+        } : showSearch,
         style: {
           minWidth: 60,
           ...fieldProps.style
         },
         allowClear: fieldProps.allowClear !== false,
-        searchValue: searchValue,
-        autoClearSearchValue: autoClearSearchValue,
         onClear: () => {
           onClear?.();
           fetchData(undefined);
@@ -150,13 +171,6 @@ const FieldTreeSelect = ({
           }
         },
         onChange: onChange,
-        onSearch: value => {
-          // fix 不支持请求的情况下不刷新options
-          if (fetchDataOnSearch && rest?.request) {
-            fetchData(value);
-          }
-          setSearchValue(value);
-        },
         onBlur: event => {
           setSearchValue(undefined);
           fetchData(undefined);

package/es/form/BaseForm/BaseForm.js

@@ -590,7 +590,7 @@ export function BaseForm(props) {
         children: /*#__PURE__*/_jsx(FormListContext.Provider, {
           value: {},
           children: /*#__PURE__*/_jsx(Form, {
-            onKeyPress: event => {
+            onKeyDown: event => {
               if (!isKeyPressSubmit) return;
               if (event.key === 'Enter') {
                 formRef.current?.submit();
@@ -598,7 +598,7 @@ export function BaseForm(props) {
             },
             autoComplete: "off",
             form: form,
-            ...omit(propRest, ['ref', 'labelWidth', 'autoFocusFirstInput']),
+            ...omit(propRest, ['ref', 'labelWidth', 'autoFocusFirstInput', 'rootClassName']),
             ref: instance => {
               if (!formRef.current) return;
               formRef.current.nativeElement = instance?.nativeElement;
@@ -622,7 +622,8 @@ export function BaseForm(props) {
             onValuesChange: (changedValues, values) => {
               propRest?.onValuesChange?.(transformKey(changedValues, !!omitNil), transformKey(values, !!omitNil));
             },
-            className: clsx(props.className, prefixCls, hashId),
+            className: props.className,
+            rootClassName: clsx(prefixCls, hashId, props.rootClassName),
             onFinish: onFinish,
             children: /*#__PURE__*/_jsx(BaseFormComponents, {
               transformKey: transformKey,

package/es/form/BaseForm/Submitter/index.d.ts

@@ -26,7 +26,7 @@ export type SubmitterProps<T = Record<string, any>> = {
     render?: ((props: SubmitterProps & T & {
         submit: () => void;
         reset: () => void;
-    }, dom: JSX.Element[]) => React.ReactNode[] | React.ReactNode | false) | false;
+    }, dom: React.JSX.Element[]) => React.ReactNode[] | React.ReactNode | false) | false;
 };
 /**
  * FormFooter 的组件，可以自动进行一些配置

package/es/form/components/Digit/DigitRange.js

@@ -4,9 +4,12 @@ import { ProConfigProvider } from "../../../provider";
 import ProFormField from "../Field";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * 数组选择组件
+ * 数字范围输入组件
  *
- * @param
+ * @param fieldProps
+ * @param proFieldProps
+ * @param rest
+ * @param ref
  */
 const ProFormDigit = ({
   fieldProps,

package/es/form/components/Digit/index.js

@@ -4,9 +4,14 @@ import { ProConfigProvider } from "../../../provider";
 import ProFormField from "../Field";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * 数组选择组件
+ * 数字输入组件
  *
- * @param
+ * @param fieldProps
+ * @param min
+ * @param proFieldProps
+ * @param max
+ * @param rest
+ * @param ref
  */
 const ProFormDigit = ({
   fieldProps,

package/es/form/components/FormItem/FormItemRender/index.d.ts

@@ -62,7 +62,7 @@ export declare function pickControlProps(props: FormControlInjectProps): {
     onChange: (value: any) => void;
 };
 /**
- * 提取props中的 value、onChange 和 id 属性
+ * 提取 props 中的 value、onChange、id 及无障碍属性（aria-describedby、aria-invalid、aria-required）
  */
 export declare function pickControlPropsWithId(props: FormControlInjectProps): {
     id: string;

package/es/form/components/FormItem/FormItemRender/index.js

@@ -84,14 +84,22 @@ export function pickControlProps(props) {
     onChange: value => props.onChange(value?.target ? value.target.value : value)
   };
 }
+const ARIA_CONTROL_ATTRS = ['aria-describedby', 'aria-invalid', 'aria-required'];
 
 /**
- * 提取props中的 value、onChange 和 id 属性
+ * 提取 props 中的 value、onChange、id 及无障碍属性（aria-describedby、aria-invalid、aria-required）
  */
 export function pickControlPropsWithId(props) {
+  const ariaAttrs = ARIA_CONTROL_ATTRS.reduce((acc, key) => {
+    if (props[key] !== undefined) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
   return {
     ...pickControlProps(props),
-    id: props.id
+    id: props.id,
+    ...ariaAttrs
   };
 }
 

package/es/form/components/FormItem/Group/index.js

@@ -117,7 +117,7 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
         display: 'none'
       },
       children: hiddenChildren
-    }) : null];
+    }, "hidden") : null];
   }, [children, RowWrapper, Wrapper, autoFocus]);
   return wrapSSR( /*#__PURE__*/_jsx(ColWrapper, {
     children: /*#__PURE__*/_jsxs("div", {
@@ -127,11 +127,19 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
       style: style,
       ref: ref,
       children: [hiddenDoms, (title || tooltip || extra) && /*#__PURE__*/_jsx("div", {
-        className: `${className}-title ${hashId}`.trim(),
+        role: "button",
+        tabIndex: 0,
+        className: clsx(`${className}-title`, hashId),
         style: titleStyle,
         onClick: () => {
           setCollapsed(!collapsed);
         },
+        onKeyDown: e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setCollapsed(!collapsed);
+          }
+        },
         children: extra ? /*#__PURE__*/_jsxs("div", {
           style: {
             display: 'flex',
@@ -140,7 +148,9 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
             justifyContent: 'space-between'
           },
           children: [titleDom, /*#__PURE__*/_jsx("span", {
+            role: "presentation",
             onClick: e => e.stopPropagation(),
+            onKeyDown: e => e.stopPropagation(),
             children: extra
           })]
         }) : titleDom

package/es/form/components/List/ListContainer.js

@@ -1,6 +1,7 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { omit } from '@rc-component/util';
 import { Button } from 'antd';
+import { clsx } from 'clsx';
 import { useContext, useMemo, useRef, useState } from 'react';
 import { ProProvider, useIntl } from "../../../provider";
 import { nanoid, runFunction } from "../../../utils";
@@ -97,7 +98,7 @@ const ProFormListContainer = props => {
       creatorButtonText = intl.getMessage('editableTable.action.add', '添加一行数据')
     } = creatorButtonProps || {};
     return /*#__PURE__*/_jsx(Button, {
-      className: `${prefixCls}-creator-button-${position} ${hashId || ''}`.trim(),
+      className: clsx(`${prefixCls}-creator-button-${position}`, hashId),
       type: "dashed",
       loading: loading,
       block: true,

package/es/form/components/Select/index.js

@@ -8,7 +8,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * 选择框
  *
- * @param
+ * @param fieldProps
+ * @param children
+ * @param params
+ * @param proFieldProps
+ * @param mode
+ * @param valueEnum
+ * @param request
+ * @param showSearch
+ * @param options
+ * @param rest
+ * @param ref
  */
 const ProFormSelectComponents = ({
   fieldProps,

package/es/form/layouts/DrawerForm/index.d.ts

@@ -3,8 +3,8 @@ import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 export type CustomizeResizeType = {
     onResize?: () => void;
-    maxWidth?: DrawerProps['width'];
-    minWidth?: DrawerProps['width'];
+    maxWidth?: DrawerProps['size'];
+    minWidth?: DrawerProps['size'];
 };
 export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> = Omit<FormProps, 'onFinish' | 'title'> & CommonFormProps<T, U> & {
     /**
@@ -22,7 +22,7 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
     /** @name 提交数据时，禁用取消按钮的超时时间（毫秒）。 */
     submitTimeout?: number;
     /** @name 用于触发抽屉打开的 dom ，只能设置一个*/
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** @name 受控的打开关闭 */
     open?: DrawerProps['open'];
     /** @name 打开关闭的事件 */
@@ -32,7 +32,7 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
     /** @name 抽屉的标题 */
     title?: DrawerProps['title'];
     /** @name 抽屉的宽度 */
-    width?: DrawerProps['width'];
+    width?: DrawerProps['size'];
     /**
      *
      * @name draggableDrawer

package/es/form/layouts/DrawerForm/index.js

@@ -51,7 +51,7 @@ function DrawerForm({
     wrapSSR,
     hashId
   } = useStyle(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const getCls = className => `${baseClassName}-${className}`;
   const [, forceUpdate] = useState([]);
   const [loading, setLoading] = useState(false);
   const [resizableDrawer, setResizableDrawer] = useState(false);

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

@@ -2,7 +2,7 @@ import { FilterOutlined } from '@ant-design/icons';
 import { omit } from '@rc-component/util';
 import { ConfigProvider } from 'antd';
 import { clsx } from 'clsx';
-import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useIntl } from "../../../provider";
 import { FieldLabel, FilterDropdown } from "../../../utils";
 import { BaseForm } from "../../BaseForm";
@@ -35,16 +35,22 @@ const LightFilterContainer = props => {
     hashId
   } = useStyle(lightFilterClassName);
   const [open, setOpen] = useState(false);
-  const [moreValues, setMoreValues] = useState(() => {
-    return {
-      ...values
-    };
-  });
-  useEffect(() => {
-    setMoreValues({
-      ...values
+  const [moreValues, setMoreValues] = useState(() => ({
+    ...values
+  }));
+  const collapseLabelNode = useMemo(() => {
+    if (collapseLabel) return collapseLabel;
+    if (collapse) {
+      return /*#__PURE__*/_jsx(FilterOutlined, {
+        className: clsx(`${lightFilterClassName}-collapse-icon`, hashId)
+      });
+    }
+    return /*#__PURE__*/_jsx(FieldLabel, {
+      variant: variant,
+      size: size,
+      label: intl.getMessage('form.lightFilter.more', '更多筛选')
     });
-  }, [values]);
+  }, [collapseLabel, collapse, lightFilterClassName, hashId, variant, size, intl]);
   const {
     collapseItems,
     outsideItems
@@ -66,27 +72,12 @@ const LightFilterContainer = props => {
       outsideItems: outsideItemsArr
     };
   }, [props.items]);
-  const renderCollapseLabelRender = () => {
-    if (collapseLabel) {
-      return collapseLabel;
-    }
-    if (collapse) {
-      return /*#__PURE__*/_jsx(FilterOutlined, {
-        className: `${lightFilterClassName}-collapse-icon ${hashId}`.trim()
-      });
-    }
-    return /*#__PURE__*/_jsx(FieldLabel, {
-      variant: variant,
-      size: size,
-      label: intl.getMessage('form.lightFilter.more', '更多筛选')
-    });
-  };
   return wrapSSR( /*#__PURE__*/_jsx("div", {
     className: clsx(lightFilterClassName, hashId, `${lightFilterClassName}-${size}`, {
       [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => Array.isArray(values[key]) ? values[key].length > 0 : values[key])
     }),
     children: /*#__PURE__*/_jsxs("div", {
-      className: `${lightFilterClassName}-container ${hashId}`.trim(),
+      className: clsx(`${lightFilterClassName}-container`, hashId),
       children: [outsideItems.map((child, index) => {
         if (!child?.props) {
           return child;
@@ -99,7 +90,7 @@ const LightFilterContainer = props => {
         } = child?.props || {};
         const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
         return /*#__PURE__*/_jsx("div", {
-          className: `${lightFilterClassName}-item ${hashId}`.trim(),
+          className: clsx(`${lightFilterClassName}-item`, hashId),
           children: /*#__PURE__*/React.cloneElement(child, {
             fieldProps: {
               ...child.props.fieldProps,
@@ -117,7 +108,7 @@ const LightFilterContainer = props => {
           })
         }, key || index);
       }), collapseItems.length ? /*#__PURE__*/_jsx("div", {
-        className: `${lightFilterClassName}-item ${hashId}`.trim(),
+        className: clsx(`${lightFilterClassName}-item`, hashId),
         children: /*#__PURE__*/_jsx(FilterDropdown, {
           padding: 24,
           open: open,
@@ -126,7 +117,7 @@ const LightFilterContainer = props => {
           },
           placement: placement,
           popoverProps: popoverProps,
-          label: renderCollapseLabelRender(),
+          label: collapseLabelNode,
           footerRender: footerRender,
           footer: {
             onConfirm: () => {
@@ -169,7 +160,7 @@ const LightFilterContainer = props => {
             }
             const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
             return /*#__PURE__*/_jsx("div", {
-              className: `${lightFilterClassName}-line ${hashId}`.trim(),
+              className: clsx(`${lightFilterClassName}-line`, hashId),
               children: /*#__PURE__*/React.cloneElement(child, {
                 fieldProps: {
                   ...newFieldProps,
@@ -244,7 +235,7 @@ function LightFilter(props) {
             onValuesChange(newValues, newAllValues);
           }
         }
-      });
+      }, JSON.stringify(values || {}));
     },
     formRef: formRef,
     formItemProps: {

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

@@ -46,14 +46,15 @@ function LoginForm(props) {
     wrapSSR,
     hashId
   } = useStyle(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const getCls = className => `${baseClassName}-${className}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
   const logoDom = useMemo(() => {
     if (!logo) return null;
     if (typeof logo === 'string') {
       return /*#__PURE__*/_jsx("img", {
-        src: logo
+        src: logo,
+        alt: ""
       });
     }
     return logo;
@@ -62,22 +63,22 @@ function LoginForm(props) {
     className: clsx(getCls('container'), hashId),
     style: containerStyle,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: `${getCls('top')} ${hashId}`.trim(),
+      className: clsx(getCls('top'), hashId),
       children: [title || logoDom ? /*#__PURE__*/_jsxs("div", {
-        className: `${getCls('header')}`,
+        className: clsx(getCls('header'), hashId),
         children: [logoDom ? /*#__PURE__*/_jsx("span", {
-          className: getCls('logo'),
+          className: clsx(getCls('logo'), hashId),
           children: logoDom
         }) : null, title ? /*#__PURE__*/_jsx("span", {
-          className: getCls('title'),
+          className: clsx(getCls('title'), hashId),
           children: title
         }) : null]
       }) : null, subTitle ? /*#__PURE__*/_jsx("div", {
-        className: getCls('desc'),
+        className: clsx(getCls('desc'), hashId),
         children: subTitle
       }) : null]
     }), /*#__PURE__*/_jsxs("div", {
-      className: getCls('main'),
+      className: clsx(getCls('main'), hashId),
       style: {
         width: 328,
         ...contentStyle
@@ -88,7 +89,7 @@ function LoginForm(props) {
         submitter: submitter,
         children: [message, children]
       }), actions ? /*#__PURE__*/_jsx("div", {
-        className: getCls('main-other'),
+        className: clsx(getCls('main-other'), hashId),
         style: otherStyle,
         children: actions
       }) : null]

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

@@ -49,14 +49,15 @@ export function LoginFormPage(props) {
     wrapSSR,
     hashId
   } = useStyle(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`.trim();
+  const getCls = className => `${baseClassName}-${className}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
   const logoDom = useMemo(() => {
     if (!logo) return null;
     if (typeof logo === 'string') {
       return /*#__PURE__*/_jsx("img", {
-        src: logo
+        src: logo,
+        alt: ""
       });
     }
     return logo;
@@ -96,43 +97,43 @@ export function LoginFormPage(props) {
     }) : null, /*#__PURE__*/_jsxs("div", {
       className: clsx(baseClassName, hashId),
       children: [/*#__PURE__*/_jsx("div", {
-        className: getCls('notice'),
+        className: clsx(getCls('notice'), hashId),
         children: activityConfig && /*#__PURE__*/_jsxs("div", {
-          className: getCls('notice-activity'),
+          className: clsx(getCls('notice-activity'), hashId),
           style: activityConfig.style,
           children: [activityConfig.title && /*#__PURE__*/_jsx("div", {
-            className: getCls('notice-activity-title'),
+            className: clsx(getCls('notice-activity-title'), hashId),
             children: activityConfig.title
           }), activityConfig.subTitle && /*#__PURE__*/_jsx("div", {
-            className: getCls('notice-activity-subTitle'),
+            className: clsx(getCls('notice-activity-subTitle'), hashId),
             children: activityConfig.subTitle
           }), activityConfig.action && /*#__PURE__*/_jsx("div", {
-            className: getCls('notice-activity-action'),
+            className: clsx(getCls('notice-activity-action'), hashId),
             children: activityConfig.action
           })]
         })
       }), /*#__PURE__*/_jsx("div", {
-        className: getCls('left'),
+        className: clsx(getCls('left'), hashId),
         children: /*#__PURE__*/_jsxs("div", {
-          className: getCls('container'),
+          className: clsx(getCls('container'), hashId),
           style: containerStyle,
           children: [/*#__PURE__*/_jsxs("div", {
-            className: getCls('top'),
+            className: clsx(getCls('top'), hashId),
             children: [title || logoDom ? /*#__PURE__*/_jsxs("div", {
-              className: getCls('header'),
+              className: clsx(getCls('header'), hashId),
               children: [logoDom ? /*#__PURE__*/_jsx("span", {
-                className: getCls('logo'),
+                className: clsx(getCls('logo'), hashId),
                 children: logoDom
               }) : null, title ? /*#__PURE__*/_jsx("span", {
-                className: getCls('title'),
+                className: clsx(getCls('title'), hashId),
                 children: title
               }) : null]
             }) : null, subTitle ? /*#__PURE__*/_jsx("div", {
-              className: getCls('desc'),
+              className: clsx(getCls('desc'), hashId),
               children: subTitle
             }) : null]
           }), /*#__PURE__*/_jsxs("div", {
-            className: getCls('main'),
+            className: clsx(getCls('main'), hashId),
             style: mainStyle,
             children: [/*#__PURE__*/_jsxs(ProForm, {
               isKeyPressSubmit: true,
@@ -140,7 +141,7 @@ export function LoginFormPage(props) {
               submitter: submitter,
               children: [message, children]
             }), actions ? /*#__PURE__*/_jsx("div", {
-              className: getCls('other'),
+              className: clsx(getCls('other'), hashId),
               style: otherStyle,
               children: actions
             }) : null]