@ant-design/pro-components 3.1.2-0 → 3.1.3-1

package/lib/field/components/Progress/index.js

@@ -33,7 +33,6 @@ const FieldProgress = ({
   text,
   mode,
   render,
-  plain,
   formItemRender,
   fieldProps,
   placeholder
@@ -50,7 +49,7 @@ const FieldProgress = ({
         maxWidth: 320
       },
       percent: realValue,
-      steps: plain ? 10 : undefined,
+      steps: fieldProps?.steps,
       status: getProgressStatus(realValue),
       ...fieldProps
     });

package/lib/field/components/RangePicker/index.js

@@ -26,10 +26,9 @@ const FieldRangePicker = ({
   render,
   picker,
   formItemRender,
-  plain,
   showTime,
   lightLabel,
-  variant,
+  variant: propsVariant,
   fieldProps
 }, ref) => {
   const intl = (0, _provider.useIntl)();
@@ -94,14 +93,8 @@ const FieldRangePicker = ({
           picker: picker,
           showTime: showTime,
           format: format,
-          variant: "borderless",
           ...fieldProps,
-          placeholder: fieldProps.placeholder ?? [intl.getMessage('tableForm.selectPlaceholder', '请选择'), intl.getMessage('tableForm.selectPlaceholder', '请选择')]
-          // onClear={() => {
-          //   setOpen(false);
-          //   fieldProps?.onClear?.();
-          // }}
-          ,
+          placeholder: fieldProps.placeholder ?? [intl.getMessage('tableForm.selectPlaceholder', '请选择'), intl.getMessage('tableForm.selectPlaceholder', '请选择')],
           value: dayValue,
           onOpenChange: isOpen => {
             if (dayValue) setOpen(isOpen);
@@ -109,8 +102,8 @@ const FieldRangePicker = ({
           },
           onChange: handleRangeChange
         }) : null,
+        variant: propsVariant,
         allowClear: false,
-        variant: variant,
         ref: lightLabel,
         downIcon: dayValue || open ? false : undefined
       });
@@ -120,7 +113,6 @@ const FieldRangePicker = ({
         format: format,
         showTime: showTime,
         placeholder: [intl.getMessage('tableForm.selectPlaceholder', '请选择'), intl.getMessage('tableForm.selectPlaceholder', '请选择')],
-        variant: plain === undefined ? variant : plain ? 'borderless' : 'outlined',
         ...fieldProps,
         value: dayValue
       });

package/lib/field/components/Select/LightSelect/index.d.ts

@@ -15,6 +15,7 @@ export type LightSelectProps = {
     fetchDataOnSearch?: boolean;
     /** 变体类型 */
     variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+    labelVariant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
 } & ProFieldLightProps & SelectProps;
 export declare const LightSelect: React.ForwardRefRenderFunction<any, SelectProps<any> & LightSelectProps>;
 declare const _default: React.ForwardRefExoticComponent<SelectProps<any, import("antd/es/select").DefaultOptionType> & {
@@ -31,5 +32,6 @@ declare const _default: React.ForwardRefExoticComponent<SelectProps<any, import(
     fetchDataOnSearch?: boolean | undefined;
     /** 变体类型 */
     variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
+    labelVariant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & ProFieldLightProps & SelectProps<any, import("antd/es/select").DefaultOptionType> & React.RefAttributes<any>>;
 export default _default;

package/lib/field/components/Select/LightSelect/index.js

@@ -32,6 +32,7 @@ const LightSelect = (props, ref) => {
     value,
     mode,
     defaultValue,
+    labelVariant,
     size,
     showSearch,
     disabled,
@@ -78,6 +79,7 @@ const LightSelect = (props, ref) => {
           width: '153px',
           height: '28px',
           visibility: 'hidden',
+          opacity: 0,
           '&-selector': {
             height: 28
           }
@@ -206,7 +208,7 @@ const LightSelect = (props, ref) => {
       label: label,
       placeholder: placeholder,
       disabled: disabled,
-      variant: variant,
+      variant: labelVariant,
       allowClear: !!allowClear,
       value: filterValue || value?.label || value,
       onClear: () => {

package/lib/field/components/Select/index.js

@@ -315,7 +315,6 @@ const FieldSelect = (props, ref) => {
     const renderDom = () => {
       if (light) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LightSelect.default, {
-          variant: variant,
           id: id,
           loading: loading,
           ref: inputRef,
@@ -323,6 +322,7 @@ const FieldSelect = (props, ref) => {
           size: componentSize,
           options: options,
           label: label,
+          labelVariant: variant,
           placeholder: intl.getMessage('tableForm.selectPlaceholder', '请选择'),
           lightLabel: lightLabel,
           labelTrigger: labelTrigger,
@@ -336,7 +336,6 @@ const FieldSelect = (props, ref) => {
           minWidth: 100,
           ...rest.style
         },
-        variant: variant,
         id: id,
         loading: loading,
         ref: inputRef,

package/lib/field/components/Switch/index.js

@@ -24,9 +24,10 @@ const FieldSwitch = ({
   label,
   formItemRender,
   fieldProps,
-  variant
+  variant: propsVariant
 }, ref) => {
   const intl = (0, _provider.useIntl)();
+  const variant = propsVariant ?? fieldProps?.variant;
   const dom = (0, _react.useMemo)(() => {
     if (text === undefined || text === null || `${text}`.length < 1) return '-';
     return text ? fieldProps?.checkedChildren ?? intl.getMessage('switch.open', '打开') : fieldProps?.unCheckedChildren ?? intl.getMessage('switch.close', '关闭');

package/lib/field/components/TimePicker/index.d.ts

@@ -3,10 +3,12 @@ import type { ProFieldLightProps } from '../../PureProField';
 declare const FieldTimeRangePicker: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string[] | number[];
     format?: string | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export { FieldTimeRangePicker };
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string | number;
     format?: string | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

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

@@ -25,9 +25,9 @@ const FieldTimePicker = ({
   format = 'HH:mm:ss',
   render,
   formItemRender,
-  plain,
   fieldProps,
-  lightLabel
+  lightLabel,
+  variant
 }, ref) => {
   const [open, setOpen] = (0, _react.useState)(false);
   const intl = (0, _provider.useIntl)();
@@ -66,8 +66,9 @@ const FieldTimePicker = ({
         } : undefined,
         label: label,
         disabled: disabled,
+        variant: variant ?? fieldProps?.variant,
         value: dayValue || open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TimePicker, {
-          variant: "borderless",
+          variant: variant ?? fieldProps?.variant,
           format: format,
           ref: ref,
           ...fieldProps,
@@ -87,7 +88,6 @@ const FieldTimePicker = ({
       dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker.TimePicker, {
         ref: ref,
         format: format,
-        variant: plain === undefined ? 'outlined' : plain ? 'borderless' : 'outlined',
         ...fieldProps,
         value: dayValue
       });
@@ -118,8 +118,8 @@ const FieldTimeRangePickerComponents = ({
   format = 'HH:mm:ss',
   render,
   formItemRender,
-  plain,
-  fieldProps
+  fieldProps,
+  variant
 }, ref) => {
   const intl = (0, _provider.useIntl)();
   const [open, setOpen] = (0, _react.useState)(false);
@@ -166,9 +166,10 @@ const FieldTimeRangePickerComponents = ({
         } : undefined,
         label: label,
         disabled: disabled,
+        variant: variant,
         placeholder: placeholder,
         value: dayValue || open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TimePicker.RangePicker, {
-          variant: "borderless",
+          variant: variant ?? fieldProps?.variant,
           format: format,
           ref: ref,
           ...fieldProps,
@@ -188,7 +189,7 @@ const FieldTimeRangePickerComponents = ({
       dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TimePicker.RangePicker, {
         ref: ref,
         format: format,
-        variant: plain === undefined ? 'outlined' : plain ? 'borderless' : 'outlined',
+        variant: variant,
         ...fieldProps,
         value: dayValue
       });

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

@@ -25,7 +25,7 @@ const FieldTreeSelect = ({
   light,
   label,
   render,
-  variant,
+  variant: propsVariant,
   ...rest
 }, ref) => {
   const {
@@ -46,6 +46,7 @@ const FieldTreeSelect = ({
     searchValue: propsSearchValue,
     ...fieldProps
   } = rest.fieldProps;
+  const variant = propsVariant ?? fieldProps?.variant;
   const intl = (0, _provider.useIntl)();
   const [loading, options, fetchData] = (0, _Select.useFieldFetchData)({
     ...rest,
@@ -136,7 +137,6 @@ const FieldTreeSelect = ({
             children: [item.label, " ", itemIndex < valuesLength - 1 ? ',' : '']
           });
         } : undefined,
-        variant: !light ? variant : 'borderless',
         ...fieldProps,
         treeData: options,
         showSearch: showSearch,

package/lib/form/BaseForm/BaseForm.js

@@ -378,13 +378,27 @@ function BaseForm(props) {
   } = props;
   const formRef = (0, _react.useRef)({});
   const [loading, setLoadingInner] = (0, _util.useControlledState)(false, propsLoading);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onLoadingChangeCallback = (0, _utils.useRefFunction)(l => {
+    onLoadingChange?.(l);
+  });
+
+  /**
+   * 包装 setLoading，使用 queueMicrotask 延迟回调调用
+   * 避免在渲染阶段调用外部回调导致的 React 警告
+   */
   const setLoading = (0, _react.useCallback)(updater => {
     setLoadingInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onLoadingChange?.(next);
+      queueMicrotask(() => {
+        onLoadingChangeCallback(next);
+      });
       return next;
     });
-  }, [onLoadingChange]);
+  }, [onLoadingChangeCallback]);
   const [urlSearch, setUrlSearch] = (0, _useParams.useUrlSearchParams)({}, {
     disabled: !syncToUrl
   });

package/lib/form/BaseForm/LightWrapper/index.js

@@ -101,7 +101,13 @@ const LightWrapper = props => {
         onChange: e => {
           setTempValue(e?.target ? e.target.value : e);
         },
-        ...children.props
+        ...children.props,
+        // light 模式下由外层 FilterDropdown 统一描边，内层 Select/TreeSelect/DatePicker 等统一使用 borderless，各 Field 组件无需再根据 light 判断
+        variant: 'borderless',
+        fieldProps: {
+          ...children.props?.fieldProps,
+          variant: 'borderless'
+        }
       })
     })
   }));

package/lib/form/BaseForm/LightWrapper/style.js

@@ -8,10 +8,12 @@ var _provider = require("../../../provider");
 const genProStyle = token => {
   return {
     [`${token.componentCls}-collapse-label`]: {
+      boxSizing: 'border-box',
       paddingInline: 1,
       paddingBlock: 1
     },
     [`${token.componentCls}-container`]: {
+      boxSizing: 'border-box',
       [`${token.antCls}-form-item`]: {
         marginBlockEnd: 0
       }

package/lib/form/BaseForm/Submitter/index.js

@@ -51,7 +51,7 @@ const Submitter = props => {
   const dom = [];
   if (resetButtonProps !== false) {
     dom.push( /*#__PURE__*/(0, _react.createElement)(_antd.Button, {
-      ...(0, _util.omit)(resetButtonProps ?? {}, ['preventDefault']),
+      ...(0, _util.omit)(resetButtonProps ?? {}, ['preventDefault', 'fieldProps']),
       key: "rest",
       onClick: e => {
         if (!resetButtonProps?.preventDefault) reset();
@@ -62,7 +62,7 @@ const Submitter = props => {
   if (submitButtonProps !== false) {
     dom.push( /*#__PURE__*/(0, _react.createElement)(_antd.Button, {
       type: "primary",
-      ...(0, _util.omit)(submitButtonProps || {}, ['preventDefault']),
+      ...(0, _util.omit)(submitButtonProps || {}, ['preventDefault', 'fieldProps']),
       key: "submit",
       onClick: e => {
         if (!submitButtonProps?.preventDefault) submit();

package/lib/form/components/DatePicker/DateTimePicker.js

@@ -28,6 +28,7 @@ const ProFormDateTimePicker = /*#__PURE__*/_react.default.forwardRef(({
       valueType,
       customLightMode: true
     },
+    fieldProps: fieldProps,
     ...rest
   });
 });

package/lib/form/components/DateRangePicker/DateTimeRangePicker.js

@@ -23,9 +23,7 @@ const ProFormDateTimeRangePicker = exports.ProFormDateTimeRangePicker = /*#__PUR
 }, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseDateRanger.BaseDateRanger, {
     ref: ref,
-    fieldProps: {
-      ...fieldProps
-    },
+    fieldProps: fieldProps,
     valueType: valueType,
     proFieldProps: proFieldProps,
     fieldConfig: {

package/lib/form/components/Field/index.d.ts

@@ -5,7 +5,6 @@ export type ProFormFieldProps<T = any, FiledProps = Record<string, any>> = ProSc
     mode?: 'edit' | 'read' | 'update';
     isDefaultDom?: boolean;
     ref?: any;
-    plain?: boolean;
     text?: any;
     getFieldProps?: () => Record<string, any>;
     getFormItemProps?: () => Record<string, any>;

package/lib/form/components/Field/index.js

@@ -93,7 +93,5 @@ const BaseProFormField = props => {
     params: propsParams
   });
 };
-const ProFormField = (0, _warpField.default)?.( /*#__PURE__*/(0, _react.memo)(BaseProFormField, (prevProps, nextProps) => {
-  return (0, _utils.isDeepEqualReact)(nextProps, prevProps, ['onChange', 'onBlur']);
-}));
+const ProFormField = (0, _warpField.default)?.(BaseProFormField);
 var _default = exports.default = ProFormField;

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

@@ -130,6 +130,7 @@ export declare const ProFormItemRender: React.FC<Omit<import("antd").FormItemPro
     dataFormat?: string | undefined;
     lightProps?: import("src/form").LightWrapperProps | undefined;
     proFormFieldKey?: any;
+    fieldProps?: Record<string, any> | undefined;
 } & {
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;

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

@@ -41,13 +41,27 @@ const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ...props
   };
   const [collapsed, setCollapsedInner] = (0, _util.useControlledState)(() => defaultCollapsed || false, props.collapsed);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCollapseCallback = (0, _utils.useRefFunction)(c => {
+    props.onCollapse?.(c);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setCollapsed = (0, _react.useCallback)(updater => {
     setCollapsedInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      props.onCollapse?.(next);
+      queueMicrotask(() => {
+        onCollapseCallback(next);
+      });
       return next;
     });
-  }, [props.onCollapse]);
+  }, [onCollapseCallback]);
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);

package/lib/form/components/FormItem/Group/style.js

@@ -8,6 +8,7 @@ var _provider = require("../../../../provider");
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       '&-title': {
         marginBlockEnd: token.marginXL,
         fontWeight: 'bold'

package/lib/form/components/FormItem/index.d.ts

@@ -56,6 +56,7 @@ export type ProFormItemProps = FormItemProps & {
     dataFormat?: string;
     lightProps?: LightWrapperProps;
     proFormFieldKey?: any;
+    fieldProps?: Record<string, any>;
 } & WarpFormItemProps;
 declare const ProFormItem: React.FC<ProFormItemProps>;
 export { FormItemProvide };

package/lib/form/components/FormItem/index.js

@@ -81,12 +81,23 @@ const WithValueFomFiledProps = formFieldProps => {
   if (! /*#__PURE__*/_react.default.isValidElement(filedChildren)) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: filedChildren
   });
+
+  // restProps 可能来自 LightWrapper 的 cloneElement（light 模式下传入 variant/fieldProps），需保留以覆盖 filedChildren.props，避免内层控件线框双线
+  const variantFromRest = restProps.variant;
+  const fieldPropsFromRest = restProps.fieldProps;
   return /*#__PURE__*/_react.default.cloneElement(filedChildren, (0, _utils.omitUndefined)({
     ...restProps,
     [valuePropName]: formFieldProps[valuePropName],
     ...filedChildren.props,
     onChange: finalChange,
-    fieldProps,
+    fieldProps: {
+      ...filedChildren.props?.fieldProps,
+      ...fieldPropsFromRest,
+      ...fieldProps
+    },
+    ...(variantFromRest !== undefined && {
+      variant: variantFromRest
+    }),
     onBlur: isProFormComponent && !isValidElementForFiledChildren && onBlur
   }));
 };
@@ -120,36 +131,8 @@ const WarpFormItem = ({
     if (!addonAfter && !addonBefore) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Item, {
         ...props,
-        //help={typeof help !== 'function' ? help : undefined}
         valuePropName: valuePropName,
-        getValueProps: getValuePropsFunc
-        // @ts-ignore
-        // _internalItemRender={{
-        //   mark: 'pro_table_render',
-        //   render: (
-        //     inputProps: FormItemProps & {
-        //       errors: React.ReactNode[];
-        //       warnings: React.ReactNode[];
-        //     },
-        //     doms: {
-        //       input: JSX.Element;
-        //       errorList: JSX.Element;
-        //       extra: JSX.Element;
-        //     },
-        //   ) => (
-        //     <>
-        //       {doms.input}
-        //       {typeof help === 'function'
-        //         ? help({
-        //             errors: inputProps.errors,
-        //             warnings: inputProps.warnings,
-        //           })
-        //         : doms.errorList}
-        //       {doms.extra}
-        //     </>
-        //   ),
-        // }}
-        ,
+        getValueProps: getValuePropsFunc,
         children: children
       });
     }
@@ -215,6 +198,7 @@ const ProFormItem = props => {
     ignoreFormItem,
     lightProps,
     children: unusedChildren,
+    fieldProps,
     ...rest
   } = props;
   const formListField = (0, _react.useContext)(_List.FormListContext);
@@ -268,8 +252,9 @@ const ProFormItem = props => {
     valuePropName: props.valuePropName,
     children: props.children
   }, rest.proFormFieldKey || rest.name?.toString());
+  const lightPropsForWrapper = (0, _utils.omitUndefined)(lightProps || {});
   const lightDom = noLightFormItem ? children : /*#__PURE__*/(0, _react.createElement)(_BaseForm.LightWrapper, {
-    ...lightProps,
+    ...lightPropsForWrapper,
     key: rest.proFormFieldKey || rest.name?.toString(),
     size: size
   }, children);

package/lib/form/components/FormItem/warpField.js

@@ -234,6 +234,7 @@ function warpField(Field, config) {
         convertValue: convertValue,
         lightProps: (0, _utils.omitUndefined)({
           ...fieldProps,
+          variant: rest.variant ?? fieldProps?.variant,
           valueType,
           bordered,
           allowClear: field?.props?.allowClear ?? allowClear,

package/lib/form/components/List/style.js

@@ -19,6 +19,7 @@ const genProStyle = token => {
       }
     },
     [token.componentCls]: {
+      boxSizing: 'border-box',
       maxWidth: '100%',
       '&-item': {
         '&&-show-label': {

package/lib/form/helpers/grid.d.ts

@@ -1,13 +1,17 @@
-/// <reference types="react" />
 import type { ColProps, RowProps } from 'antd';
+import React from 'react';
 import type { ProFormGridConfig } from '../typing';
-export declare const GridContext: import("react").Context<ProFormGridConfig>;
+export declare const GridContext: React.Context<ProFormGridConfig>;
 interface CommonProps {
     Wrapper?: React.FC<any>;
 }
+interface ColWrapperProps extends ColProps, CommonProps {
+    variant?: string;
+    fieldProps?: Record<string, any>;
+}
 export interface GridHelpers {
     RowWrapper: React.FC<RowProps & CommonProps>;
-    ColWrapper: React.FC<ColProps & CommonProps>;
+    ColWrapper: React.FC<ColWrapperProps>;
     grid: boolean;
 }
 export declare const gridHelpers: (config: ProFormGridConfig & CommonProps) => GridHelpers;

package/lib/form/helpers/grid.js

@@ -1,11 +1,12 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridHelpers = exports.gridHelpers = exports.GridContext = void 0;
 var _antd = require("antd");
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 const GridContext = exports.GridContext = /*#__PURE__*/(0, _react.createContext)({
   grid: false,
@@ -38,6 +39,8 @@ const gridHelpers = ({
   ColWrapper({
     children,
     Wrapper,
+    variant,
+    fieldProps,
     ...rest
   } = {}) {
     const props = (0, _react.useMemo)(() => {
@@ -55,14 +58,27 @@ const gridHelpers = ({
       }
       return originProps;
     }, [rest]);
+
+    // LightFilter clone 传入的 variant/fieldProps 需透传给 ProFormItem，否则 lightProps 无 variant
+    const childrenWithProps = (variant !== undefined || fieldProps !== undefined) && _react.default.Children.count(children) === 1 && /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, {
+      ...(variant !== undefined && {
+        variant
+      }),
+      ...(fieldProps && {
+        fieldProps: {
+          ...children?.props?.fieldProps,
+          ...fieldProps
+        }
+      })
+    }) : children;
     if (!grid) {
       return Wrapper ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-        children: children
-      }) : children;
+        children: childrenWithProps
+      }) : childrenWithProps;
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
       ...props,
-      children: children
+      children: childrenWithProps
     });
   }
 });

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

@@ -64,13 +64,27 @@ function DrawerForm({
   const [resizableDrawer, setResizableDrawer] = (0, _react.useState)(false);
   const [drawerWidth, setDrawerWidth] = (0, _react.useState)(width ? width : resize ? resizeInfo?.minWidth : 800);
   const [open, setOpenInner] = (0, _util.useControlledState)(!!propsOpen, propsOpen);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onOpenChangeCallback = (0, _utils.useRefFunction)(o => {
+    onOpenChange?.(o);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setOpen = (0, _react.useCallback)(updater => {
     setOpenInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onOpenChange?.(next);
+      queueMicrotask(() => {
+        onOpenChangeCallback(next);
+      });
       return next;
     });
-  }, [onOpenChange]);
+  }, [onOpenChangeCallback]);
   const footerRef = (0, _react.useRef)(null);
   const footerDomRef = (0, _react.useCallback)(element => {
     if (footerRef.current === null && element) {

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

@@ -8,6 +8,7 @@ var _provider = require("../../../provider");
 const genDrawerFormStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       '&-sidebar-dragger': {
         width: '5px',
         cursor: 'ew-resize',