xiaoxia-saas/apps/web/src/components/ui/Modal.tsx

/**
 * V21 Modal 对话框
 * 封装 Ant Design Modal，应用 V21 设计系统样式
 */
import React from "react"
import { Modal as AntModal } from "antd"
import type { ModalProps as AntModalProps } from "antd"
import type { ModalFuncProps } from "antd/es/modal"
import classNames from "classnames"
import "./ui.css"

export interface ModalProps extends AntModalProps {
  /** 使用 V21 样式 */
  v21?: boolean
}

interface ModalComponent extends React.FC<ModalProps> {
  confirm: (config: ModalFuncProps) => ReturnType<typeof AntModal.confirm>
  info: (config: ModalFuncProps) => ReturnType<typeof AntModal.info>
  success: (config: ModalFuncProps) => ReturnType<typeof AntModal.success>
  error: (config: ModalFuncProps) => ReturnType<typeof AntModal.error>
  warning: (config: ModalFuncProps) => ReturnType<typeof AntModal.warning>
}

const Modal: ModalComponent = ({ className, v21 = true, children, ...rest }) => {
  const v21Class = classNames(v21 && "xx-modal", className)
  return (
    <AntModal className={v21Class} {...rest}>
      {children}
    </AntModal>
  )
}

/** 确认对话框快捷方法 */
Modal.confirm = (config: ModalFuncProps) => {
  return AntModal.confirm({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  })
}

Modal.info = (config: ModalFuncProps) => {
  return AntModal.info({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  })
}

Modal.success = (config: ModalFuncProps) => {
  return AntModal.success({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  })
}

Modal.error = (config: ModalFuncProps) => {
  return AntModal.error({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  })
}

Modal.warning = (config: ModalFuncProps) => {
  return AntModal.warning({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  })
}

export default Modal