我自己写了个 createModal，我感觉体验很好，我想提PR

[bowencool]

type CreateModalProps<T> = {
  /** 弹窗内容，默认内置 ProForm ，可直接传入表单字段：Form.Item、ProFormText 等 */
  children?: ReactElement;
  /** 同 children ，优先级高于 children。可以搭配 noForm:true 实现完全自定义 */
  render?: (formRef: React.MutableRefObject<ProFormInstance<T> | undefined>) => ReactElement;
  /** 隐藏“取消”按钮 */
  hideCancel?: boolean;
  /** 隐藏“确认”按钮 */
  hideOk?: boolean;
  /** “确认”按钮事件 */
  onConfirm?: (values?: T) => Promise<void> | void;
  /** “取消”按钮事件 */
  onCancel?: () => void;
  /** “拒绝”按钮（传入此字段才显示）事件 */
  onDeny?: (values?: T) => Promise<void> | void;
  /** “拒绝”按钮文本，其它按钮配置请查阅 ModalProps */
  denyText?: string;
  /** 全部转发给 Modal */
  modalProps?: Omit<
    ModalProps,
    'onCancel' | 'onOk' | 'visible' | 'destroyOnClose' | 'confirmLoading'
  >;
  /** 全部转发给内置的 ProForm */
  proFormProps?: Omit<
    ProFormProps<T>,
    'submitter' | 'submitButtonProps' | 'submitText' | 'formRef'
  >;
  /**
   * @description 不需要内置 ProForm，完全自定义弹窗内容
   * @default false
   */
  noForm?: boolean;
};

使用方式如下：

<a
  key="review"
  onClick={() => {
    createModal<{ remark: string }>({
      // hideCancel: true,
      modalProps: {
        title: '复核',
        width: 700,
      },
      children: (
        <>
          <ProFormTextArea
            label="备注"
            name="remark"
            fieldProps={{
              showCount: true,
              maxLength: 100,
            }}
            // rules={[{ required: true }]}
          />
          <Form.Item label="操作日志">
            <OperationLog type={0} businessId={record.id} />
          </Form.Item>
        </>
      ),
      async onConfirm(values) {
        const payload = {
          ...values,
          ids: [record.id],
          status: ReconciliationStatusEnum.REVIEW_AUDIT_PASS,
        };
        await changeStatus(payload);
        message.success('复核成功');
        actionRef.current?.reload();
      },
      async onDeny(values) {
        const payload = {
          ...values,
          ids: [record.id],
          status: ReconciliationStatusEnum.REVIEW_AUDIT_REJECT,
        };
        await changeStatus(payload);
        message.success('驳回成功');
        actionRef.current?.reload();
      },
    });
  }}
>
  复核
</a>

点“确认”（或者“驳回”，可选）首先校验表单，其次 await onConfirm(values) 并自动维护按钮的 loading（驳回对应 onDeny），可以在这里面请求接口，Promise resolve 后关闭弹窗，reject 不关闭。

无需维护 modalVisible、confirmLoading 等，这在弹窗多的时候非常有用，比 ModalForm 要方便的多。

[bowencool]

当然也适用非表单的场景，无视 onConfirm 或 onConfirm 的参数即可

[XuJin186]

挺不错的呀

[bowencool]

提了被关了，我单独发了个包：https://github.com/bowencool/create-antd-modal